最近的开发一个模块，要使用的html编辑器
最开始想使用fckeditor，但是是外国的开发人员开发的，不过人性化。
我决定使用百度团队开发的ueditor
首先下载该使用该插件：http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3-utf8-jsp
首先看文档：http://fex-team.github.io/ueditor/ 文档中的例子写的很详细
使用的过程中，主要看配置：http://fex-team.github.io/ueditor/#start-config
在使用的过程中，把解压包解压，在你的webapp目录下创建一个ue的文件夹，把你下载的插件包解压，
这些文件夹需要复制到ue文件夹下：
图中画红框的是需要复制到目录下的文件。
然后在你需要用到该html编辑器的文件中写下如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <form action="/test/add.action" method="post">
<!-加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
</form>
<!-配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>
|
在这里列举一下配置的属性：
前端配置项说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| UEDITOR_HOME_URL {Path String} [默认值：根据config文件路径自动获取] // 为编辑器实例添加一个路径，这个不能被注释
serverUrl {Path String} [默认值：URL + "php/controller.php"] // 服务器统一请求接口路径
toolbars {2d Array} //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
labelMap {Object} [默认：从lang包的labelMap项获取] //参数格式是键值对，键名对应toolbar参数的项：{"bold": "加粗"} ]，当鼠标放在工具栏上时显示的tooltip提示，留空支持自动多语言配置，否则以配置值为准
lang {String} [默认值："zh-cn"] //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()，语言配置项，默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
langPath {Path String} [默认值：URL +"lang/"] //语言包文件存放目录
theme {String} [默认值：'default'] //主题配置项，默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
themePath {Path String} [默认值：URL +"themes/"] //现有如下皮肤：default
zIndex {Number} [默认值：900] //编辑器在页面上的z-index层级的基数，默认是900
charset {String} [默认值："utf-8"] //针对getAllHtml方法，会在对应的head标签中增加该编码设置。
customDomain {Boolean} [默认值：false] //若实例化编辑器的页面手动修改的domain，此处需要设置为true
isShow {Boolean} [默认值：true] //默认显示编辑器
textarea {String} [默认值：'editorValue'] // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值
initialContent {String} [默认值：'欢迎使用ueditor!'] //初始化编辑器的内容，也可以通过textarea/script给值，看官网例子
autoClearinitialContent {Boolean} [默认值：true] //是否自动清除编辑器初始内容，注意：如果focus属性设置为true，这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
focus {Boolean} [默认值：false] //初始化时，是否让编辑器获得焦点true或false
initialStyle {String} [默认值：'p{line-height:1em}']//编辑器层级的基数，可以用来改变字体等 //如果自定义，最好给p标签如下的行高，要不输入中文时，会有跳动感
iframeCssUrl {Path String} [默认值：URL + '/themes/iframe.css'] //给编辑器内部引入一个css文件
indentValue {String} [默认值：'2em'] //首行缩进距离，默认是2em
initialFrameWidth {Number} [默认值：1000] //初始化编辑器宽度，默认1000
initialFrameHeight {Number} [默认值：320] //初始化编辑器高度，默认320
readonly {Boolean} [默认值：false] //编辑器初始化结束后，编辑区域是否是只读的，默认是false
autoClearEmptyNode {Boolean} [默认值：true] //getContent时，是否删除空的inlineElement节点（包括嵌套的情况）
enableAutoSave {Boolean} [默认值：true] //启用自动保存
saveInterval {Number} [默认值：500] //自动保存间隔时间，单位ms
imageScaleEnabled {Boolean} [默认值：true] //启用图片拉伸缩放
fullscreen {Boolean} [默认值：false] //是否开启初始化时即全屏，默认关闭
imagePopup {Boolean} [默认值：true] //图片操作的浮层开关，默认打开
autoSyncData {Boolean} [默认值：true] //自动同步编辑器要提交的数据
emotionLocalization {Boolean} [默认值：false] //是否开启表情本地化，默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹
retainOnlyLabelPasted {Boolean} [默认值：false] //粘贴只保留标签，去除标签所有属性
pasteplain {Boolean} [默认值：false] //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
filterTxtRules {Object} //纯文本粘贴模式下的过滤规则
allHtmlEnabled [默认值：false] //提交到后台的数据是否包含整个html字符串
insertorderedlist //有序列表的下拉配置，值留空时支持多语言自动识别，若配置值，则以此值为准
insertunorderedlist //无序列表的下拉配置，值留空时支持多语言自动识别，若配置值，则以此值为准
listDefaultPaddingLeft [默认值：'30'//默认的左边缩进的基数倍
listiconpath [默认值：'http://bs.baidu.com/listicon/']//自定义标号的路径
maxListLevel [默认值：3] //限制可以tab的级数， 设置-1为不限制
autoTransWordToList [默认值：false] //禁止word中粘贴进来的列表自动变成列表标签
fontfamily //字体设置 label留空支持多语言自动切换，若配置，则以配置值为准
fontsize {Array} //字号
paragraph {Object} //段落格式 值留空时支持多语言自动识别，若配置，则以配置值为准
rowspacingtop {Array} //段间距 值和显示的名字相同
rowspacingbottom //段间距 值和显示的名字相同
lineheight [默认值：['1', '1.5','1.75','2', '3', '4', '5'] ] //行内间距 值和显示的名字相同
customstyle [Array] //自定义样式，不支持国际化，此处配置值即可最后显示值block的元素是依据设置段落的逻辑设置的，inline的元素依据BIU的逻辑设置，尽量使用一些常用的标签
enableContextMenu {Boolean} [默认值：true] //打开右键菜单功能
contextMenu {Object} //右键菜单的内容，可以参考plugins/contextmenu.js里边的默认菜单的例子，label留空支持国际化，否则以此配置为准
shortcutMenu {Array} //快捷菜单
elementPathEnabled {Boolean} [默认值：true] //是否启用元素路径，默认是显示
wordCount {Boolean} [默认值：true] //是否开启字数统计
maximumWords {Number} [默认值：10000] //允许的最大字符数
wordCountMsg {String} [默认值：] //当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符，字数统计提示，{#count}代表当前字数，{#leave}代表还可以输入多少字符数，留空支持多语言自动切换，否则按此配置显示
wordOverFlowMsg {String} [默认值：] //超出字数限制提示 留空支持多语言自动切换，否则按此配置显示
tabSize {Number} [默认值：4] //点击tab键时移动的距离，tabSize倍数，tabNode什么字符做为单位
tabNode {String} [默认值：'']
removeFormatTags //清除格式时可以删除的标签和属性
removeFormatAttributes [默认值：'class,style,lang,width,height,align,hspace,valign'
maxUndoCount {Number} [默认值：20] //undo操作，可以最多回退的次数，默认20
maxInputCount {Number} [默认值：1] //undo操作，当输入的字符数超过该值时，保存一次现场
autoHeightEnabled {Boolean} [默认值：true] //是否自动长高，默认true
scaleEnabled {Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
minFrameWidth {Number} [默认值：800] //编辑器拖动时最小宽度，默认800
minFrameHeight {Number} [默认值：220] //编辑器拖动时最小高度，默认220
autoFloatEnabled [默认值：true] //是否保持toolbar的位置不动，默认true
topOffset [默认值：30] //浮动时工具栏距离浏览器顶部的高度，用于某些具有固定头部的页面
toolbarTopOffset [默认值：400] //编辑器底部距离工具栏高度(如果参数大于等于编辑器高度，则设置无效)
pageBreakTag [默认值：'ueditorpagebreaktag'] //分页标识符，默认是ueditorpagebreaktag
autotypeset {Object} //自动排版参数 默认值：
tableDragable {Boolean} [默认值：true] //表格是否可以拖拽
disabledTableInTable {Boolean} [默认值：true] //禁止表格嵌套
sourceEditor {String} [默认值："codemirror"] //源码的查看方式，codemirror是代码高亮，textarea是文本框，默认是codemirror，注意默认codemirror只能在ie8+和非ie中使用
codeMirrorJsUrl {Path String} [默认值：URL + "third-party/codemirror/codemirror.js"] //如果sourceEditor是codemirror需要配置这项，codeMirror js加载的路径
codeMirrorCssUrl {Path String} [默认值：URL + "third-party/codemirror/codemirror.css"] //如果sourceEditor是codemirror需要配置这项，codeMirror css加载的路径
sourceEditorFirst {String} [默认值：false] //编辑器初始化完成后是否进入源码模式，默认为否。
iframeUrlMap {Object} //dialog内容的路径 ～会被替换成URL，垓属性一旦打开，将覆盖所有的dialog的默认路径
webAppKey {String} //webAppKey 百度应用的APIkey，每个站长必须首先去百度官网注册一个key后方能正常使用app功能，注册介绍，http://app.baidu.com/static/cms/getapikey.html
allowDivTransToP {Boolean} 默认会将外部进入的html数据中的Div标签转换成P标签，外部进入的数据包括粘贴和调用setContent接口进入编辑器的数据。如果设置成false将不在做这个转换。
|
如果您觉得文章有用或对您有帮助，欢迎通过以下方式赞助我。 ♪(＾∀＾●)ﾉ