web-dev-qa-db-ja.com

tinyMCEエディターが空白の場合、その横に文字列を追加して検証するにはどうすればよいですか?

フォームを検証する必要があります。このフォームにはいくつかのドロップダウンとtinyMCEエディターがあります。空白の場合は各フィールドの後に文字列「必須」を追加してこのフォームを検証していますが、tinyMCEエディターを検証できません。エディターが空白の場合は、次のようなものを試しました。

tinyMCE.get('tinyedotor').getContent();

しかし、運がありません。

これが私の フィドル

11
Mike

getContent()は問題なく動作するはずです。フィドルには、エディター値のフォーム検証コードが含まれていません。これは、ここでは非常に重要です。これを試して:

_var editorContent = tinyMCE.get('tinyeditor').getContent();
if (editorContent == '')
{
    // Editor empty
}
else
{
    // Editor contains a value
}
_

フォークフィドル

また、idドロップダウンに対して複数のselectを宣言していることにも注意してください。

編集:getContainer()メソッドを使用して、エディターコンテナーのidを取得できます:tinyMCE.get('tinyeditor').getContainer()。エディターの後にエラーメッセージを挿入すると、次のようになります。

_$('<span class="error">Editor empty</span>').insertAfter($(tinyMCE.get('tinyeditor').getContainer()));
_

ただし、これにより、ユーザーが送信ボタンをクリックするたびに新しいspanが作成されるため、一意のidを持つエラーメッセージコンテナを作成し、そのコンテナがすでに挿入する前に存在します。

編集2更新されたフィドル

14
Viktor

これを行うと、htmlを解析せずにコンテンツが空かどうかを確認できます。

var content = tinymce.get('tinymceEditor').getContent({format: 'text'});
if($.trim(content) == '')
{
   // editor is empty ...
}
9

あなたがしたいことは簡単に行うことができます。彼女は フィドルへのリンク 私の解決策です。

2
Thariama

Getcontent()を使用するのが適切な方法ですが、ユーザーがスペースに入るとどうなりますか!! ??
これがRegEXの完全なソリューションです-

var content = tinyMCE.get('tinyeditor').getContent(), patt;

            //Here goes the RegEx
            patt = /^<p>(&nbsp;\s)+(&nbsp;)+<\/p>$/g;

            if (content == '' || patt.test(content)) {
                $('.bgcolor').css("border", "1px solid Red")
                return false;
            }
            else {
                $('.bgcolor').removeAttr("style")
                return true;
            }

注:( '。bgcolor')は、検証が行われるときに赤い境界線を持つ 'tinyeditor'の周りのdivに他なりません。

1

getContent()がその方法です。 _tinyMCE.activeEditor_オブジェクトを使用してそのオブジェクトでgetContent()を呼び出すか、または実行しているようにIDでエディターインスタンスを取得することができます。

IDにタイプミスがあるようです。これが、問題の原因である可能性があります。

_tinyMCE.get('tinyedotor').getContent();
_

おそらく次のようになります。

_tinyMCE.get('tinyeditor').getContent();
_
0
buley