百度开源UEditor文本编辑器使用说明自定义属性

 自定义:把jsp中  /* var newsContent_editor = UE.getEditor('newsContent');*/
 替换成下面
var newsContent_editor = UE.getEditor('newsContent',{
                              initialFrameWidth:800,
                              initialFrameHeight:600,
         toolbars:[['formatmatch','removeformat','underline','italic','bold','redo','undo','source','fullscreen','autotypeset','pastePlain',
   'forecolor','backcolor','selectall','rowspacingtop','rowspacingbottom','lineheight','bold','italic','insertimage',
   'fontsize','fontfamily','paragraph','indent','justifyleft','justifyright ','justifycenter','justifyjustify',
'link','insertvideo','music','attachment','background','date','time','inserttable','deletetable','preview','help','searchreplace']]});

 

 

百度开源UEditor文本编辑器使用说明:
一、完整版的部署与体验
官网上下载完整源码包(官网下载地址http://ueditor.baidu.com/website/download.html),解压到任意目录,解压后的源码目录结构如下所示:
    _examples:编辑器完整版的示例页面
    dialogs:弹出对话框对应的资源和JS文件
    themes:样式图片和样式文件
    php/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里应该是jsp,php,.net
    third-party:第三方插件(包括代码高亮,源码编辑等组件)
    editor_all.js:_src目录下所有文件的打包文件
    editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用
    editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录
    
    二、部署UEditor到实际项目(UETest)中的步骤:
    1、在myeclipse或者eclipse中新建web项目(这里新建项目名称为UETest)。然后在WebRoot新建一个文件夹(文件名称随便起,这里我自己取名为ueditor1.2.6)。
   
    2、拷贝源码包中的dialogs、lang、themes、third-party、editor_all.js或者ueditor.all.min.js和editor_config.js到ueditor1.2.6文夹中。其中除了ueditor1.2.6目录之外的其余文件均为具体项目文件。


3-1、将需要文本编辑器的页面(以下为jsp)引入ueditor.config.js,ueditor.all.min.js或ueditor.all.js,后面两个js文件的区别是前者是压缩文件,
后者是没有压缩的文件。两个文件的内容是一样的(注意首先引入ueditor.config.js然后在引入ueditor.all.min.js或ueditor.all.js,否则特定情况下可能会出现报错)。




例如:
<script type="text/javascript" src="ueditor1.2.6/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor1.2.6/ueditor.all.min.js"></script>或
<script type="text/javascript" src="ueditor1.2.6/ueditor.all.js"></script>
3-2、在页面<body>里增加以下代码:
  <textarea name="后台取值的key" id="myEditor"></textarea>
    <script type="text/javascript">
    var editor = new UE.ui.Editor();
    //editor.render("myEditor");
    //1.2.4以后可以使用一下代码实例化编辑器
    UE.getEditor('myEditor');
</script>
4、修改editor_config.js文件中 var URL = window.UEDITOR_HOME_URL ||"/UETest/ueditor1.2.6/";,
两个竖框中的文件路径。{"/UETest/ueditor1.2.6/"路径为工程名+文件夹的名称。(包括1.2.6及其以上的版本可以忽略此步骤)}




5、至此,一个完整的编辑器实例就已经部署到咱们的项目中了!启动tomcat或者其他web服务器。在浏览器中输入http://localhost:8080/UETest 运行下试试UEditor强大的功能吧!




 三、ueditor.config.js文件配置详解
1、修改editor_config.js文件中的工具栏按钮精简配置详细查看API中的Commands.




2、补充2,toolbars工具栏按钮详解(括号前面是网页上显示的名称,括号里面是功能的详细介绍):
fullscreen 全屏(全屏切换事件(插件))
source HTML按钮(切换源码编辑模式和富文本编辑模式)
undo 撤销(撤销操作)
redo 重做(重做操作)
bold 为当前选中文字添加粗体效果
italic 为当前选中文字添加斜体效果
underline 为当前选中文字添加下划线效果
fontborder 字符边框
strikethrough 删除线(为当前选中文字添加删除线效果)
superscript 上标(将当前选中文字转换成上标)
subscript 下标(将当前选中文字转换成下标)
removeformat 清除格式(清除当前选中文字上的所有样式或者指定样式)
formatmatch 格式刷(开启格式刷功能)
autotypeset 自动排版
blockquote 引用(为当前选区所在的块级元素添加引用标记)
pastePlain 纯文本粘贴模式(切换纯文本粘贴模式)
forecolor 字体颜色(为当前选中文字添加颜色)
backcolor 背景色(为当前选中文字添加背景颜色)
insertorderedlist 有序列表(将当前选区变换成有序列表)
insertunorderedlist 无序列表(将当前选区变换成无序列表)
selectall 全选(全部选择)
cleardoc 清空文档(清空当前文档)
rowspacingtop 段前距(段前距)
rowspacingbottom 段后距(段后距)
lineheight 行间距(行间距 )
customstyle 自定义标题(自定义标题)
paragraph 段落格式(段落格式)
fontfamily 字体(设置当前选中文字的字体)
fontsize 字号(设置当前选中文字的字号)
directionalityltr 从左向右输入(从左向右输入)
directionalityrtl 从右向左输入(从右向左输入)
indent 首行缩进(默认缩进4格)
justifyleft 居左对齐(设置当前选区中的字体居左对齐方式)
justifycenter 居中对齐(设置当前选区中的字体居中对齐方式)
justifyright 居右对齐(设置当前选区中的字体居右对齐方式)
justifyjustify 两端对齐(设置当前选区中的字体两端对齐方式)
touppercase 字母大写(将当前选中文字中的字母转换成大写)
tolowercase 字母小写(将当前选中文字中的字母转换成小写)
link 超链接(在当前选区位置插入一个超链接)
unlink 取消超链接(在当前选区位置取消一个超链接)
anchor 锚点(插入锚点)
imagenone 默认浮动(设置当前选区中的内容浮动)
imageleft 左浮动(设置当前选区中的内容左浮动)
imageright 右浮动(设置当前选区中的内容右浮动)
imagecenter 居中浮动(设置当前选区中的内容居中浮动)
insertimage 图片(在当前选区位置插入一个图片)
emotion 表情(在当前选区位置插入一个表情)
scrawl 涂鸦(图片涂鸦)
insertvideo 视频(插入一个连接视频)
music 音乐(插入一个连接音乐)
attachment 附件(上传附件)
map Baidu地图(插入一个连接百度的地图)
gmap Google地图(插入一个连接Google的地图)
insertframe 插入Iframe(插入一个Iframe框架)
insertcode 代码语言(在当前选区位置插入一个代码语言)
webapp 百度应用(插入一个百度应用本功能由百度APP提供,如看到此页面,请各位站长首先申请百度APPKey!点此申请申请完成之后请至ueditor.config.js中配置获得的appkey!)
pagebreak 分页(在当前选区位置插入一个分页符标记)
template 模板(在当前选区位置插入一个模板)
background 背景(给body添加背景颜色或颜色)
horizontal 分隔线(在当前选区位置插入一个分隔线)
date 日期(在当前选区位置插入一个日期)
time 时间(在当前选区位置插入一个时间)
spechars 特殊字符(当前选区位置插入一个特殊字符)
snapscreen 截图(IE下进入截屏模式) 
wordimage 图片转存(图片转存)
inserttable 插入表格(插入表格)
deletetable 删除表格(当前选区位置删除表格)
insertparagraphbeforetable 表格前插入行(表格前插入一行)
insertrow 前插入行(表格前插入一行)
deleterow 删除行(删除表格的一行)
insertcol 前插入列(在当前选区表格位置前插入一列)
deletecol 删除列(删除表格的一列)
mergecells 合并多个单元格(当前选区表格位置合并多个单元格)
mergeright 右合并单元格(当前选区表格位置右合并单元格)
mergedown 下合并单元格(当前选区表格位置下合并单元格)
splittocells 完全拆分单元格(完全拆分单元格)
splittorows 拆分成行(拆分成行)
splittocols 拆分成列(拆分成列)
print 打印(打印当前文本域内容)
preview 预览(预览当前文本域内容)
searchreplace 查询替换(查找替换)
help 帮助(UEditor文本编辑器关于和帮助)




3、其他修改主要是editor_config.js文件中的配置,请参照官网上的API文档。地址是http://ueditor.baidu.com/doc/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章