tinymce與prism如何實現高亮的代碼以及漢化的配置方法過程

小編給大家分享一下tinymce與prism如何實現高亮的代碼以及漢化的配置方法過程，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

簡單介紹：TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器，由JavaScript寫成。它對IE6+和Firefox1.5+都有著非常良好的支持。功能方強大，并且功能配置靈活簡單。另一特點是加載速度非常快的。最重要的是，TinyMCE是一個根據LGPL license發布的自由軟件，你可以把它用于商業應用，好了不多說，想了解更多自行百度，我們進入正題。

一、編輯頁配置

1.首先我們需要引用網頁樣式控制文件及腳本語言編輯文件（其中前兩個是tinymce腳本文件，后兩個是prism高亮文件）

1 <script type="text/javascript" src="tinymce.min.js"></script>
2 <script type="text/javascript" src="jquery.tinymce.min.js"></script>
3 <link href="prism.css" rel="stylesheet" />
4 <script src="prism.js"></script>

2.在body中設計好我們的文本

1 <textarea name="content" style="width:100%"></textarea>

3.在js中進行文本的初始化

（1）tinymce.init配置并初始化tinymce

（2）selector: "textarea"根據你的選擇器來指定，我這里是textarea，可以綁定id（#···）或class（.····）

（3）plugins填寫要使用的插件名稱

（4）toolbar設置工具欄指定顯示插件，這里我展示了三個工具欄

（5）menubar禁用菜單欄模板

（6）toolbar_items_size工具欄標簽大小設置為小

（7）style_formats初始化的默認樣式，這個根據自己喜好調節

（8）templates模板，toolbar3中的template選中標題后自動追加值content到文本框

（9）language:'zh_CN'語言本身默認英文，這里指定語言為中文

<script type="text/javascript">
    tinymce.init({
        selector: "textarea",
        plugins: [
            "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "table contextmenu directionality emoticons template textcolor paste fullpage textcolor codesample"
        ],
 
        toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
        toolbar2: " searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code codesample | inserttime preview | forecolor backcolor",
        toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
 
        menubar: false,
        toolbar_items_size: 'small',
 
        style_formats: [
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h2', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],
 
        templates: [
            {title: 'Test template 1', content: 'Test 1'},
            {title: 'Test template 2', content: 'Test 2'}
        ],
        language:'zh_CN'
    });</script>

另外當我們用codesample進行插入會產生class=“language-**”標簽，這個一眼看去和prism高亮顯示插件是迎合的，也表示官方的支持。所以我們使用prism作為代碼高亮插件。

（4）賦值及設置值操作

1 var context=tinyMCE.activeEditor.getContent();//進行值得獲取
2  
3 tinyMCE.activeEditor.setContent("你的數據");//進行值得獲取

二、展示頁相關配置

1、引用網頁樣式控制文件及腳本語言編輯文件（兩個高亮顯示腳本）

1 <link href="prism.css" rel="stylesheet" />
2 <script src="prism.js"></script>

2、你的編輯器保存的值取出顯示到頁面就可以了。

以上是tinymce與prism如何實現高亮的代碼以及漢化的配置方法過程的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！