网站制作之百度编辑器自定义模板

2023-02-19    分类： 网站建设

网站制作到了程序阶段，一般需要用到网站编辑器，如后台可自行更新相关公司介绍、产品介绍、编辑新闻等。网站编辑器有很多开源的，我们一般直接使用就行了，但如果要做到更加容易编辑，还是需要做一些改进，下面创新互联的程序员给大家介绍如何自定义模板。

编辑器界面

百度编辑器（ueditor）是一款功能强大的富文本编辑器，其中有一个模板功能，能帮助我们方便快捷的编辑一些相似内容或者格式一样的内容下面介绍一下怎么自定义我们所需要的模板。（如图为编辑器模板功能按钮位置）
点击按钮，编辑器中已经内置了几个案例

配置文件代码

找到ueditor\dialogs\template\config.js文件
var templates = [
{
"pre":"pre0.png",
'title':lang.blank,
'preHtml':'<p class="ue_t">&nbsp;车辆参数模板</p>',
"html":''
},
{
1.pre：为模板的样式图可以在
ueditor\dialogs\template\images文件夹中修改添加
2.title：模板名称；可以在ueditor\lang\zh-cn\ 里进行添加修改；
3.'preHtml' 模板内容标题介绍：直接输入对应文字即可；
4 ."html" 模板的代码内容 将html代码压缩一下复制进去即可；
这样基本完成了模板的设置，在这个过程中编辑器会将标签替换掉，需要我们在

JS代码2

ueditor\ueditor.all.js 里搜索allowDivTransToP disabledTableInTable 将他们改成false配置文件代码
UE.plugins['defaultfilter'] = function () {
var me = this;
me.setOpt({
'allowDivTransToP':false,
'disabledTableInTable':false
});

JS代码

在使用过程中发现编辑会将li里面的样式去掉
搜索li.style.cssText && (li.style.cssText = ''); 将行代码注释掉；
这样基本就完成了模板的自定义；

编辑器改造界面

kindeditor 也是一款比较好用的富文本编辑器，他的模板自定义和百度的有些不一样；（功能所在位置）

网站制作目录

kindeditor\plugins\template\html

网站制作代码8

添加模板文件，这是个html页面里面可以写的内容比百度要更丰富
在kindeditor\kindeditor.js 文件中 搜索template.fileList

分享名称：网站制作之百度编辑器自定义模板
本文地址：https://www.cdcxhl.com/news40/238040.html

成都网站建设公司_创新互联，为您提供App设计、响应式网站、ChatGPT、搜索引擎优化、服务器托管、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设

网站建设知识

行业网站建设