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 ...
随机推荐
- php 操作数组 （合并，拆分，追加，查找，删除等）
1. 合并数组 array_merge()函数将数组合并到一起,返回一个联合的数组.所得到的数组以第一个输入数组参数开始,按后面数组参数出现的顺序依次迫加.其形式为: array array_merg ...
- css3美化复选框checkbox
两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...
- request \response 总结
request&response request 1.获得信息的方法 1> 获得请求首行信息的方法 *getMethod *getContextP ...
- java序列化
什么是java序列化,如何实现java序列化? 我们有时候将一个java对象变成字节流的形式传出去或者从一个字节流中恢复成一个java对象,例如,要将java对象存储到硬盘或者传送给网络上的其他计算机 ...
- ASM:《X86汇编语言-从实模式到保护模式》第17章：保护模式下中断和异常的处理与抢占式多任务
★PART1:中断和异常概述 1. 中断(Interrupt) 中断包括硬件中断和软中断.硬件中断是由外围设备发出的中断信号引发的,以请求处理器提供服务.当I/O接口发出中断请求的时候,会被像8259 ...
- 【python】描述符descriptor
开始看官方文档,各种看不懂,只看到一句Properties, bound and unbound methods, static methods, and class methods are all ...
- js串讲整理
js子级窗口向父级窗口传值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 简单的后台json，前台解析 操作
后台: List<PageData> KeyWords=plantDefDetailCSAService.findKeyWords(pd); JSONArray array = new J ...
- Html_color code表示
http://www.computerhope.com/htmcolor.htm#color-codes,如
- HTML: vertical algin Big/small div in same row (bootstrap)
Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...