百度开源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/

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

百度开源UEditor文本编辑器使用说明
百度开源UEditor文本编辑器使用说明: 一.完整版的部署与体验官网上下载完整源码包(官网下载地址http://ueditor.baidu.com/website/download.html),解 ...
百度开源在线文本编辑器-UEditor
关于UEditor Ueditor概述 Ueditor是由百度web前端研发部开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和使用代码为什 ...
JForum论坛添加UEditor文本编辑器
在使用JForum论坛中发现论坛自带的文本编辑器不好用,不能上传图片,样式编辑也很麻烦,就想着把这个文本编辑器替换掉,我这里选用的是百度的开源富文本编辑器UEditor 替换后的效果图替换方法如下 ...
trumbowyg 超级轻量级文本编辑器使用说明
trumbowyg 超级轻量级文本编辑器使用说明最近项目里要用一个富文本编辑器,鉴于项目实际要求,编辑器不能太大,要是轻量级的. 目前文本编辑主流的大致有以下几种: 国产编辑器:百度ueditor, ...
百度UEdit富文本编辑器的使用
1.在需要的页面引入依赖的js  <script type="text/javascript" src="~/Content/ ...
java umeditor使用,百度UMeditor富文本编辑器java使用
百度UMeditor富文本编辑器java使用 1.介绍 UMeditor 是一款轻量级的富文本编辑器,比UEditor要小得多,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑 ...
百度UE富文本编辑器问题(包问题)JAVA MEAVN
做了一个百度UE富文本编辑器的内容关于包的导入问题.. 网上一堆的说包的导入会出现一系列的问题先给出完整的五个的包的依赖若有不同的需要的,可以自己去meavn 仓库里找 meavn 仓库地址:h ...
[原] 开源HTML文本编辑器--KindEditor
====================================================== 注:本文源代码点此下载 ================================= ...
使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

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

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

最新文章

热门文章