当前位置:首页 > 技术 > 正文内容

wangEditor3菜单修改之如何添加分割线

醉清风2019-09-11技术5613

wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。
官网:www.wangEditor.com
文档:www.kancloud.cn/wangfupeng/wangeditor3/332599
源码:github.com/wangfupeng1988/wangEditor


简单介绍一下wangEditor自定义添加分割线的菜单项。


html

<div id="editor" class="col-lg-9" style="margin-left: 10%">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

js

 <script type="text/javascript">        
    var E = window.wangEditor        
    var editor = new E('#editor')                   
    editor.customConfig.menus =
    [            
    'head',  // 标题            
    'bold',  // 粗体                 
    'fgx',   //分割线           
    'image',  // 插入图片    
    ]
    editor.create();    
</script>

wangEditor.js

/*
    fgx-menu
    分割线
*/
// 构造函数
function Fgx(editor) {
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-fgx">—</i>\n        </div>');
    this.type = 'click';
    // 当前是否 active 状态
    this._active = false;
}
// 原型
Fgx.prototype = {
    constructor: Fgx,
    // 点击事件
    onClick: function onClick(e) {
        // 点击菜单将触发这里
        var editor = this.editor;
       
        // 执行 bold 命令
        editor.cmd.do('insertHTML','<hr/>');
    },
};
MenuConstructors.hr1 = Hr1;
MenuConstructors.hr2 = Hr2;
MenuConstructors.hr3 = Hr3;
MenuConstructors.fgx = Fgx;


效果图

图片.png

扫描二维码至手机访问

扫描二维码推送至手机访问。

版权声明:本文由红柚酱发布,如需转载请注明出处。

转载请注明出处:https://www.notenet.cn/post/83.html

标签: wangEditor3

相关文章

jquery和prototype库冲突兼容性问题解决方案

jquery和prototype库冲突兼容性问题解决方案

在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突。我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都可...

nginx负载均衡后端无法加载css和js资源

nginx负载均衡后端无法加载css和js资源

nginx的代理缓存区,默认较小导致部分文件出现加载不全的问题,比较典型的如jQuery框架,可以通过配置调整nginx的缓存区即可。主要参考proxy参数最终完整配置如下:http {...

nginx日志切割及历史日志删除脚本

nginx日志切割及历史日志删除脚本

如果使用LNMP网站环境的话,默认nginx只会生成一个访问日志,并且是在每天的积累,日志文件会变的非常大,如果需要做一下日志的分析,无论是使用脚本分析,还是把日志下载本地分析,都不太方便。每天分割N...

CentOS 7 下安装 Nginx

CentOS 7 下安装 Nginx

安装所需环境Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境。一. gcc 安装安装 n...

【漏洞预警】Apache Shiro < 1.6.0 权限绕过漏洞(CVE-2020-13933)

【漏洞预警】Apache Shiro < 1.6.0 权限绕过漏洞(CVE-2020-13933)

【漏洞描述】2020年8月17日,Apache Shiro官方发布安全更新,修复了一个最新权限绕过漏洞。攻击者利用该漏洞可以绕过验证访问到后台功能,风险较高。攻击者可以使用包含payload的恶意请求...