从CKeditor获取非HTML文本

问题描述 投票:10回答:6

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

javascript text ckeditor
6个回答
11
投票

像这样做

//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="" />

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


15
投票

尝试这样的代码:

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();

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

2
投票

我用过这个函数:

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/


0
投票

我用这个方法(需要jQuery):

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

希望能帮助到你!


0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.