u014785859
MISO_ALICE
采纳率100%
2017-10-24 07:18

给百度UEditor编辑器自定义一个按钮

9

UEditor编辑器

比如我输入12345,选择该文字后,点加粗按钮(B),则源代码中一定是

12345

同样的,我点击斜体按钮(I),则源代码变成

12345

这些按钮都是编辑器自带的,我现在想自定义一个按钮(C),选中文字后,点击该按钮,则源代码变成:

12345

请问应该怎么修改,我用的是UEditor 1.433 PHP UTF-8版

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • m0_37513833 m0_轩少 4年前

    第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示。
    第二步:找到你所引用的ueditor.all.js文件中的btnCmds数组,在其中同样增加一个“hougelou”字符串。

    第三步:清空缓存刷新下页面吧!工具栏的对应位置是否出现了一个自己定义的按钮呢?如下图所示:

    由于此时未设置对应按钮的图片样式,所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式,接着按照下面的步骤动手吧。

    第四步:找到themes/default/css/ueditor.css文件,增加一条样式定义:

    .edui-for-hougelou .edui-icon {
    background-position: -700px -40px;
    }

    此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片(themes/default/images/icons.png)中的位置偏移。如需更改成另外图标,只需添加图标到该图片文件中,然后设置偏移值即可。

    第五步:到此为止,在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑,但是我们发现点击按钮之后毫无反应。那是必然的,我们还必须为该按钮绑定属于它自己的事件处理方法。

    点赞 评论 复制链接分享
  • qq_37524684 子幽 4年前

    表示只改过kindeditor,因为ueditor封装的地方不好找

    点赞 评论 复制链接分享
  • demonsbj demonsbj 4年前

    这个需要自定义开发代码吧

    点赞 评论 复制链接分享

为你推荐