Использование HTML-текст от редактора CKEditor

Question

Использование HTML-текст от редактора CKEditor

В моем приложении, в разделе insert news, Я использую подстроку новостного контента для сводки новостей. для получения текста новостного контента от пользователей я использую CKEditor, а для сводки новостей я использую метод подстроки, чтобы получить определенную длину новостного контента.но когда я работаю с CKEditor, я получаю текст с HTML-тегами, а не простой текст, и когда я использую метод подстроки, мое резюме новостей становится запутанным! как получить необработанный текст из этого элемента управления?
я читал это, но я не могу использовать метод getText ()

622 6

javascript text ckeditor

6 ответов:

Comments

Ничего не найдено.

davidkonrad · Accepted Answer · 2013-12-10 11:37:50

Сделай вот так
//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);
Виола, возьми ту часть обычного текста, которую ты хочешь.
UPDATE / EXAMPLE

Добавьте этот 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 в форму, например
<form action="xxx" method="xxx" onsubmit="createTextSnippet();" />
Внутри формы, между <form> и </form> вставить
<input type="hidden" name="hidden_snippet" id="hidden_snippet" value="" />
Когда форма отправлена, вы можете получить доступ к hidden_snippet на стороне сервера вместе с остальными полями в форме.

Reinmar · Accepted Answer · 2017-12-20 16:34:58

Попробуйте такой код:
CKEDITOR.instances.editor1.document.getBody().getText();
Это прекрасно работает для меня. Вы можете проверить это на http://ckeditor.com/demo это не идеально (текст в ячейках таблицы соединяется вместе без пробелов), но может быть достаточно для ваших нужд.

EDIT (20 Dec 2017): демо CKEditor 4 было перемещено в https://ckeditor.com/ckeditor-4/ и использует разные имена редакторов, поэтому новый код для выполнения:
CKEDITOR.instances.ckdemo.document.getBody().getText();
Также важно, что он будет работать в " редакторе статей" а в" встроенном редакторе " вам нужно получить текст другого элемента:
CKEDITOR.instances.editor1.editable().getText();

Adil Malik · Accepted Answer · 2015-09-04 17:21:12

Я использовал эту функцию:

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/

Hart · Accepted Answer · 2016-12-22 22:10:13

Я лично использую этот метод для сжатия кода и удаления также двойных пробелов и строк:
        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

Cyril Jacquart · Accepted Answer · 2016-03-02 21:07:11

Я использую этот метод (нужен jQuery):
var objEditor =CKEDITOR.instances["textarea_id"];
var msg = objEditor.getData();
var txt = jQuery(msg).text().replaceAll("\n\n","\n");
Надеюсь, это поможет!

zendu · Accepted Answer · 2017-12-19 14:45:58

Предполагая, что editor является вашим экземпляром CKEditor (CKEditor.instances.editor1 из приведенного выше примера Или если вы используете события, то event.editor). Вы можете использовать следующий код для получения обычного текстового содержимого.

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

По-видимому, CKEditor добавляет элемент "голосовая метка" к фактическому редактируемому контенту. Отсюда getChild(0).