wangEditor增加自定义菜单,去除html(word)样式,只保留文字

如下:1、qgs 是我自定义的工具栏菜单属性,如果是自定义菜单配置加上qgs菜单
var editor = new E(’#editor’);
editor.customConfig.debug = true;
editor.customConfig.menus = [
‘head’, // 标题
‘bold’, // 粗体
‘fontSize’, // 字号
‘fontName’, // 字体
‘italic’, // 斜体
‘underline’, // 下划线
‘strikeThrough’, // 删除线
‘foreColor’, // 文字颜色
‘backColor’, // 背景颜色
‘list’, // 列表
‘justify’, // 对齐方式
‘image’, // 插入图片
‘table’, // 表格
‘undo’, // 撤销
‘redo’, // 重复
‘qgs’ // 去格式
];
2、wangEditor.js
菜单配置工具栏,加上我自定义的qgs菜单
var config = {

// 默认菜单配置
menus: ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo','qgs']}

3、
/*
qgs-menu
*/

在这里插入图片描述
4、//原型 写自己的菜单事件的实现业务逻辑
Qgs.prototype = {
constructor: Qgs,

// 点击事件
onClick: function onClick(e) {
	 // 点击菜单将触发这里

    var editor = this.editor;
    var str = editor.txt.html();
    str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
    str = str.replace(/<style>[\s\S]*?<\/style>/ig, '');
    str = str.replace(/<\/?[^>]*>/g, '');
    str = str.replace(/[ | ]*\n/g, '\n');
    str = str.replace(/&nbsp;/ig, '');
    editor.txt.html(str);
},

// 试图改变 active 状态
tryChangeActive: function tryChangeActive(e) {
    var editor = this.editor;
    var $elem = this.$elem;
    if (editor.cmd.queryCommandState('qgs')) {
        this._active = true;
        $elem.addClass('w-e-active');
    } else {
        this._active = false;
        $elem.removeClass('w-e-active');
    }
}

};

5、
// 存储菜单的构造函数,加上 MenuConstructors.qgs = Qgs;
var MenuConstructors = {};

MenuConstructors.bold = Bold;

MenuConstructors.head = Head;

MenuConstructors.fontSize = FontSize;

MenuConstructors.fontName = FontName;

MenuConstructors.link = Link;

MenuConstructors.italic = Italic;

MenuConstructors.redo = Redo;

MenuConstructors.strikeThrough = StrikeThrough;

MenuConstructors.underline = Underline;

MenuConstructors.undo = Undo;

MenuConstructors.list = List;

MenuConstructors.justify = Justify;

MenuConstructors.foreColor = ForeColor;

MenuConstructors.backColor = BackColor;

MenuConstructors.quote = Quote;

MenuConstructors.code = Code;

MenuConstructors.emoticon = Emoticon;

MenuConstructors.table = Table;

MenuConstructors.video = Video;

MenuConstructors.image = Image;

MenuConstructors.qgs = Qgs;

总结:通过上面的环节就实现的去html格式的功能菜单
在这里插入图片描述

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值