wangEditor —— 輕量級 web 富文本編輯器，配置方便，使用簡單吨灭。支持 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
以下是項目實戰(zhàn)項目的部分截圖
在做好布局后可使編輯器自適應(yīng)
第一步：下載相關(guān)js文件刑巧，引入項目
<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ù)之后啊楚，用戶點擊富文本區(qū)域會觸發(fā)onfocus函數(shù)執(zhí)行吠冤。
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');
編輯器的一些方法
