tinymce與prism如何實(shí)現(xiàn)高亮的代碼以及漢化的配置方法過(guò)程

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

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

一、編輯頁(yè)配置

1.首先我們需要引用網(wǎng)頁(yè)樣式控制文件及腳本語(yǔ)言編輯文件（其中前兩個(gè)是tinymce腳本文件，后兩個(gè)是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中設(shè)計(jì)好我們的文本

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

3.在js中進(jìn)行文本的初始化

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

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

（3）plugins填寫(xiě)要使用的插件名稱

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

（5）menubar禁用菜單欄模板

（6）toolbar_items_size工具欄標(biāo)簽大小設(shè)置為小

（7）style_formats初始化的默認(rèn)樣式，這個(gè)根據(jù)自己喜好調(diào)節(jié)

（8）templates模板，toolbar3中的template選中標(biāo)題后自動(dòng)追加值content到文本框

（9）language:'zh_CN'語(yǔ)言本身默認(rèn)英文，這里指定語(yǔ)言為中文

<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>

另外當(dāng)我們用codesample進(jìn)行插入會(huì)產(chǎn)生class=“l(fā)anguage-**”標(biāo)簽，這個(gè)一眼看去和prism高亮顯示插件是迎合的，也表示官方的支持。所以我們使用prism作為代碼高亮插件。

（4）賦值及設(shè)置值操作

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

二、展示頁(yè)相關(guān)配置

1、引用網(wǎng)頁(yè)樣式控制文件及腳本語(yǔ)言編輯文件（兩個(gè)高亮顯示腳本）

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

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

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