TinyMCE로 포맷 된 텍스트 만 표시하는 방법 4

TinyMCE 플러그인으로 전체 편집기를 성공적으로 구현했지만 편집 모드없이 잘 구성된 (tinyMce css로) 내용을 표시 할 수 없습니다.TinyMCE로 포맷 된 텍스트 만 표시하는 방법 4

예 :

에게 그녀를 :

**
다음

내가 에디션 모드에서 만들 수있는 것입니다 전자 내가 디스플레이 모드에서 무엇을 얻을 수 있습니다 :

으로, 당신은
이
그럼, 어떻게 내가 정확히 같은이 외부 렌더링 얻을 수 있습니다 ... 그것은 모두 같은 결과가 아니다 볼 수 있습니다 편집기 모드?

**

**

출처

2017-05-22 LedZelkin

, 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();

희망이 다른 하나를 도울 수 있습니다 :)

출처

2017-06-22 08:37:27 LedZelkin

에디터에 CSS를 사용하고 있는지 추측하지만, 사용하지 않을 편집기 외부 컨텐츠를 렌더링 할 때 CSS 동일 (또는).

동일하게 보이게하려면 편집기 내부와 외부에서 동일한 CSS를 사용해야합니다. 당신은 그래서 작은 해킹했다 tinymce.init

와 자바 스크립트를 활성화 해달라고하면 사실

출처

2017-05-22 17:47:53

그게 요점입니다. 그렇다면이 CSS를이 텍스트에 어떻게 적용 할 수 있습니까? 어쩌면 이것을 허용하는 자바 스크립트 코드가 있습니까? 내가 구름 배치를 사용하고 있기 때문에 – LedZelkin

외부 콘텐츠가 편집기 또는 편집기에서 외부 콘텐츠처럼 보이게하고 싶습니까? –

외부 콘텐츠가 편집기에서 보이는 것처럼 – LedZelkin

TinyMCE로 포맷 된 텍스트 만 표시하는 방법 4

답변

관련 문제