Getting non-html text from CKeditor

问题

In my application, in insert news section, i use a sub string of news content for news Summary. for getting news content text from users,i use CKEditor and for news summary i use substring method to get a certain length of news content.but when i'm working with CKEditor i get text with html tags and not plain text and when i use substring method, my news summary become messed! how do i get raw text from this control? i read this but i can't use getText() method

回答1:

do it like this

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

viola, grab the portion of plain_text you want.

UPDATE / EXAMPLE

add this 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>

in your HTML, add createTextSnippet as onsubmit-handler to the form, eg

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

inside the form, between <form> and </form> insert

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

When the form is submitted, you can serverside access hidden_snippet along with the rest of the fields in the form.

回答2:

Try code like this:

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

It works fine for me. You can test it on http://ckeditor.com/demo. It's not ideal (text in table cells is joined together without spaces), but may be enough for your needs.

EDIT (20 Dec 2017): The CKEditor 4 demo was moved to https://ckeditor.com/ckeditor-4/ and uses different editor names, so the new code to execute is:

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

It's also important that it will work in the "Article editor" and in the "Inline editor" you need to get text of a different element:

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

回答3:

i personally use this method to compact the code and remove also double spaces and line feeds:

        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

回答4:

I used this function:

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,'' );
}

Function call:

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

I created this fiddle for testing: http://jsfiddle.net/4etVv/3/

回答5:

Assuming that editor is your CKEditor instance (CKEditor.instances.editor1 from above example or if you are using events then event.editor). You can use following code to get plain text content.

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

Apparently CKEditor adds a "voice label" element to the actual editable content. Hence getChild(0).

回答6:

I use this method (need jQuery):

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

hope it helps!

来源：https://stackoverflow.com/questions/12895795/getting-non-html-text-from-ckeditor

标签

javascript

text

ckeditor