11月06, 2017

百度ueditor自定义按钮

之前平台的页面要实现这样的一个弹窗:

alt

好吧,并不难,只要实现几个接口,然后界面就能出来了。

然后设计师希望在编辑器里面也能使用这个弹窗,他们希望能管理这些图片。于是就有了这个需求。

思考:Ueditor不支持es6写法,所以必须外部提供一个变量,来显示弹窗以及弹窗里面的一些交互。

对于Ueditor说,只要弹窗点击OK的时候,插入一段HTML片断即可。所以需要外部插件提供onOK的回调。当然一些接口URL,最好也能开放出来配置。

然后我在google上搜索了一下,让我找到一篇文章:百度ueditor富文本--自定义插件按钮。它上面讲的七七八八,不过最后一步有问题。

在此我记录一下自己的做法。(在此表示无奈,官方都不给一篇这样的文档说明)

给文件夹做一个硬链接

是这样,我用了github上的ueditor,然后通过grunt default来生成dist文件。在另外一个目录,我需要引用这个dist文件,因此需要做一个软链接。

这个软链接是指我dist目录中一旦发生什么文件,另外一处的引用就会发生变化。

mac下的”ln -s“,用了一下,死活不行,然后查了google,说它是阉割版。所以我只能使用别人提供的一个方案:hardlink,最终跑通。

第一步:加按钮及描述

alt

加上你需要的按钮英文名称,需要注意的是:必须全部小写。我在测试中使用了驼峰式的命名,然后title就死活不出来了。

描述是在lang文件夹中,有几个语种,就配几条。ueditor默认是en和zh。

alt

alt

第二步:更换图标

alt

这里偷个小懒,我就直接用了它的大雪碧里面的,实际可能会是一张image。

第三步:注册choosepic事件

alt

在plugins下面新建一个choosepic.js的文件。ueditor默认会加载plugins下面所有的文件。

/**
 * 选择图片插件
 */
UE.plugin.register("choosepic", function() {
    return {
        commands: {
            choosepic: {
                execCommand : function(){  
                    var text = prompt("请输入一段文字");
                    this.execCommand('insertHtml', text); 
                    // return true;   
                }
            }
        }
    }
});

随后只要把外部插件的逻辑放到execCommand里面去即可。

其他

Ueditor最让人诟病的一点在于上传文件,它做了太多的事情。。

个人觉得只要提供上传参数,然后约定返回的格式(甚至于说不约定,后端直接返回字符串),再强大一点参数上面提供配置即可。

但话说回来,现在都是ES6的时代了,是否非要用Ueditor,这也是一个选择。

本文链接:www.my-fe.pub/post/ueditor-add-custom-button.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。