ueditor插件简单使用
下载地址：http://ueditor.baidu.com/website/download.html
建议同时下载所需版本及完整源码。 [ 1.4.3 JSP + 完整源码src ]
简单配置说明
解压JSP版，放置项目中。
1，引入所需文件；
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/ueditor.config.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/ueditor.all.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/lang/zh-cn/zh-cn.js"></@script>
2，实例化编辑器；
方法一：
<body>
<div>
<script id="editor" type="text/plain"></script>
</div>
</body>
<script type="text/javascript">
var ue = UE.getEditor( 'editor',{
autoHeightEnabled: true,
autoFloatEnabled: true,
initialFrameWidth: 690,
initialFrameHeight:483
});
</script>
方法二：
<textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea>
var editor = new UE.ui.Editor();
editor.render("myEditor");
效果图；
通过ueditor.config.js文件简单进行自己所需配置。
自定义按钮）
1，将addCustomizeButton.js文件拷贝至项目，引入。（解压完整源码包_examples目录可找到该文件）
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/addCustomizeButton.js"></@script>
根据注释修改addCustomizeButton.js文件，（以下自定义添加图片按钮）
// 如果要注册多个按钮以空格标识隔开，例如注册按钮1 按钮2 按钮3 UE.registerUI('1 2 3',function(editor,uiName){}
UE.registerUI('\u63d2\u5165\u56fe\u7247',function(editor,uiName){
//上传成功回调函数
var onFileUploadComplete = function(res)
{
var length = res.successful.length;
if( length > 0 )
{
var nodes = res.successful;
for (var i = 0 ; i < nodes.length ; i++)
{
var url = Alfresco.constants.PROXY_URI;
var nodeID = nodes[i].nodeRef.replace("workspace://SpacesStore/","api/node/workspace/SpacesStore/");
url = url + nodeID + "/content/doclib?c=force&ph=true";
//追加编辑器预览图片效果
editor.setContent('<img style="width:650px;" src="'+url+'" alt="'+nodes[i].fileName+'" title="'+nodes[i].fileName+'"/>',true);
//editor.setContent("content...",boolean); 如果boolean为true ,追加编辑器内容，否则编辑器内容写入。
}
}
};
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName,{
execCommand:function(){
//alert('execCommand:' + uiName)
// TODO self something
this.fileUpload = Alfresco.getFileUploadInstance();
var multiUploadConfig = {
//destination:"workspace://SpacesStore/56b62ff0-d06d-4928-ba7a-7c4e4a17aaab",
destination: "JY",
thumbnails: "doclib",
filter: [//限制只能上传*.jpg;*.png;*.gif
{
description:"images",
extensions:"*.jpg;*.png;*.gif"
}],
mode: this.fileUpload.MODE_MULTI_UPLOAD_FUJIAN,
viewdetail:false,
onFileUploadComplete: {
fn: onFileUploadComplete,
scope: this
}
};
this.fileUpload.show(multiUploadConfig);
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name:uiName,
//提示
title:uiName,
//需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules :'background-position: -726px -77px;',// 使用多图上传icon
//点击时执行的命令
onclick:function () {
//这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//当点到编辑内容上时，按钮要做的状态反射
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
//因为你是添加button,所以需要返回这个button
return btn;
}/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);
效果图；
UEditor1.4.3版本存在系列问题处理：
1,启动自动保存；enableAutoSave: false设置无效。解决办法；修改ueditor.all.js文件；添加代码：if (!me.getOpt('enableAutoSave')) {return;}
'contentchange': function () {
// 去掉本地保存 1.4.3 enableAutoSave: false设置无效
if (!me.getOpt('enableAutoSave')) {
return;
}
//
if ( !saveKey ) {
return;
}
if ( me._saveFlag ) {
window.clearTimeout( me._saveFlag );
}
if ( me.options.saveInterval > 0 ) {
me._saveFlag = window.setTimeout( function () {
save( me );
}, me.options.saveInterval );
} else {
save(me);
}
}
2，插入表格保存后，获取保存内容预览表格边框不显示。修改ueditor.all.js文件以下几处。
UE.commands['inserttable'] = {
queryCommandState: function () {
return getTableItemsByRange(this).table ? -1 : 0;
},
execCommand: function (cmd, opt) {
function createTable(opt, tdWidth) {
var html = [],
rowsNum = opt.numRows,
colsNum = opt.numCols;
for (var r = 0; r < rowsNum; r++) {
html.push('<tr' + (r == 0 ? ' class="firstRow"':'') + '>');
/* old code
for (var c = 0; c < colsNum; c++) {
html.push('<td width="' + tdWidth + '" vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>')
}*/
// new code
for (var c = 0; c < colsNum; c++) {
html.push('<td style="border:1px solid #ccc;" width="' + tdWidth + '" vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>')
}
html.push('</tr>')
}
//禁止指定table-width
// old code
//return '<table><tbody>' + html.join('') + '</tbody></table>'
// new code
return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>'
}
if (!opt) {
opt = utils.extend({}, {
numCols: this.options.defaultCols,
numRows: this.options.defaultRows,
tdvalign: this.options.tdvalign
})
}
var me = this;
var range = this.selection.getRange(),
start = range.startContainer,
firstParentBlock = domUtils.findParent(start, function (node) {
return domUtils.isBlockElm(node);
}, true) || me.body;
var defaultValue = getDefaultValue(me),
tableWidth = firstParentBlock.offsetWidth,
tdWidth = Math.floor(tableWidth / opt.numCols - defaultValue.tdPadding * 2 - defaultValue.tdBorder);
//todo其他属性
!opt.tdvalign && (opt.tdvalign = me.options.tdvalign);
me.execCommand("inserthtml", createTable(opt, tdWidth));
}
};
//设置表格可排序,清除表格可排序
UE.commands["enablesort"] = UE.commands["disablesort"] = {
queryCommandState: function (cmd) {
var table = getTableItemsByRange(this).table;
if(table && cmd=='enablesort') {
var cells = domUtils.getElementsByTagName(table, 'th td');
for(var i = 0; i<cells.length; i++) {
if(cells[i].getAttribute('colspan')>1 || cells[i].getAttribute('rowspan')>1) return -1;
}
} return !table ? -1: cmd=='enablesort' ^ table.getAttribute('data-sort')!='sortEnabled' ? -1:0;
},
execCommand: function (cmd) {
var table = getTableItemsByRange(this).table;
table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled"); table.setAttribute("style", "border-collapse:collapse;");// append new code cmd == "enablesort" ? domUtils.addClass(table,"sortEnabled"):domUtils.removeClasses(table,"sortEnabled");
}
};
};
ueditor插件简单使用的更多相关文章
- ueditor插件 -- 插入填空题
插入填空题,一个看似小小的需求,但是却是折腾了很9.主要产品那边的要求,空格上面要标有序号,并且再页面当中能够同步空格答案列表. 1.ueditor插件 插件入门,官方的例子还是很简单直接的,对于我们 ...
- 富文本编辑器——百度UEditor插件安装教程
一.使用环境 Win7 Eclipse jettty9 chrome 二.下载百度UEditor插件 1.下载地址:http://ueditor.baidu.com/website/download. ...
- springmvc集成Ueditor插件实现图片上传2、
一.下载Ueditor插件. 地址:http://ueditor.baidu.com/website/download.html 二.环境搭建. 具体可以参看http://fex.baidu.com/ ...
- 【 VS 插件开发 】三、Vs插件简单功能的实现
[ VS 插件开发 ]三.Vs插件简单功能的实现
- ueditor的简单配置和使用
在项目中需要使用到富文本编辑器,我们选用的是ueditor,这是由百度web前端研发部开发所见即所得富文本web编辑器,功能比较强大,可以完成文本的编辑,图片的上传等功能.本文对ueditor的配置使 ...
- 随笔：关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题
随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题 问题来源 一位小伙伴在使用 Ueditor 插件时出错,因为用的是 php7.1 ...
- 百度编辑器ueditor插件的基本使用
注意:该插件是基于tpframe开发,请在tpframe框架上使用 插件下载地址:https://pan.baidu.com/s/1MOJbd1goQC0Bn5-7HcIdKA 插件下载下来后解压到a ...
- HTML编辑器UEditor的简单使用
參考自:http://ueditor.baidu.com/website/document.html 关于HTML编辑器,试过FCKeditor,升级版的CKeditor,还有TinyMCE,近期在尝 ...
- 基于jsp的百度Ueditor插件的使用
初次使用百度的富文本编辑器Ueditor,写下使用经验以备不时之需 只是简单的应用,如有错误,请指正 首先去下载编辑器插件http://ueditor.baidu.com/website/downlo ...
随机推荐
- Proj.4库的编译及使用
Proj.4库的编译及使用 Proj.4是开源GIS最著名的地图投影库,GRASS GIS, MapServer, PostGIS, Thuban, OGDI, Mapnik, TopoCad, GD ...
- Eclipse 的单步调试
1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上. 2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面,然后先设置断点,按调试按 ...
- 创建 WPF 工具箱控件
创建 WPF 工具箱控件 WPF (Windows Presentation Framework) 工具箱控件模板允许您创建 WPF 控件,会自动添加到 工具箱 安装扩展的安装. 本主题演示如何使用模 ...
- Java中的Serializable接口transient关键字，及字节、字符、对象IO
1.什么是序列化和反序列化Serialization是一种将对象转为为字节流的过程:deserialization是将字节流恢复为对象的过程. 2.什么情况下需要序列化a)当你想把的内存中的对象保存到 ...
- Excel 点滴积累
1.Excel中截取邮件@之后的字符 MID(text, start_num, num_chars) FIND(find_text,within_text,start_num) Right(strin ...
- webstorm抽取函数
webstrom 1.extact 抽取函数:选中代码,右键,refactor-extact function matchPicLink() { var $match = $('#match'); v ...
- Sublime Text 2报“Decode error - output not utf-8”错误的解决办法
[Decode error - output not utf-8] [Decode error - output not utf-8] 应该怎么办? 这是因为python配置的编译环境的编码不 ...
- hbase集群的启动,注意几个问题
1.hbase的改的会影响器他的组件的使用, 故而, 在修改 hadoop的任何组件后, 一定要记得其它的组件也能受到影响, 一下是我在将hadoop的集群改了之后 , 再次运行hbase的时候, 就 ...
- 将UINavgationController的push改成从左到右
CATransition* transition = [CATransition animation]; transition.type = kCATransitionPush; // ...
- Fiddler
Fiddler教程: 原文:http://kb.cnblogs.com/page/130367/