2016-11-20 9 views
0

TinyMCEを使用してtextareaをフォームにエンハンスすることを決めましたが、TinyMCEがその要素をラップするので、元の要素のスタイリングとjQuery機能が中断されましたiframeおよび数えてdivである。 TinyMCEの機能(テキストの書式を保持するなど)を取得するだけでなく、オリジナルのtextareaに関連付けられていたスタイリングや機能を失うことができないようにすることが大好きです。私はTinyMCEのドキュメントを見ましたが、これについては何も見つかりませんでした。誰かがこれを達成するためのどのような考えを持っていますか?TinyMCE - 選択された要素のスタイルと機能を維持する

私のフォームはそうのようなtextareaています:

<head> 
    <script>tinymce.init({ selector: 'textarea' });</script> 
</head> 

<div class="form-element"> 
    <div class="label-container"> 
     <label for="body">Post</label><span class="warning">Please fill out this field</span> 
    </div> 
    <textarea id="body" class="input-field" name="body"></textarea> 
</div> 

が、TinyMCEのはlabel/textarea関係を壊し加えます。

また、jQueryの機能は、この検証スクリプトとして、壊れていない:

$("form").submit(function(e){ 
    tinyMCE.triggerSave(); 
    var inputFields = $(".input-field"); 
    var proceed = true; 
    for(var i = 0; i < inputFields.length; i++){ 
     if($(inputFields[i]).val() == ""){ 
      $(inputFields[i]).css("border", "solid 3px #E86F3A"); 
      $(inputFields[i]).prev().find(".warning").show(); 
      var proceed = false; 
      e.preventDefault(); 
     } 
     else{ 
      $(inputFields[i]).css("border", "none"); 
      $(inputFields[i]).prev().find(".warning").hide(); 
     }; 
    }; 
    //OTHER STUFF... 
}); 

textarea.input-fieldinputFields変数に拾わなくなっているからです。

簡単に言えば、TinyMCEラッパーは、それが接続されている要素のスタイリングと機能を「継承」するように探しています。可能?

答えて

0

あなたは<textarea>オリジナル<textarea>がページにもはや表示され、その<div>要素のとシリーズに置き換えるにTinyMCEのを起動するとき、あなたは正しく推測したように。

<textarea>を同期させたい場合は、tinymce.triggerSave()メソッドを使用できます。これにより、基になる<textarea>要素のすべてがTinyMCEの適切なインスタンスの現在の値に更新されます。

誰かがコンテンツの保存/送信を試みたとき、または特定のエディターイベントが発生したときにこれを実行しようと試みるときにこれを行うことができます(https://www.tinymce.com/docs/advanced/events/#editorevents)。 <textarea>のコンテンツのリアルタイム精度が必要な場合を除き、jQuery検証を実行する直前にtriggerSave()メソッドを呼び出す方が簡単です。

:あなたは、もはや基礎となる<textarea>を見ないよう<textarea>にボーダーを置くはTinyMCEをに与える影響はありません。あなたは確かに、CSSをエディタのHTMLにリアルタイムで追加しようとすることができます。 TinyMCEの4.4の外側の境界線が付属これらのクラスがあります。

class="mce-tinymce mce-container mce-panel" 

を...しかし、あなたはTinyMCEをあなたのCSSはまだアップグレードする前に動作を確認してくださいアップグレードするので、もしこれらのクラスは、時間の経過とともに変更される可能性があることに注意します。

関連する問題