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

随机推荐

听说你们要开始学C了
同学们好: 先自我介绍一下,我是你们的助教吴喆(厚颜无耻地要求大家叫我吉吉老师:-D),本科学的电子,所以陆陆续续接触了不少C/C++的工作,曾经被编码折磨得死去活来,如今却对其念念不舍,颇有点“斯德 ...
POJ 1860（spfa）
http://poj.org/problem?id=1860 题意:汇率转换,与之前的2240有点类似,不同的是那个题它去换钱的时候,是不需要手续费的,这个题是需要手续费的,这是个很大的不同. 思路: ...
strcmp
C++ Code 123456789101112 int strcmp(const char *dest, const char *source) { assert((NULL != ...
spring集成常用技术的配置
使用spring集成其他技术,最基本的配置都是模板化的,比如配置视图模板引擎.数据库连接池.orm框架.缓存服务.邮件服务.rpc调用等,以spring的xml配置为例,我将这些配置过程整理出来,并不 ...
.NET LINQ 串联运算
串联运算串联是指将一个序列追加到另一个序列的运算. 方法方法名说明 C# 查询表达式语法 Visual Basic 查询表达式语法更多信息 Concat 串联两个序列以组成一个序列. ...
(转)nginx优化实现10万并发访问量
转自http://www.cnblogs.com/pricks/p/3837149.html 一般来说nginx配置文件中对优化比较有作用的为以下几项:worker_processes 8;1 ngi ...
fabric devenv Vagrantfile配置
Vagrantfile文件只会在第一次执行vagrant up时调用执行,其后如果不明确使用vagrant reload,则不会被强制重新加载. # This is the mount point f ...
Struts2 动态方法调用
01.Struts 2基本结构使用Struts2框架实现用登录的功能,使用struts2标签和ognl表达式简化了试图的开发,并且利用struts2提供的特性对输入的数据进行验证,以及访问Servl ...
【CentOS】压缩打包
一.gzip [-d][-1-9][filename] -d 解压 -[1-9] 压缩等级(默认为6) zcat filename.gz 查看压缩文件最小化安装centOS是没有安装bzip2的 ...
poj 3253 Fence Repair
Fence Repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 42979 Accepted: 13999 De ...

ueditor插件简单使用

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

随机推荐

热门专题