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

简介:

Ueditor 是百度出的开源富文本编辑器,非常符合国人习惯!模板功能很好用,但不能直接自定义,

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

查找模板在源代码中的位置:

已经知道其它模板的关键字,比如有:键入文档标题

grep ‘键入文档标题‘ -r  dir/ueditor/

结果:

[[email protected] 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!

‘,

‘html‘:‘

<span class="ue_t" style="font-family: 幼圆; font-size: 22px; color: green;">简介: <br/>

<p class="ue_t" style="text-indent:2em;"> 这是文章的简单内容,几行字了事~

<br/>

<span class="ue_t" style="font-family: 幼圆; font-size: 22px; color: green;">如何Debug源代码: <br/><br/>

<span class="ue_t" style="font-size: 16px;">1. 学习源代码<br/>

<p class="ue_t" style="text-indent:2em;font-size: 14px;"> 优秀的源代码是很好的学习资源,可以让你快速成长!

<br/>

<span class="ue_t" style="font-size: 16px;">2. 找出源代码问题<br/>

<p class="ue_t" style="text-indent:2em;font-size: 14px;"> 了解架构与设计思想,才能更快的去Debug!

<br/>

<span class="ue_t" style="font-family: 幼圆; font-size: 22px; color: green;">如何增加插件: <br/><br/>

<span class="ue_t" style="font-size: 16px;">1. 学会安装使用插件<br/>

<p class="ue_t" style="text-indent:2em;font-size: 14px;"> 在“开始”选项卡上,通过从快速样式库中为所选文本选择一种外观,还是使用某种直接指定的格式。

<br/>

<span class="ue_t" style="font-size: 16px;">2. 了解插件的开发流程<br/>

<p class="ue_t" style="text-indent:2em;font-size: 14px;"> 在“开始”选项卡上,通过从快速样式库中为所选文本选择一种外观,还是使用某种直接指定的格式。

<br/> <span style="font-family: 幼圆; font-size: 22px; color: rgb(192, 0, 0);">问题:

<br/> <span class="ue_t" style="font-size: 16px;">1. 编译报错Errors<br/>

<p class="ue_t" style="text-indent:2em;font-size: 14px;"> 原因:

<br/> <span class="ue_t" style="font-size: 16px;">2. 编译报错Errors<br/>

<p class="ue_t" style="text-indent:2em;font-size: 14px;"> 原因:

<br/><br/> <span class="ue_t" style="font-family: 幼圆; font-size: 22px; color: green;">结束语:

<p class="ue_t" style="text-indent:2em;font-size: 14px;"> 对于“插入”选项卡上的库,在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。

<br/> <span class="ue_t" style="font-family: 幼圆; font-size: 22px; color: green;">参考资料: <br/><br/>

<ul class=" list-paddingleft-2" style="list-style-type: disc;"> <li>

a

</li> </ul>‘

},

结果:

原文:百度编辑器 Ueditor 如何增加模板 ?

时间: 2024-10-12 19:16:15

百度编辑器 Ueditor 如何增加模板 ?的相关文章

百度编辑器 Ueditor 如何增加字体 ?

在百度编辑器 Ueditor 如何增加字体 ? 要修改两个文件: 第一个文件:editor-config.js: ,'fontfamily':[             { label:'',name:'songti',val:'宋体,SimSun'},             { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},             { label:'',name:'yahei',val:'微软雅黑,Microsoft Y

FLASH图片上传功能—从百度编辑器UEditor里面提取出来

为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样显示进度条问题,以及上传前图片预览,也试过各种办法,直到有一天看到百度编辑器中的图片上传功能.花了点功夫把他单独提取出来. 最终效果图如下: 这个功能可以提供多个图片文件选择,预览,然后对上传的图片在上传队列中删除,以及旋转和,上传中进度条显示,以及上传相册的选择. 源代码下载路径为: http:/

百度编辑器UEditor PHP版下载

Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和需求自由定制. Ueditor编辑器划分为了三层架构.其中,核心层为开发者提供了诸如range.selection.domUtils类的底层API接口,中间的命令插件层不仅提供了大量的基础command,还允许开发者基于核心层进行command命令的开发,而面向用户端的界面层则可

关于百度编辑器UEditor的一点说明

大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径          2.首先要把这个路径配置好了.才能正常的显示,并使用editor的功能 关于百度编辑器UEditor中的上传图片控件(多图片上传)的提取 本人才疏学浅,用IE一点点来调试.才完成这个功能,结果没有一个清楚的文章分享给大家实在惭愧. 文字不好说明,如果朋友们有需要,请加我的QQ,问题我们一起来讨论

dedecms整合百度编辑器(Ueditor)之上传图片加水印的办法

Ueditor抓取远程图片加水印方法 打开getRemoteImage.php, 找到://远程抓取图片配置 在上面添加: require_once('../../../dede/config.php');//dede为你的后台目录 require_once(DEDEADMIN."/inc/inc_archives_functions.php"); 继续修改getRemoteImage.php, 找到: fwrite( $fp2 , $img ); 在下面添加: @WaterImg($

百度编辑器ueditor给上传的图片添加水印

百度编辑器本身是没有为上传图片添加水印的功能,想要在上传的时候添加图片水印,也很简单.以 ueditor 1.2.6 为例,打开php目录下面的imageUp.php文件,查找"$info = $up->getFileInfo();",在这句代码的下面加入以下代码: /* 添加水印 start */ $water_img = "watermark.png"; //水印文件(替这里换成你要的水印) $img_min_w = 350; //添加水印需要图片最小达到

百度编辑器ueditor 在vs2008中的使用方法

个人觉得百度编辑器ueditor还是不错的,虽然出生的时间比较短,但某些方面相比其它富文本编辑器更优秀,免费.可定制等等. 由于在官方下载的ueditor包是在vs2012下开发的,可以在vs2010中使用,但在vs2008中就会报错.折腾了一翻,现将解决方法分享给需要的朋友,其实就是把里面包含.net4.0的元素换成.net3.5的 1.下载.net framework 3.5版的Newtonsoft.Json.dll替换原来的 2.删除config.cs里的 using System.Dyn

【百度编辑器ueditor】工具,如何去掉百度编辑器 ueditor 元素路径、字数统计等

去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,elementPathEnabled : false //是否启用元素路径,默认是true显示 ,wordCount:false //是否开启字数统计 ,autoHeightEnabled:false // 编辑器内容,是否自动长高,默认true ,fullscreen : false //是否开启初始化

百度编辑器ueditor(版本:r1_4_3-asp.net)配置

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebApplication2.Index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/