簡單介紹：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: 'h1', 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、你的編輯器保存的值取出顯示到頁面就可以了。

相關推薦：

如何來簡述html的基本結構（附代碼）

HTML結構元素是什么？HTML中各種結構元素的總結（純文本）

以上就是tinymce與prism實現高亮的代碼以及漢化的配置方法過程的詳細內容，更多請關注php中文網其它相關文章！