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

wangEditor3菜单修改之拆分居左居中居右菜单

醉清风2019-09-11技术7850

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

wangEditor.js

/*
    menu - justify
*/
// 构造函数
function JustifyLeft(editor) {
    var _this = this;
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-left"></i></div>');
    this.type = 'click';
    // 当前是否 active 状态
    this._active = false;
}
// 原型
JustifyLeft.prototype = {
    constructor: JustifyLeft,
    // 执行命令
    onClick: function onClick(e) {
        var editor = this.editor;
        editor.cmd.do('justifyLeft');
    },
   
};
// 构造函数
function JustifyCenter(editor) {
    var _this = this;
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-center"></i></div>');
    this.type = 'click';
    // 当前是否 active 状态
    this._active = false;
}
// 原型
JustifyCenter.prototype = {
    constructor: JustifyCenter,
    // 执行命令
    onClick: function onClick(e) {
        var editor = this.editor;
        editor.cmd.do('justifyCenter');
    },
   
};
// 构造函数
function JustifyRight(editor) {
    var _this = this;
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-right"></i></div>');
    this.type = 'click';
    // 当前是否 active 状态
    this._active = false;
}
// 原型
JustifyRight.prototype = {
    constructor: JustifyRight,
    // 执行命令
    onClick: function onClick(e) {
        var editor = this.editor;
        editor.cmd.do('justifyRight');
    },
   
};
MenuConstructors.justifyleft = JustifyLeft;
MenuConstructors.justifycenter = JustifyCenter;
MenuConstructors.justifyright = JustifyRight;

效果图

图片.png

扫描二维码至手机访问

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

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

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

标签: wangEditor3

相关文章

CentOS 7 下安装 Nginx

CentOS 7 下安装 Nginx

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

php版本号排序

php版本号排序

PHP版本号的命名规则主版本号,次版本号,发布版本号例如:7.0.12:7指的是主版本号,0是次版本号,12是发布版本号PHP版本号的获取1.phpversion(),返回了包含当前运行 PH...

linux磁盘分区详解

linux磁盘分区详解

1.磁盘的分区主要分为基本分区(primary partion)和扩充分区(extension partion)两种,基本分区和扩充分区的数目之和不能大于四个。且基本分区可以马上被使用但不能再分区...

【漏洞预警】WebLogic发布2020年10月关键补丁更新,修复多个高风险漏洞

【漏洞预警】WebLogic发布2020年10月关键补丁更新,修复多个高风险漏洞

美国时间2020年10月20日,Oracle发布2020年10月关键补丁更新,修复了多个评分为 9.8 的严重漏洞。其中包括蚂蚁安全非攻实验室发现的两个严重漏洞:• CVE-2020-14841:We...

Linux环境下iptables查看、添加、删除和修改命令如何用?

Linux环境下iptables查看、添加、删除和修改命令如何用?

1、iptables 查看命令:iptables -nL –line-number-n 不对 ip 地址进行反查,加上这个参数显示速度会快很多;-L 查看当前表的所有规则,默认查看的是 filter...