如何在highlight.js中使用tinymce？

在我的網站上，我想向讀者展示突出顯示語法的代碼。我正在使用Tinymce進行編輯。我正在使用Mezzanine CMS，而我對TinyMCE不太瞭解。問題是，當我選擇用於包裝我的代碼片段的預格式時，TinyMCE用<pre>標籤包裝它，但highlight.js只包含highlightjs <pre><code> my-code-snippet </code></pre>標籤即，它只會突出顯示由pre包裝的代碼以及代碼標籤。如何在highlight.js中使用tinymce？

我的當前tinymce_setup.js文件是這樣的。

function CustomFileBrowser(field_name, url, type, win) { 
    tinyMCE.activeEditor.windowManager.open({ 
     file: window.__filebrowser_url + '?pop=2&type=' + type, 
     width: 820, // Your dimensions may differ - toy around with them! 
     height: 500, 
     resizable: "yes", 
     scrollbars: "yes", 
     inline: "yes", // This parameter only has an effect if you use the inlinepopups plugin! 
     close_previous: "no" 
    }, { 
     window: win, 
     input: field_name, 
     editor_id: tinyMCE.selectedInstance.editorId 
    }); 
    return false; 
} 

if (typeof tinyMCE != 'undefined') { 

    tinyMCE.init({ 

     // main settings 
     mode : "specific_textareas", 
     editor_selector : "mceEditor", 
     theme: "advanced", 
     language: "en", 
     dialog_type: "window", 
     editor_deselector : "mceNoEditor", 

     // general settings 
     width: '700', 
     height: '350', 
     indentation : '10px', 
     fix_list_elements : true, 
     remove_script_host : true, 
     accessibility_warnings : false, 
     object_resizing: false, 
     //cleanup: false, // SETTING THIS TO FALSE WILL BREAK EMBEDDING YOUTUBE VIDEOS 
     forced_root_block: "p", 
     remove_trailing_nbsp: true, 

     external_link_list_url: '/displayable_links.js', 
     relative_urls: false, 
     convert_urls: false, 

     // callbackss 
     file_browser_callback: "CustomFileBrowser", 

     // theme_advanced 
     theme_advanced_toolbar_location: "top", 
     theme_advanced_toolbar_align: "left", 
     theme_advanced_statusbar_location: "", 
     theme_advanced_buttons1: "bold,italic,|,link,unlink,|,image,|,media,charmap,|,code,|,table,|,bullist,numlist,blockquote,|,undo,redo,|,formatselect,|,search,replace,|,fullscreen,", 
     theme_advanced_buttons2: "", 
     theme_advanced_buttons3: "", 
     theme_advanced_path: false, 
     theme_advanced_blockformats: "p,h1,h2,h3,h4,pre", 
     theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8", 
     theme_advanced_resizing : true, 
     theme_advanced_resize_horizontal : false, 
     theme_advanced_resizing_use_cookie : true, 
     theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block", 
     advlink_styles: "intern=internal;extern=external", 

     // plugins 
     plugins: "inlinepopups,contextmenu,tabfocus,searchreplace,fullscreen,advimage,advlink,paste,media,table", 
     advimage_update_dimensions_onchange: true, 

     // remove MS Word's inline styles when copying and pasting. 
     paste_remove_spans: true, 
     paste_auto_cleanup_on_paste : true, 
     paste_remove_styles: true, 
     paste_remove_styles_if_webkit: true, 
     paste_strip_class_attributes: true, 

     // don't strip anything since this is handled by bleach 
     valid_elements: "+*[*]", 
     valid_children: "+button[a]" 

    }); 

}

我應該讓我的TinyMCE的設置什麼樣的變化，以至於當我點擊預成型，我得到<pre><code> </code></pre>標籤？

來源

2014-03-27 Mayur Rokade

在highlight.js文檔中找到答案。在這裏自定義初始化http://highlightjs.org/usage/我發現它。我已經把

<script>$(document).ready(function() { 
     $('pre').each(function(i, e) {hljs.highlightBlock(e)}); 
    });</script>

就在關閉身體標記之前。這將拾取前標籤中找到的代碼並突出顯示它。

來源

2014-03-27 18:28:22

你有什麼想法如何突出像ckeditor新添加的內容。 –

如何在highlight.js中使用tinymce？

回答

相關問題