Wollen Sie HTML gerendert mit gleicher Formatierung wie TinyMCE Plugin codesample

Question

Hier ist ein Bild von meiner Seite bearbeiten, um zu sehen, wo TinyMCE enthalten ist: In my edit page

Wenn außerhalb von TinyMCE ist die codesample gemacht Formatierung nicht view page zeigt. Ich möchte die gleiche Formatierung beim Rendern des Inhalts haben, wie ich es in TinyMCE sehe, wenn ich das Codesample-Plugin verwende.

Hier ist der Code, den ich zum Aufruf von TinyMCE (4.3.2) verwende.

tinymce.init({ 
 
    selector: 'textarea', 
 
    height: 200, 
 
    language: 'bn_BD', 
 
    plugins: [ 
 
    'advlist autolink lists link image charmap print hr anchor pagebreak', 
 
    'searchreplace wordcount visualblocks visualchars code codesample fullscreen', 
 
    'insertdatetime media nonbreaking table contextmenu directionality', 
 
    'emoticons template paste textcolor colorpicker textpattern imagetools' 
 
    ], 
 
    setup: function(editor) { 
 
     editor.on('FullscreenStateChanged', function(e) { 
 
      if(e.state) { 
 
       $('header').hide(); 
 
      } 
 
      else { 
 
       $('header').show(); 
 
      } 
 
     }); 
 
    }, 
 
    toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | codesample link image media | forecolor backcolor', 
 
    image_advtab: true, 
 
    imagetools_cors_hosts: ['celica.muktosoft.com'], 
 
    templates: [ 
 
    { title: 'Lesson Template', content: 'Test 1' } 
 
    ], 
 
    file_browser_callback: function(field_name, url, type, win) { 
 
    if(type=='image') { 
 
     document.getElementById("fileupload_field_id").value = field_name; 
 
     document.getElementById("fileupload").value = ""; 
 
     document.getElementById("fileupload").click(); 
 
    } 
 
    }, 
 
    content_css: [ 
 
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
 
    '//www.tinymce.com/css/codepen.min.css' 
 
    ] 
 
});

Answer 1

Achten Sie darauf, die CSS- (und JavaScript-) Datei von prism.js download page (wählen Sie die Sprachen, die Sie brauchen!) Auf Ihrer "Ansichtsseite" einzufügen.

Wenn ein Code-Snippet in TinyMCE mit codesample Plugin eingeben, denken Sie daran die entsprechende Sprache am oberen Rand des Fensters von codesample ... ;-)

Answer 2

Der Schlüssel dies zu lösen ist, zu wissen, dass TinyMCE auf Prism.js für die Syntax-Hervorhebung Fähigkeit beruht. Wenn Sie den Inhalt von TinyMCE extrahieren möchten und haben es erscheinen anderswo müssen Sie ...

Schritt 1:

Fügen Prism.js und prism.css auf Ihrer Seite - diese heruntergeladen werden können, die Prism-Website.

Schritt 2:

Verwenden TinyMCE APIs den Inhalt aus dem Editor zu extrahieren. Zum Beispiel:

var htmlToLoad = tinyMCE.get('area3').getContent(); 

Schritt 3:

Setzen Sie den Inhalt in ein HTML-Block-Element:

document.getElementById("result").innerHTML = htmlToLoad; 

Schritt 4:

Run Prism Highlight-Funktion: Prism.highlightAll();

Dies löst Prism aus, um das DOM für Dinge, die es hervorheben sollte, neu zu bewerten - es wird dies nicht automatisch tun.