首頁 >web前端 >html教學 >tinymce與prism實現高亮的程式碼以及漢化的配置方法流程

tinymce與prism實現高亮的程式碼以及漢化的配置方法流程

不言原創: 2018-07-25 09:32:562373瀏覽

這篇文章跟大家介紹的內容是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: &#39;small&#39;,
 
        style_formats: [
            {title: &#39;Bold text&#39;, inline: &#39;b&#39;},
            {title: &#39;Red text&#39;, inline: &#39;span&#39;, styles: {color: &#39;#ff0000&#39;}},
            {title: &#39;Red header&#39;, block: &#39;h1&#39;, styles: {color: &#39;#ff0000&#39;}},
            {title: &#39;Example 1&#39;, inline: &#39;span&#39;, classes: &#39;example1&#39;},
            {title: &#39;Example 2&#39;, inline: &#39;span&#39;, classes: &#39;example2&#39;},
            {title: &#39;Table styles&#39;},
            {title: &#39;Table row 1&#39;, selector: &#39;tr&#39;, classes: &#39;tablerow1&#39;}
        ],
 
        templates: [
            {title: &#39;Test template 1&#39;, content: &#39;Test 1&#39;},
            {title: &#39;Test template 2&#39;, content: &#39;Test 2&#39;}
        ],
        language:&#39;zh_CN&#39;
    });</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實現高亮的程式碼以及漢化的配置方法流程

相關文章