Ueditor百度编辑器增加一键插入模板支持pbootcms dedecms原创文章

玩技站长 运维笔记评论174字数 13794阅读模式

Ueditor 是百度出的开源富文本编辑器,非常符合国人习惯!模板功能很好用,但不能直接自定义,下面就告诉大家如何增加模板,现在国内在用的很多cms都在用这个编辑器,phpcms,pbootcms,织梦等等。

文章源自玩技e族-https://www.playezu.com/816259.html

模板位置:

dialogs/template/config.js

配置模板:

第一步:打开原始模板配置文件文章源自玩技e族-https://www.playezu.com/816259.html

/**
 * Created with JetBrains PhpStorm.
 * User: xuheng
 * Date: 12-8-8
 * Time: 下午2:00
 * To change this template use File | Settings | File Templates.
 */
var templates = [
    {
        "pre":"pre0.png",
        'title':"会议活动",
        'preHtml':'<p class="ue_t">大会活动模板</p>',
        "html":'<table data-sort="sortDisabled"><thead><tr class="firstRow"><th rowspan="1"colspan="10"style="word-break: break-all;"><span style="text-align: -webkit-center;text-wrap: wrap;">xxxx会议</span></th></tr></thead><tbody><tr><td width="127"valign="top"style="word-break: break-all;">大会主题:<br/></td><td valign="middle"align="center"rowspan="1"colspan="9"style="word-break: break-all;"></td></tr><tr><td width="127"valign="top"style="word-break: break-all;">主办单位:</td><td width="127"valign="top"style="word-break: break-all;"></td><td width="127"valign="top"style="word-break: break-all;"></td><td width="127"valign="top"style="word-break: break-all;"></td><td width="127"valign="top"style="word-break: break-all;"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td></tr><tr><td width="127"valign="top"style="word-break: break-all;">协办单位:<br/></td><td width="127"valign="top"style="word-break: break-all;"></td><td width="127"valign="top"style="word-break: break-all;"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td></tr><tr><td width="127"valign="top"style="word-break: break-all;">大会地址<span style="text-wrap: wrap;">:</span></td><td valign="top"style="word-break: break-all;"rowspan="1"colspan="2"></td><td valign="top"rowspan="1"colspan="2"></td><td valign="top"rowspan="1"colspan="2"></td><td valign="top"rowspan="1"colspan="3"></td></tr><tr><td width="127"valign="top"style="word-break: break-all;">大会时间<span style="text-wrap: wrap;">:</span></td><td valign="top"style="word-break: break-all;"rowspan="1"colspan="2"></td><td valign="top"rowspan="1"colspan="2"></td><td valign="top"rowspan="1"colspan="2"></td><td valign="top"rowspan="1"colspan="3"></td></tr><tr><td width="127"valign="top"style="word-break: break-all;"><span style="text-wrap: wrap;">收费情况:</span></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td><td width="127"valign="top"></td></tr><tr><td valign="top"colspan="1"rowspan="1"style="word-break: break-all;">展会面积:</td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td></tr><tr><td valign="top"colspan="1"rowspan="1"style="word-break: break-all;">展商数量:</td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td></tr><tr><td valign="top"colspan="1"rowspan="1"style="word-break: break-all;">观众数量:</td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td><td valign="top"colspan="1"rowspan="1"></td></tr></tbody></table><p><br/></p><p><span style="background-color: #DBEEF3;"></span></p><p><br/></p><p><br/></p><p><br/></p>'
    },
    {
        "pre":"pre1.png",
        'title':lang.blog,
        'preHtml':'<h1 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;">深入理解Range</span></h1><p style="text-align:center;"><strong class=" ">UEditor二次开发</strong></p><h3><span class=" " style="font-family:幼圆">什么是Range</span></h3><p style="text-indent:2em;">对于“插入”选项卡上的库,在设计时都充分考虑了其中的项与文档整体外观的协调性。 </p><br /><h3><span class=" " style="font-family:幼圆">Range能干什么</span></h3><p style="text-indent:2em;">在“开始”选项卡上,通过从快速样式库中为所选文本选择一种外观,您可以方便地更改文档中所选文本的格式。</p>',
        "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;">[键入文档标题]</span></h1><p style="text-align:center;"><strong class="ue_t">[键入文档副标题]</strong></p><h3><span class="ue_t" style="font-family:幼圆">[标题 1]</span></h3><p class="ue_t"  style="text-indent:2em;">对于“插入”选项卡上的库,在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><h3><span class="ue_t" style="font-family:幼圆">[标题 2]</span></h3><p class="ue_t"  style="text-indent:2em;">在“开始”选项卡上,通过从快速样式库中为所选文本选择一种外观,您可以方便地更改文档中所选文本的格式。 您还可以使用“开始”选项卡上的其他控件来直接设置文本格式。大多数控件都允许您选择是使用当前主题外观,还是使用某种直接指定的格式。 </p><h3><span class="ue_t" style="font-family:幼圆">[标题 3]</span></h3><p class="ue_t">对于“插入”选项卡上的库,在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p class="ue_t"><br /></p>'

    },
    {
        "pre":"pre2.png",
        'title':lang.resume,
        'preHtml':'<h1 label="Title left" name="tl" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;"><span style="color:#e36c09;" class=" ">WEB前端开发简历</span></h1><table width="100%" border="1" bordercolor="#95B3D7" style="border-collapse:collapse;"><tbody><tr><td width="100" style="text-align:center;"><p><span style="background-color:transparent;">插</span><br /></p><p>入</p><p>照</p><p>片</p></td><td><p><span style="background-color:transparent;"> 联系电话:</span><span class="ue_t" style="background-color:transparent;">[键入您的电话]</span><br /></p><p><span style="background-color:transparent;"> 电子邮件:</span><span class="ue_t" style="background-color:transparent;">[键入您的电子邮件地址]</span><br /></p><p><span style="background-color:transparent;"> 家庭住址:</span><span class="ue_t" style="background-color:transparent;">[键入您的地址]</span><br /></p></td></tr></tbody></table><h3><span style="color:#E36C09;font-size:20px;">目标职位</span></h3><p style="text-indent:2em;" class=" ">WEB前端研发工程师</p><h3><span style="color:#e36c09;font-size:20px;">学历</span></h3><p><span style="display:none;line-height:0px;" id="_baidu_bookmark_start_26"></span></p><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[起止时间]</span> <span class="ue_t">[学校名称] </span> <span class="ue_t">[所学专业]</span> <span class="ue_t">[所获学位]</span></p></li></ol><h3><span style="color:#e36c09;font-size:20px;" class="ue_t">工作经验</span></h3><p><br /></p>',
        "html":'<h1 label="Title left" name="tl" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;"><span style="color:#e36c09;" class="ue_t">[此处键入简历标题]</span></h1><p><span style="color:#e36c09;"><br /></span></p><table width="100%" border="1" bordercolor="#95B3D7" style="border-collapse:collapse;"><tbody><tr><td width="200" style="text-align:center;" class="ue_t">【此处插入照片】</td><td><p><br /></p><p> 联系电话:<span class="ue_t">[键入您的电话]</span></p><p><br /></p><p> 电子邮件:<span class="ue_t">[键入您的电子邮件地址]</span></p><p><br /></p><p> 家庭住址:<span class="ue_t">[键入您的地址]</span></p><p><br /></p></td></tr></tbody></table><h3><span style="color:#e36c09;font-size:20px;">目标职位</span></h3><p style="text-indent:2em;" class="ue_t">[此处键入您的期望职位]</p><h3><span style="color:#e36c09;font-size:20px;">学历</span></h3><p><span style="display:none;line-height:0px;" id="_baidu_bookmark_start_26"></span></p><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入学校名称] </span> <span class="ue_t">[键入所学专业]</span> <span class="ue_t">[键入所获学位]</span></p></li><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入学校名称]</span> <span class="ue_t">[键入所学专业]</span> <span class="ue_t">[键入所获学位]</span></p></li></ol><h3><span style="color:#e36c09;font-size:20px;" class="ue_t">工作经验</span></h3><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入公司名称]</span> <span class="ue_t">[键入职位名称]</span> </p></li><ol style="list-style-type:lower-alpha;"><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li></ol><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入公司名称]</span> <span class="ue_t">[键入职位名称]</span> </p></li><ol style="list-style-type:lower-alpha;"><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li></ol></ol><p><span style="color:#e36c09;font-size:20px;">掌握技能</span></p><p style="text-indent:2em;"> &nbsp;<span class="ue_t">[这里可以键入您所掌握的技能]</span><br /></p>'

    },
    {
        "pre":"pre3.png",
        'title':lang.richText,
        'preHtml':'<h1 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;" class="ue_t">[此处键入文章标题]</h1><p><img src="https://qiniu.playezu.com/wp-content/uploads/2024/02/y_0034.gif?imageView2/1/w/100/h/60/q/75|imageslim" width="150" height="100" border="0" hspace="0" vspace="0" style="width:150px;height:100px;float:left;" />图文混排方法</p><p>图片居左,文字围绕图片排版</p><p>方法:在文字前面插入图片,设置居左对齐,然后即可在右边输入多行文</p><p><br /></p><p><img src="https://qiniu.playezu.com/wp-content/uploads/2024/02/y_0040.gif?imageView2/1/w/120/h/80/q/75|imageslim" width="100" height="100" border="0" hspace="0" vspace="0" style="width:100px;height:100px;float:right;" /></p><p>还有没有什么其他的环绕方式呢?这里是居右环绕</p><p><br /></p><p>欢迎大家多多尝试,为UEditor提供更多高质量模板!</p>',
        "html":'<p><br /></p><h1 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;" class="ue_t">[此处键入文章标题]</h1><p><img src="https://qiniu.playezu.com/wp-content/uploads/2024/02/y_0034.gif?imageView2/1/w/100/h/60/q/75|imageslim" width="300" height="200" border="0" hspace="0" vspace="0" style="width:300px;height:200px;float:left;" />图文混排方法</p><p>1. 图片居左,文字围绕图片排版</p><p>方法:在文字前面插入图片,设置居左对齐,然后即可在右边输入多行文本</p><p><br /></p><p>2. 图片居右,文字围绕图片排版</p><p>方法:在文字前面插入图片,设置居右对齐,然后即可在左边输入多行文本</p><p><br /></p><p>3. 图片居中环绕排版</p><p>方法:亲,这个真心没有办法。。。</p><p><br /></p><p><br /></p><p><img src="https://qiniu.playezu.com/wp-content/uploads/2024/02/y_0040.gif?imageView2/1/w/120/h/80/q/75|imageslim" width="300" height="300" border="0" hspace="0" vspace="0" style="width:300px;height:300px;float:right;" /></p><p>还有没有什么其他的环绕方式呢?这里是居右环绕</p><p><br /></p><p>欢迎大家多多尝试,为UEditor提供更多高质量模板!</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p><br /></p>'
    },
    {
        "pre":"pre4.png",
        'title':lang.sciPapers,
        'preHtml':'<h2 style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;text-align:center;" class="ue_t">[键入文章标题]</h2><p><strong><span style="font-size:12px;">摘要</span></strong><span style="font-size:12px;" class="ue_t">:这里可以输入很长很长很长很长很长很长很长很长很差的摘要</span></p><p style="line-height:1.5em;"><strong>标题 1</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以输入很多内容,可以图文混排,可以有列表等。</span></p><p style="line-height:1.5em;"><strong>标题 2</strong></p><ol style="list-style-type:lower-alpha;"><li><p class="ue_t">列表 1</p></li><li><p class="ue_t">列表 2</p></li><ol style="list-style-type:lower-roman;"><li><p class="ue_t">多级列表 1</p></li><li><p class="ue_t">多级列表 2</p></li></ol><li><p class="ue_t">列表 3<br /></p></li></ol><p style="line-height:1.5em;"><strong>标题 3</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个文字图文混排的</span></p><p style="text-indent:2em;"><br /></p>',
        'html':'<h2 style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;text-align:center;" class="ue_t">[键入文章标题]</h2><p><strong><span style="font-size:12px;">摘要</span></strong><span style="font-size:12px;" class="ue_t">:这里可以输入很长很长很长很长很长很长很长很长很差的摘要</span></p><p style="line-height:1.5em;"><strong>标题 1</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以输入很多内容,可以图文混排,可以有列表等。</span></p><p style="line-height:1.5em;"><strong>标题 2</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个列表瞅瞅:</span></p><ol style="list-style-type:lower-alpha;"><li><p class="ue_t">列表 1</p></li><li><p class="ue_t">列表 2</p></li><ol style="list-style-type:lower-roman;"><li><p class="ue_t">多级列表 1</p></li><li><p class="ue_t">多级列表 2</p></li></ol><li><p class="ue_t">列表 3<br /></p></li></ol><p style="line-height:1.5em;"><strong>标题 3</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个文字图文混排的</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以多行</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">右边是图片</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">绝对没有问题的,不信你也可以试试看</span></p><p><br /></p>'
    }
];

第二步:其中每个对应的格式是一个模板,我们随便找个模板修改即可,我们可以修改title 改为自己想要的名字文章源自玩技e族-https://www.playezu.com/816259.html

    {
        "pre":"pre1.png",
        'title':lang.blog,
        'preHtml':'这里填写自己的模板内容,需要将其改为一行代码,大家可以参照下面的地址压缩下代码之后添加到这里'
    },
Html代码在线格式化地址点我前往》》》

第三步:重启服务nginx和php,如果有缓存的话还需要重启下redis或者memcache。文章源自玩技e族-https://www.playezu.com/816259.html

第四步:打开编辑器找到下面的图标文章源自玩技e族-https://www.playezu.com/816259.html

文章源自玩技e族-https://www.playezu.com/816259.html 文章源自玩技e族-https://www.playezu.com/816259.html

玩技站长微信
添加好友自动发送入群邀请
weinxin
rainbow-shownow
玩技官方公众号
官方微信公众号
weinxin
PLAYEZU
 最后更新:2024-3-1
  • 版权提示:本站仅供存储任何法律责任由作者承担▷诈骗举报◁▷新闻不符◁▷我要投稿◁
    风险通知:非原创文章均为网络投稿真实性无法判断,侵权联系2523030730
    免责声明:内容来自用户上传发布或新闻客户端自媒体,切勿!切勿!切勿!添加联系方式以免受骗。
  • 原创转载:https://www.playezu.com/816259.html
    转载说明: 点我前往阅读>>>
匿名

发表评论

匿名网友
确定