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

wangEditor3菜单修改之拆分有序排列无序排列菜单

醉清风2019-09-11技术7338

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',  // 粗体
    'list',  // 列表
      'listn',  // 列表                 
    'fgx',   //分割线           
    'image',  // 插入图片    
    ]
    editor.create();    
</script>

wangEditor.js

/*
    menu - list
*/
// 构造函数
function List(editor) {
    var _this = this;
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list-numbered"></i></div>');
    this.type = 'click';
    // 当前是否 active 状态
    this._active = false;
}
// 原型
List.prototype = {
    constructor: List,
    // 执行命令
    onClick: function onClick(e) {
        var editor = this.editor;
        var $textElem = editor.$textElem;
        editor.cmd.do('insertOrderedList');
        // 验证列表是否被包裹在 <p> 之内
        var $selectionElem = editor.selection.getSelectionContainerElem();
        if ($selectionElem.getNodeName() === 'LI') {
            $selectionElem = $selectionElem.parent();
        }
        if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) {
            return;
        }
        if ($selectionElem.equal($textElem)) {
            // 证明是顶级标签,没有被 <p> 包裹
            return;
        }
        var $parent = $selectionElem.parent();
        if ($parent.equal($textElem)) {
            // $parent 是顶级标签,不能删除
            return;
        }
        $selectionElem.insertAfter($parent);
        $parent.remove();
    },
    // 试图改变 active 状态
    tryChangeActive: function tryChangeActive(e) {
        var editor = this.editor;
        var $elem = this.$elem;
        if (editor.cmd.queryCommandState('insertOrderedList')) {
            this._active = true;
            $elem.addClass('w-e-active');
        } else {
            this._active = false;
            $elem.removeClass('w-e-active');
        }
    }
};
//无序
function Listn(editor) {
    var _this = this;
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list2"></i></div>');
    this.type = 'click';
    // 当前是否 active 状态
    this._active = false;
}
// 原型
Listn.prototype = {
    constructor: Listn,
    // 执行命令
    onClick: function onClick(e) {
        var editor = this.editor;
        var $textElem = editor.$textElem;
        editor.cmd.do('insertUnorderedList');
        // 验证列表是否被包裹在 <p> 之内
        var $selectionElem = editor.selection.getSelectionContainerElem();
        if ($selectionElem.getNodeName() === 'LI') {
            $selectionElem = $selectionElem.parent();
        }
        if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) {
            return;
        }
        if ($selectionElem.equal($textElem)) {
            // 证明是顶级标签,没有被 <p> 包裹
            return;
        }
        var $parent = $selectionElem.parent();
        if ($parent.equal($textElem)) {
            // $parent 是顶级标签,不能删除
            return;
        }
        $selectionElem.insertAfter($parent);
        $parent.remove();
    },
    // 试图改变 active 状态
    tryChangeActive: function tryChangeActive(e) {
        var editor = this.editor;
        var $elem = this.$elem;
        if (editor.cmd.queryCommandState('insertUnOrderedList')) {
            this._active = true;
            $elem.addClass('w-e-active');
        } else {
            this._active = false;
            $elem.removeClass('w-e-active');
        }
    }
};
MenuConstructors.list = List;
MenuConstructors.listn = Listn;

效果图

图片.png

扫描二维码至手机访问

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

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

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

标签: wangEditor3

相关文章

JavaScript动态显示可输入的字数提示还可以输入的字数

JavaScript动态显示可输入的字数提示还可以输入的字数

<!DOCTYPE html> <html> <head>     <meta charse...

Linux下挂载硬盘的方法

Linux下挂载硬盘的方法

1. 添加磁盘,查看磁盘状况[root@db1 /]# fdisk -lDisk /dev/sda: 10.7 GB, 10737418240 bytes255 heads, 63 sect...

Ubuntu 18.04 MYSQL 5.7 无法远程连接解决办法

Ubuntu 18.04 MYSQL 5.7 无法远程连接解决办法

第一netstat -ntpl 查看3306监听在127.0.0.1 的话 改成监听IP为你的IP 或者为0.0.0.0vim  /etc/mysql/mysql.conf.d/mysqld...

Linux 服务器性能出问题,排查下这些参数指标

Linux 服务器性能出问题,排查下这些参数指标

一个基于 Linux 操作系统的服务器运行的同时,也会表征出各种各样参数信息。通常来说运维人员、系统管理员会对这些数据会极为敏感,但是这些参数对于开发者来说也十分重要,尤其当你的程序非正常工作的时候,...

jquery下载所有版本(实时更新)

jquery下载所有版本(实时更新)

(注!jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的,而是根据您项目需求所适合的版本!百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) jquer...