web-dev-qa-db-ja.com

CKEditorにテキストが含まれているかどうかを確認するにはどうすればよいですか？

いくつかのフィールドがあるHTMLフォームがあります。それらの1つは、CKEditorによって管理されるtextareaです。

ユーザーがフォームを送信したい場合、すべてのフィールドに値を入力したかどうかを確認したいと思います。

CKEditorコントロールに何かが含まれているかどうかを確認する方法は知っていますが、テキストが含まれていない「空の」HTMLタグである可能性があります。

テキストを確認するにはどうすればよいですか？

サーバー側PHPのtrim（strip_tags（$ content））のようなものを使用しているので、JavaScriptでも同じものを使用したいと思います。

JQueryを使用したソリューションも使用できます。

javascriptckeditorfckeditor
20
Milan Babuškov

これは機能します：

_$("#editorContainer iframe").contents().find("body").text();
_

これにはテキストのみが含まれ、htmlタグは含まれません。

[〜＃〜]更新[〜＃〜]

それは間違いなく CKEditorデモページ で動作します。 FirefoxとFirebugを使用し、Firebugコンソールに移動して、次のように入力します。

_$("#demoInside iframe").contents().find("body").text();
_

コンソールは、htmlタグなしでエディターにテキストを出力します。特定のアプリケーションでセレクターが正しいことを確認してください。次のようにセレクターをテストできます。

_$("#demoInside iframe").contents().find("body").length;
_

これは1に等しいはずです。0の場合、セレクターは間違っています。

UPDATE 2

繰り返しますが、私のコードはまだ正しく、そのページでも機能します。必要なのは適切なセレクターだけです。リンクしたページでは、IDが_<span>_の_cke_editor1_です。その特定のページはjQueryを使用していないため、このサンプルが機能することを証明するには、追加の作業が必要です。 FireQuery をインストールし、ページを「jqueryify」してから、Firebugコンソールでこれを実行します（_$_ではなくjQueryを使用する必要があることに注意してください。これがFireQueryの動作方法です）。

_jQuery("#cke_editor1 iframe").contents().find("body").text();
_

つまり、iframeにアクセスするための適切なセレクターがあることを確認してください。 CKEditorを_<div>_から作成するか_<textarea>_から作成するかは重要ではありません。 CKEditorがDOMに挿入する_<iframe>_を選択できる限り、.contents().find("body").text()を使用してそのiframeのテキストを取得できます。 jqueryセレクターをテストして_.length == 1_かどうかを確認しましたか？

29
Samuel Meacham

CKeditorには、テキストエディタでデータを取得するための独自の組み込み関数があります。

function CheckForm(theForm) 
{
    textbox_data = CKEDITOR.instances.mytextbox.getData();
    if (textbox_data==='')
    {
        alert('please enter a comment');
    }
}

ドキュメント

14
a coder

次のスニペットを使用して、ckeditorにテキストがあるかどうかを確認できます。

var _contents = CKEDITOR.instances.editor1.document.getBody().getText();
if (_contents == '') {
    alert('Please provide the contents.') ;
}
4
Jamal Abdul Nasir

CKEditor5-クラシックエディター

これは古い質問ですが、グーグルでの最初の結果の1つなので、最新バージョンのckeditor、私の場合はckeditor5バージョン11.0の回答を更新すると役立つと思います。 .1

Ckeditor 5の問題は、空のように見える場合でも、フォームを送信するときに、期待どおりに空の値を送信せず、代わりに次の文字列を送信することです。

<p>&nbsp;</p>

特にサーバー側でいくつかの検証ルールを設定したい場合は、それはあなたが望むものではありません。

この頭痛の種を避けるために、私は light-flight 回答に基づいてこのコードスニペットを使用します：

$(document).ready(function() {

    var editorContainer = document.querySelector('#editor');

    var check_if_empty = function(val) {

        return $.makeArray($(val)).every(function(el) {

            return el.innerHTML.replace(/&nbsp;|\s/g, '').length === 0;
        });
    };

    var clear_input_if_empty_content = function(input) {

        var $form = $(input).parents('form');

        $form.on('submit', function() {

            if (check_if_empty($(input).val())) {

                $(input).val('');
            }
        });
    };

    ClassicEditor.create( editorContainer )
        .then(function(editor) {
            clear_input_if_empty_content(editorContainer)
        })
        .catch(function(error) {
            console.log(error);
        });
});
0
chebaby

プロトタイプを使用し、そのライブラリと次の追加を行います。

Element.addMethods({  
  getInnerText: function(element) {
    element = $(element);
    return element.innerText && !window.opera ? element.innerText
      : element.innerHTML.stripScripts().unescapeHTML().replace(/[\n\r\s]+/g, ' ');
  }
});

（ありがとう Tobie Langel ）

次の関数を使用して、実際のテキストがCKEditor内にあるかどうかを判断できました。

function editorEmpty(instanceName){

    var ele = (new Element('div')).update(CKEDITOR.instances[instanceName].getData()); 

    return (ele.getInnerText() == '' || innerText.search(/^(&nbsp;)+$/i) == 0);
}

&nbsp;のテストにも注意してください。エディターが空のように見える場合、実際には<p>&nbsp;</p>のようなものが含まれていることがよくあります。

0
Michael Robinson
<script>
CKEDITOR.replace('messagechat');

var feedback = CKEDITOR.instances.messagechat.document.getBody().getChild(0).getText(); 
// get Data
alert(feedback);
</script>
0
user3230794