从CKeditor获取非HTML文本

Question

在我的应用程序中，在插入新闻部分，我使用新闻内容的子字符串作为新闻摘要。为了从用户获取新闻内容文本，我使用CKEditor和新闻摘要我使用substring方法获取一定长度的新闻内容。但是当我使用CKEditor时，我得到带有html标签的文本而不是纯文本，当我使用时子串方法，我的新闻摘要变得混乱！如何从此控件获取原始文本？ i read this但我不能使用getText（）方法

Answer 1

像这样做

//getSnapshot() retrieves the "raw" HTML, without tabs, linebreaks etc
var html=CKEDITOR.instances.YOUR_TEXTAREA_ID.getSnapshot();
var dom=document.createElement("DIV");
dom.innerHTML=html;
var plain_text=(dom.textContent || dom.innerText);

alert(plain_text);

中提琴，抓住你想要的plain_text部分。

更新/示例

添加此JavaScript

<script type="text/javascript">
function createTextSnippet() {
    //example as before, replace YOUR_TEXTAREA_ID
    var html=CKEDITOR.instances.YOUR_TEXTAREA_ID.getSnapshot();
    var dom=document.createElement("DIV");
    dom.innerHTML=html;
    var plain_text=(dom.textContent || dom.innerText);

    //create and set a 128 char snippet to the hidden form field
    var snippet=plain_text.substr(0,127);
    document.getElementById("hidden_snippet").value=snippet;

    //return true, ok to submit the form
    return true;
}
</script>

在HTML中，将createTextSnippet作为onsubmit-handler添加到表单中，例如

<form action="xxx" method="xxx" onsubmit="createTextSnippet();" />

在形式内，在<form>和</form>插入之间

<input type="hidden" name="hidden_snippet" id="hidden_snippet" value="" />

提交表单后，您可以在服务器端访问隐藏的代码段以及表单中的其余字段。

Answer 2

尝试这样的代码：

CKEDITOR.instances.editor1.document.getBody().getText();

这对我来说可以。你可以在http://ckeditor.com/demo上测试它。它并不理想（表格单元格中的文本在没有空格的情况下连接在一起），但可能足以满足您的需求。

---

编辑（2017年12月20日）：CKEditor 4演示被移动到https://ckeditor.com/ckeditor-4/并使用不同的编辑器名称，因此要执行的新代码是：

CKEDITOR.instances.ckdemo.document.getBody().getText();

同样重要的是，它将在“文章编辑器”和“内联编辑器”中工作，您需要获取不同元素的文本：

CKEDITOR.instances.editor1.editable().getText();

Answer 3

我个人使用这种方法来压缩代码并删除双空格和换行符：

        var TextGrab = CKEDITOR.instances['editor1'].getData();
        TextGrab = $(TextGrab).text(); // html to text        
        TextGrab = TextGrab.replace(/\r?\n|\r/gm," "); // remove line breaks   
        TextGrab = TextGrab.replace(/\s\s+/g, " ").trim(); // remove double spaces

Answer 4

我用过这个函数：

function getPlainText( strSrc ) {
    var resultStr = "";

    // Ignore the <p> tag if it is in very start of the text
    if(strSrc.indexOf('<p>') == 0)
        resultStr = strSrc.substring(3);
    else
        resultStr = strSrc;

    // Replace <p> with two newlines
    resultStr = resultStr.replace(/<p>/gi, "\r\n\r\n");
    // Replace <br /> with one newline
    resultStr = resultStr.replace(/<br \/>/gi, "\r\n");
    resultStr = resultStr.replace(/<br>/gi, "\r\n");

    //-+-+-+-+-+-+-+-+-+-+-+
    // Strip off other HTML tags.
    //-+-+-+-+-+-+-+-+-+-+-+

    return  resultStr.replace( /<[^<|>]+?>/gi,'' );
}

功能调用：

var plain_text = getPlainText(FCKeditorAPI.GetInstance("FCKeditor1").GetXHTML());

我创造了这个小提琴进行测试：http://jsfiddle.net/4etVv/3/

Answer 5

我用这个方法（需要jQuery）：

var objEditor =CKEDITOR.instances["textarea_id"];
var msg = objEditor.getData();
var txt = jQuery(msg).text().replaceAll("\n\n","\n");

希望能帮助到你！

Answer 6

假设editor是你的CKEditor实例（来自上面例子的CKEditor.instances.editor1，或者如果你正在使用事件那么event.editor）。您可以使用以下代码来获取纯文本内容。

editor.ui.contentsElement.getChild(0).getText()

显然，CKEditor为实际可编辑内容添加了“语音标签”元素。因此getChild(0)。