百度编辑器 Ueditor 如何增加模板 ？

简介：

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


    },

结果：