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 ...
随机推荐
- sql select 综合运用
1 : 多个表联合查询 select j.id, jt.Name, j.ApproveType , j.ProductCode, j.Cu ...
- delphi XE4 隐藏程序在任务管理器和隐藏任务栏
最新处理方法,偶然发现delphi下有个ShowMainForm属性,只要在Application.Initialize;后面加上Application.ShowMainForm := false;就 ...
- 彻底卸载MySQL数据库教程
有时候MySQL不能完全卸载,这时候必须通过一些途径删除掉注册表和一些残余的文件,然后才能重新安装才可以成功! 1.控制面板-->所有控制面板项-->程序和功能,卸载mysql serve ...
- vim for windows 简介
普通人的编辑利器--VIM (for windows) 本文转载自 FROM Vincent_czz2005年5月,我开始用VIM.此后渐入佳境,原来因版权自律而放弃盗版UltraEdit的遗憾一扫而 ...
- C语言字符串操作总结大全
1)字符串操作 strcpy(p, p1) 复制字符串 函数原型strncpy(p, p1, n) 复制指定长度字符串 函数原型strcat(p, p1) 附加字符串 函数原型strn ...
- Win32中TreeView控件的使用方法，类似于资源管理器中文件树形显示方式
首先是头文件,内容如下: #include <tchar.h> #include "..\CommonFiles\CmnHdr.h" #include <Wind ...
- AutoMapper搬运工之自定义映射
回顾 上节说到了AutoMapper的简单使用,对于复杂的Mapping需要强大的自定义,这节我们来看下AutoMapper的自定义Mapping(Projection) 搬运自Git:https:/ ...
- [CSS]Input标签与图片按钮对齐
页面直接摆放一个input文本框与ImageButton图片按钮,但是发现没有对齐: <input type="text" id="txtQty" /&g ...
- [译]：Orchard入门——使用标签管理内容
原文链接:Organizing Content Using Tags 在Orchard中,内容项可以使用标签来分类,同时,通过格式为 ~/tags/tag-name 的url可以直接查看包含对应标签关 ...
- WebRTC APM音频处理流程概述
本文主要介绍WebRTC的APM. 现在主要介绍一下audio_processing.h. 首先插入了几个类,这些都是audio_processing的核心模块. class AudioFrame; ...