国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

tinymce與prism代碼高亮實(shí)現(xiàn)及漢化的配置

番茄西紅柿 / 1134人閱讀

摘要：簡(jiǎn)單介紹是一個(gè)輕量級(jí)的基于瀏覽器的所見即所得編輯器，由寫成。它對(duì)和都有著非常良好的支持。功能方強(qiáng)大，并且功能配置靈活簡(jiǎn)單。另一特點(diǎn)是加載速度非常快的。所以我們使用作為代碼高亮插件。

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

一、編輯頁配置

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

1 
2 
3 "prism.css" rel="stylesheet" />
4

2.在body中設(shè)計(jì)好我們的文本

1

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

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

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

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

（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語言本身默認(rèn)英文，這里指定語言為中文

 1

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

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

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

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

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

1 "prism.css" rel="stylesheet" />
2

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

源碼demo：https://download.csdn.net/download/silverbutter/10557703

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1983.html

相關(guān)文章

  • Angular5 整合富文本編輯器TinyMCE（漢化+上傳）

    摘要：簡(jiǎn)介是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于更加精簡(jiǎn)，但足以滿足絕大部分場(chǎng)景的需要。 1. TinyMCE簡(jiǎn)介 TinyMCE是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于CKEditor更加精簡(jiǎn)，但足以滿足絕大部分場(chǎng)景的需要。 2. 安裝和配置TinyMCE 2.1 安裝TinyMCE npm install --save tinymce 2.2 設(shè)置tinymce全局訪問（.angular-...

    zeyu 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：使用django-ckeditor富文本編輯器

    摘要：后面兩個(gè)編輯器自帶，不用單獨(dú)下載，添上就可以了添加相關(guān)插件這樣就完成了代碼高亮效果不錯(cuò)在前臺(tái)使用為了讓用戶在前臺(tái)也能使用富文本編輯器，還得對(duì)代碼稍加改動(dòng)。對(duì)于有些不喜歡的人來說，甚至可以連博文都使用提供的富文本編輯器。 前面我們已經(jīng)實(shí)現(xiàn)了用Markdown語法寫文章了。但是文章的評(píng)論用Markdown就不太合適了，你不能強(qiáng)求用戶也花時(shí)間去熟悉語法啊。另外評(píng)論中通常還有表情、帶顏色的字體...

    beanlam 評(píng)論0 收藏0

  • 實(shí)戰(zhàn)項(xiàng)目之自動(dòng)簡(jiǎn)歷

    摘要：自動(dòng)簡(jiǎn)歷項(xiàng)目介紹一個(gè)可以自動(dòng)播放書寫過程簡(jiǎn)歷，主要運(yùn)用原生和的知識(shí)點(diǎn)。方法如果展示窗口設(shè)置的是或者會(huì)自動(dòng)拉到底部為滾動(dòng)至底部為滾動(dòng)至頂部其他參數(shù)可選定義緩動(dòng)動(dòng)畫，或之一。增加簡(jiǎn)歷展示頁編寫增加編寫簡(jiǎn)歷內(nèi)容的展示窗口。 自動(dòng)簡(jiǎn)歷 項(xiàng)目介紹 一個(gè)可以自動(dòng)播放書寫過程簡(jiǎn)歷，主要運(yùn)用原生JS和CSS3的知識(shí)點(diǎn)。 用到的庫(kù)： prism marked 相關(guān)鏈接 預(yù)覽點(diǎn)我 源碼點(diǎn)我show...

    Eric 評(píng)論0 收藏0

  • 實(shí)戰(zhàn)項(xiàng)目之自動(dòng)簡(jiǎn)歷

    摘要：自動(dòng)簡(jiǎn)歷項(xiàng)目介紹一個(gè)可以自動(dòng)播放書寫過程簡(jiǎn)歷，主要運(yùn)用原生和的知識(shí)點(diǎn)。方法如果展示窗口設(shè)置的是或者會(huì)自動(dòng)拉到底部為滾動(dòng)至底部為滾動(dòng)至頂部其他參數(shù)可選定義緩動(dòng)動(dòng)畫，或之一。增加簡(jiǎn)歷展示頁編寫增加編寫簡(jiǎn)歷內(nèi)容的展示窗口。 自動(dòng)簡(jiǎn)歷 項(xiàng)目介紹 一個(gè)可以自動(dòng)播放書寫過程簡(jiǎn)歷，主要運(yùn)用原生JS和CSS3的知識(shí)點(diǎn)。 用到的庫(kù)： prism marked 相關(guān)鏈接 預(yù)覽點(diǎn)我 源碼點(diǎn)我show...

    Chao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<