介紹

wangEditor —— 輕量級(jí) web 富文本編輯器，配置方便，使用簡(jiǎn)單。支持 IE10+ 瀏覽器。

官網(wǎng)：www.wangEditor.com

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

源碼：github.com/wangfupeng1988/wangEditor

image.png

以上內(nèi)容摘自https://www.kancloud.cn/wangfupeng/wangeditor3/332599

以下是項(xiàng)目實(shí)戰(zhàn)項(xiàng)目的部分截圖

在做好布局后可使編輯器自適應(yīng)

第一步：下載相關(guān)js文件，引入項(xiàng)目

<script src="lib/editor/wangEditor.min.js"></script>

<!-- 全屏功能需要調(diào)用的js -->

<script src="lib/editor/wangEditor-fullscreen-plugin.js"></script>

第二步：初始化自己的編輯器

let E = window.wangEditor;

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

editor2.create();

這樣就在id為div3的層中建好了自己的編輯器。

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

// 監(jiān)控變化，同步更新到表單數(shù)據(jù)

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

    console.log(`獲取到的富文本數(shù)據(jù):${html}`);

  };

//配置onfocus函數(shù)之后，用戶點(diǎn)擊富文本區(qū)域會(huì)觸發(fā)onfocus函數(shù)執(zhí)行。

  editor2.customConfig.onfocus = () => {

    console.log('focus');

  };

// 自定義菜單配置(注釋或刪掉不需要的頂部菜單)

  editor.customConfig.menus = [

    'head',  // 標(biāo)題

    'bold',  // 粗體

    'fontSize',  // 字號(hào)

    // 'fontName',  // 字體

    // 'italic',  // 斜體

    // 'underline',  // 下劃線

    // 'strikeThrough',  // 刪除線

    // 'foreColor',  // 文字顏色

    // 'backColor',  // 背景顏色

    'list',  // 列表

    'justify',  // 對(duì)齊方式

    // 'quote',  // 引用

    'emoticon',  // 表情

    'image',  // 插入圖片

    // 'table',  // 表格

    'undo',  // 撤銷

    'redo'  // 重復(fù)

  ];

//需要的話可以加入全屏功能，同樣是傳入要存放編輯器的層#div3，一行代碼就搞定了，很方便

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

編輯器的一些方法