使用ueditor小结

Posted 2020-07-28 xngeer

1. 导入
    js:
        ueditor.config.js
        ueditor.all.js

    css/images/plugin:
        themes
        lang
        dialog(可选)
        third-party(可选)
    
2. 配置
    修改 ueditor.config.js 的 UEDITOR_CONFIG

    a. 定义 themes, lang, third-party 的路径，如果是在同一文件夹下，定义 UEDITOR_HOME_URL 就可以了
        否则分别修改 themePath, langPath, UEDITOR_HOME_URL
    b. 定义工具栏 toolbars
        simpleupload            : 简单上传:点击按钮,直接选择文件上传
        insertimage             : 插入图片，会呼起弹窗
    c. 其它配置(只列出修改的几条，更多见文档：http://ueditor.baidu.com/doc/)
        initialFrameHeight      : 编辑器默认高度
        enableContextMenu       : 右键菜单开关
        enableAutoSave          : 是否自动保存
        topOffset               : 工具栏悬浮时 top 值
        imageScaleEnabled       : 图片压缩开关
        elementPathEnabled      : 启用元素路径开关
        catchRemoteImageEnable  : 远程抓取图片开关
        iframeCssUrl            : 富文本 iframe 中导入的 css 外链文件
        wordCount               : 字数统计开关
    d. 插件
        simpleupload            : 简单上传:点击按钮,直接选择文件上传
            修改上传接口和回调函数，修改接口可以统一在 getActionUrl 中定义，下同
        insertimage             : 插入图片，会呼起弹窗
            修改上传接口和回调函数
        autoupload              : 拖放文件到编辑区域，自动上传并插入到选区
            修改上传接口和回调函数
        catchremoteimage        : 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片
            修改上传接口和回调函数
            catcherFieldName    : 上传接口中的 form name
            catcherLocalDomain  : 定义不做替换的图片 domain
    e. 自定义按钮
        参见：http://fex.baidu.com/ueditor/#dev-developer
3. 遇到的问题
    a. 想在富文本中插入一个自定义结构，独立模块，不可编辑，不可部分删除
        参考微信公众号，插入一个 iframe，子 iframe 中加 onclick，点击时选中子 iframe(ie, ff 无法选中)
    b. 插入图片后只显示一半，编辑器高度没有自动变化，focus 时才撑高
        插入图片后 fire: me.fireEvent("contentchange");
    c. simpleupload 没有 title
        找到 initUploadBtn ，给 input 加个 title
    d. 想在工具栏和富文本 iframe 中间插入一些内容
        参考微信公众号，在 EditorUI.prototype 的 gethtmlTpl 中插入
    e. http 请求多个 css 文件，而且是用 js 异步加载的，会出现临时样式不对的情况
        将需要的 css 合并压缩成一个文件，在 head 引入，去掉 UE.ui.Editor 中用 js 引入 css 的部分
    f. 在 IE 下 iframeCssUrl 指定的文件加载了，但竟然不生效也是醉了
        直接在 Editor.prototype 的 render 中写入样式