簡介：

Ueditor 是百度出的開源富文本編輯器，非常符合國人習慣！模板功能很好用，但不能直接自定義，

下面就告訴大家如何增加模板。

查找模板在源代碼中的位置：

已經知道其它模板的關鍵字，比如有：鍵入文檔標題

grep?'鍵入文檔標題'?-r??dir/ueditor/

結果：

[root@mreald?ueditor]#??grep?'鍵入文檔標題'?-r?*?dialogs/template/config.js:????????"html":'<h1?class="ue_t"?label="Title?center"?name="tc"?style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px?4px?0px?0px;text-align:center;margin:0px?0px?20px;"><span?style="color:#c0504d;">[鍵入文檔標題]<

定義自己的模板：

1.先用Ueditor編輯好一個模板

點左上角的HTML 就會出現 ?html 源代碼

2.把模板代碼寫入模板文件

把上步的源代碼整理成一行，替換dialogs/template/config.js 中的第一個空模板內容。比如：

var?templates?=?[????{????????"pre":"pre0.png",????????'title':lang.blank,????????'preHtml':'<p?class="ue_t">&nbsp;歡迎使用UEditor！</p>',?'html':'<p>?<span?class="ue_t"?style="font-family:?幼圓;?font-size:?22px;?color:?green;">簡介：</span>?<br/>?</p>?<p?class="ue_t"?style="text-indent:2em;">?這是文章的簡單內容，幾行字了事～?</p>?<p>?<br/>?</p>?<p>?<span?class="ue_t"?style="font-family:?幼圓;?font-size:?22px;?color:?green;">如何Debug源代碼:</span>?<br/><br/>?</p>?<p>?<span?class="ue_t"?style="font-size:?16px;">1.?學習源代碼</span><br/>?</p>?<p?class="ue_t"?style="text-indent:2em;font-size:?14px;">?優秀的源代碼是很好的學習資源，可以讓你快速成長！?</p>?<p>?<br/>?</p>?<p>?<span?class="ue_t"?style="font-size:?16px;">2.?找出源代碼問題</span><br/>?</p>?<p?class="ue_t"?style="text-indent:2em;font-size:?14px;">?了解架構與設計思想，才能更快的去Debug！?</p>?<p>?<br/>?</p>?<p>?<span?class="ue_t"?style="font-family:?幼圓;?font-size:?22px;?color:?green;">如何增加插件:</span>?<br/><br/>?</p>?<p>?<span?class="ue_t"?style="font-size:?16px;">1.?學會安裝使用插件</span><br/>?</p>?<p?class="ue_t"?style="text-indent:2em;font-size:?14px;">?在“開始”選項卡上，通過從快速樣式庫中為所選文本選擇一種外觀，還是使用某種直接指定的格式。?</p>?<p>?<br/>?</p>?<p>?<span?class="ue_t"?style="font-size:?16px;">2.?了解插件的開發流程</span><br/>?</p>?<p?class="ue_t"?style="text-indent:2em;font-size:?14px;">?在“開始”選項卡上，通過從快速樣式庫中為所選文本選擇一種外觀，還是使用某種直接指定的格式。?</p>?<p>?<br/>?<span?style="font-family:?幼圓;?font-size:?22px;?color:?rgb(192,?0,?0);">問題：</span>?</p>?<p>?<br/>?<span?class="ue_t"?style="font-size:?16px;">1.?編譯報錯Errors</span><br/>?</p>?<p?class="ue_t"?style="text-indent:2em;font-size:?14px;">?原因：?</p>?<p>?<br/>?<span?class="ue_t"?style="font-size:?16px;">2.?編譯報錯Errors</span><br/>?</p>?<p?class="ue_t"?style="text-indent:2em;font-size:?14px;">?原因：?</p>?<p>?<br/><br/>?<span?class="ue_t"?style="font-family:?幼圓;?font-size:?22px;?color:?green;">結束語:</span>?</p>?</p>?<p?class="ue_t"?style="text-indent:2em;font-size:?14px;">?對于“插入”選項卡上的庫，在設計時都充分考慮了其中的項與文檔整體外觀的協調性。?您可以使用這些庫來插入表格、頁眉、頁腳、列表、封面以及其他文檔構建基塊。?您創建的圖片、圖表或關系圖也將與當前的文檔外觀協調一致。?</p>?<p>?<br/>?<span?class="ue_t"?style="font-family:?幼圓;?font-size:?22px;?color:?green;">參考資料:</span>?<br/><br/>?</p>?<ul?class="?list-paddingleft-2"?style="list-style-type:?disc;">?<li>?<p>?a?</p>?</li>?</ul>'?????},

結果：

總結

以上是生活随笔為你收集整理的百度编辑器 Ueditor 如何增加模板 ？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。