TinyMCEでフォーマットされたテキストのみを表示する方法4

Question

TinyMCEプラグインで完全なエディタを実装しましたが、編集モードを使わずに（tinyMce CSSで）整形されたコンテンツを表示できません。

例：ここでは

**

iが編集モードで作成することができるものである。

**

彼女E iは表示モードで得るものです：だから...

として、あなたはそれがすべてで同じ結果ではありません見ることができます

、どのように私は同じの外でレンダリングを正確に取得することができますエディタモード？エディタでCSSを使用しますが、エディタ外のコンテンツをレンダリングするときと同じ（または任意の）CSSを使用していないことを推測

**

**

Answer 1

、TinyMCEのではないaplpy CSSの操作を行います。

マイHTML：

    <div class="tab-pane active" id="tab1"> 
         <div id="description_content"> 
          <div class="text_description_content"><div class="mce-content-body"> <textarea class="tmpTextArea">{{project.description|raw }} </textarea></div></div> 
         </div> 

         <div id="toAppend" class="mce-content-body"></div> 
        </div> 

マイJS：

//activate tinyMCE 
     tinymce.init({ 
      selector: '.tmpTextArea', 
      menubar: false, 
      plugins: [ 
       'advlist autolink lists link image charmap print preview anchor', 
       'searchreplace visualblocks code fullscreen', 
       'insertdatetime media table contextmenu paste code' 
      ], 
      toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
      content_css: '//www.tinymce.com/css/codepen.min.css' 
     }); 
    //get what is inside the textarea editor 
     var content = $('iframe').contents().find('#tinymce').contents(); 
//append it in a div 
     $("#toAppend").append(content); 
//disable edit 
     tinymce.activeEditor.hide(); 
//hide the textarea editor 
     $(".tmpTextArea").hide(); 

これはもう1つ助けてくれるでしょう:)

Answer 2

。

同じものを見たい場合は、同じCSSをエディタの内部と外部の両方で使用する必要があります。あなたはだから私は小さなハックをしたtinymce.init

であなたのJavaScriptでそれをアクティブにいけない場合事実で