剑轩

百度编辑器自定义模板

发表于:2019/9/16 15:40

前言:

有些时候我们想要一些固定格式的模板,然后在这个模板的基础上去进行编写可以提升我们的效率,就像微信发布图文消息的后台就有很多模板。除了可以方便我们写之外,还有就是有些格式默认是很难直接写出来的这个时候就更需要模板这样的东西了


使用百度编辑器默认的模板:

百度编辑器想要使用模板功能需要在菜单把模板功能加入进去

然后可以看到上面菜单可以点击模板

点击就是百度编辑器默认的一些模板


自定义模板:

百度编辑器还是比较科学的,想要自定义模板也比较方便

主要是修改template文件夹下面的:

位置:htmledit-->dialogs-->template

其中template.css:就是预览效果加载的样式,因为你写的模板里边可能会有很多的样式

其中template.html:  就是弹窗模板弹窗的效果,如果要改可以很方便的修改

其中template.js: 模板加载的js,不用动他

其中config.js:就是编辑里边的模板

这个数组中的每一项都是一个模板,打开的时候就对应一项

pre:就是预览的图片

title:模板名称

preHtml:预览的效果

html:添加到百度编辑器的内容


添加自己的模板就是在这里边添加一项就可以了

比如我们添加一项:其实主要就是把html代码写好而已

添加好后在最下面就可以看到我们写的模板了

当然这个预览的效果,样式我没有怎么调,要调的话它引用的样式就是在template.css去引用调样式


点击确定后我们可以看到效果和我们想象的不一样,因为我们的html结构中div被替换成p标签了

这是因为百度编辑器xss相关操作会被div替换成p标签

参考文章:http://www.tnblog.net/aojiancc2/article/details/2674


然后这个时候我们的代码结构虽然对了,但是里边的样式不对。因为百度编辑器加载的时候是用一个iframe加载的我们可以自己添加样式:

在themes-->iframe.css里边去添加自己的样式即可

当然如果是你要自己引用单独的样式的话,可以直接修改ueditor.all.js,那个iframe.css里边的样式就是在那个里边引用的


最后贴一下自定义模板的效果图把,调样式这些还是有点麻烦的

不过不尝试永远都不会,有点挑战的东西才能学到东西






关于TNBLOG
TNBLOG,技术分享
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢