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 ...

随机推荐

vuejs
简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易 ...
前端福利！10个短小却超实用的JavaScript 代码段
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...
[转]在MyEclipse中设置struts.xml自动提示功能
导入标签:<%@ taglib uri="/struts-tags" prefix="s" %> 要想在MyEclipse中实现struts.xml ...
Sublime 3 如何设置xftp 保存自动上传
采用sublime SFTP插件,直接保存CentOS服务器的NodeJS文件,这样调试起来很方便,当然得配上一直采用File -> SFTP/FTP -> Setup Se ...
POJ 2337 Catenyms（有向图的欧拉通路）
题意:给n个字符串(3<=n<=1000),当字符串str[i]的尾字符与str[j]的首字符一样时,可用dot连接.判断用所有字符串一次且仅一次,连接成一串.若可以,输出答案的最小字典序 ...
Mysqle 常用函数
一.数学函数数学函数主要用于处理数字,包括整型.浮点数等. select 可以用作输出 ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL ...
JS函数节流
背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...
Revolving Digits（hdu 4333）
题意:就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数字中,比原数字小的,相等的,大的分别有多少个.比如341-->134-->413-->3 ...
Note3 :《集体智慧编程》用户相似度计算
欧几里德距离评价: 以经过人们一致评价的物品为坐标轴,然后将参与评价的人绘制到图上,并考察他们彼此之间的距离远近.计算出每一轴向上的差值,求平方之后再相加,最后对总和取平方根. # -*- codin ...
深入Java核心 Java中多态的实现机制(1)
在疯狂java中,多态是这样解释的: 多态:相同类型的变量,调用同一个方法时,呈现出多中不同的行为特征, 这就是多态. 加上下面的解释:(多态四小类:强制的,重载的,参数的和包含的) 同时, 还用人这 ...

ueditor插件简单使用

ueditor插件简单使用的更多相关文章

随机推荐

热门专题