Getting non-html text from CKeditor

In my application, in the news insertion section, I use the newsline substring to summarize the news. to get text content from users, I use CKEditor and for roundup I use the substring method to get a certain length of content.but news, when I work with CKEditor, I get text with html tags, not plain text, and when I use substring method, my news summary gets messy! How to get the source text from this control? I am reading this , but I cannot use the getText () method

+8
javascript text ckeditor
source share
6 answers

do it like that

//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, take the plain_text part 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 an onsubmit handler in the form, e.g.

 <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 connect to the server using hidden_snippet along with the rest of the fields in the form.

+10
source share

Try using this code:

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

It works great for me. You can check it out at http://ckeditor.com/demo . This is not ideal (the text in the table cells is combined without spaces), but it may be enough for your needs.


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

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

It is also important that it works in the article editor and in the Inline editor you need to get the text of another element:

 CKEDITOR.instances.editor1.editable().getText(); 
+14
source share

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 script for testing: http://jsfiddle.net/4etVv/3/

+2
source share

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 this helps!

0
source share

I personally use this method to compress the code and also remove two spaces and lines:

  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 
0
source share

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

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

CKEditor seems to add a voice tag element to the actual editable content. Therefore, getChild(0) .

0
source share

All Articles