web-dev-qa-db-ja.com

CKeditorから非HTMLテキストを取得する

私のアプリケーションでは、ニュースの挿入セクションで、ニュースの概要にニュースコンテンツのサブ文字列を使用しています。ユーザーからニュースコンテンツのテキストを取得するには、CKEditorを使用し、ニュースの概要には、サブストリングメソッドを使用して特定の長さのニュースコンテンツを取得します。ただし、CKEditorを使用している場合は、プレーンテキストではなくhtmlタグ付きのテキストを取得します。サブストリングメソッド、私のニュースの要約が台無しになります！このコントロールから生のテキストを取得するにはどうすればよいですか？ これを読んだ しかしgetText（）メソッドを使用できない

javascripttextckeditor
13
ozzy_mra

このようにします

//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で、フォームにonsubmit-handlerとしてcreateTextSnippetを追加します。

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

フォーム内の<form>と</form>の間に挿入

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

フォームが送信されると、フォーム内の残りのフィールドとともに、サーバーサイドでhidden_​​snippetにアクセスできます。

12
davidkonrad

次のようなコードを試してください。

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

私は個人的にこの方法を使用してコードを圧縮し、ダブルスペースと改行も削除します。

        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
5
Hart

私はこの関数を使用しました：

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/

2
Adil Malik

editorがCKEditorインスタンスであると仮定します（上記の例の_CKEditor.instances.editor1_、またはイベントを使用している場合は_event.editor_）。次のコードを使用して、プレーンテキストコンテンツを取得できます。

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

どうやらCKEditorは実際の編集可能なコンテンツに「音声ラベル」要素を追加しているようです。したがって、getChild(0)。

1
zendu

私はこのメソッドを使用します（jQueryが必要です）：

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

それが役に立てば幸い！

0
Cyril Jacquart