wangEditor富文本编辑器简单使用及一点小经验

介绍

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

官网：www.wangEditor.com

文档：www.kancloud.cn/wangfupeng/wangeditor3/332599

源码：github.com/wangfupeng1988/wangEditor

image.png

以上内容摘自https://www.kancloud.cn/wangfupeng/wangeditor3/332599

以下是项目实战项目的部分截图

在做好布局后可使编辑器自适应

第一步：下载相关js文件，引入项目

第二步：初始化自己的编辑器

let E = window.wangEditor;

let editor2 = new E('#div3');

editor2.create();

这样就在id为div3的层中建好了自己的编辑器。

第三步：使用一些官方提供的配置及方法

// 监控变化，同步更新到表单数据

  editor2.customConfig.onchange = (html) => {

    console.log(`获取到的富文本数据:${html}`);

  };

//配置onfocus函数之后，用户点击富文本区域会触发onfocus函数执行。

  editor2.customConfig.onfocus = () => {

    console.log('focus');

  };

// 自定义菜单配置(注释或删掉不需要的顶部菜单)

  editor.customConfig.menus = [

    'head',  // 标题

    'bold',  // 粗体

    'fontSize',  // 字号

    // 'fontName',  // 字体

    // 'italic',  // 斜体

    // 'underline',  // 下划线

    // 'strikeThrough',  // 删除线

    // 'foreColor',  // 文字颜色

    // 'backColor',  // 背景颜色

    'list',  // 列表

    'justify',  // 对齐方式

    // 'quote',  // 引用

    'emoticon',  // 表情

    'image',  // 插入图片

    // 'table',  // 表格

    'undo',  // 撤销

    'redo'  // 重复

  ];

//需要的话可以加入全屏功能，同样是传入要存放编辑器的层#div3，一行代码就搞定了，很方便

E.fullscreen.init('#div3');

编辑器的一些方法