富文本编辑器 wangEditor.js-CSDN博客

1、引用 wangEditor 相关js 和 css

下载地址：https://files.cnblogs.com/files/kitty-blog/WangEditor.zip

3、页面：

 <div id="editor"> </div>

2、初始化编辑器：

 //初始化编辑器
        function editor_init() {
            var E = window.wangEditor;
            var editor = new E('#editor');
            editor.customConfig.linkCheck = function (text, link) {
               //校验链接地址
                if (isValidatedUrl(link)) {
                    return true;
                } else {
                    return '连接无效';
                }
            };
            editor.customConfig.linkImgCheck = function (text, link) {
                 //校验图片链接地址
                if (isValidatedUrl(link)) {
                    return true;
                } else {
                    return '图片连接无效';
                }
            };
            //自定义emoji 表情（微信）
            editor.customConfig.emotions = [
                {
                    title: '?',
                    type: 'emoji',
                    content: '☀ ☁ ☔ ⛄ ⚡ ? ? ? ? ? ? ? ? ? ❄ ⛅ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⌚ ⌛ ⏰ ⏳ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ⛎ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ☺ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⛪ ⛲ ? ? ? ? ⚓ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ☎ ? ? ? ? ? ✉ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ✒ ? ? ✏ ? ? ? ? ? ? ✂ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⚾ ⛳ ? ⚽ ? ? ? ? ? ? ? ? ? ? ? Ⓜ ? ? ? ? ? ? ? ✈ ⛵ ? ? ? ? ? ? ? ? ⛽ ? ? ? ? ♨ ⛺ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 〽 ? ? ? ? ? ? ? ? ? ? ? ? ? ? © ® ™ ℹ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ☕ ? ? ? ? ? ? ? ↗ ↘ ↖ ↙ ⤴ ⤵ ↔ ↕ ⬆ ⬇ ➡ ⬅ ▶ ◀ ⏩ ⏪ ⏫ ⏬ ? ? ? ? ⭕ ❌ ❎ ❗ ⁉ ‼ ❓ ❔ ❕ 〰 ➰ - ❤ ? ? ? ? ? ? ? ? ? ? ? ? ? ♥ ♠ ♦ ♣ ? ? ♿ ? ⚠ ⛔ ♻ ? ? ? ? ? ? ? ? ? ? ? ✔ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ㊙ ㊗ ? ? ➕ ➖ ✖ ➗ ? ? ? ? ? ? ? ? ? ? ? ? ? ✨ ✴ ✳ ⚪ ⚫ ? ? ? ? ⭐ ⬜ ⬛ ▫ ▪ ◽ ◾ ◻ ◼ ? ? ? ? ❇ ? ? ↩ ↪ ? ? ? ? ? ? ? ? ? ? ? ? ☑ ? ? ? ? ? ? ? ? ✅ ✊ ✋ ✌ ? ? ☝ ? ? ? ? ? ? ? ? ?'.split(/\s/)
                }
            ];
           //自定义颜色
            editor.customConfig.colors = [
                '#000000',
                '#eeece0',
                '#1c487f',
                '#4d80bf',
                '#c24f4a',
                '#8baa4a',
                '#7b5ba1',
                '#46acc8',
                '#f9963b',
                '#ffffff',
                '#ff84b8',
                '#f44336',
                '#e91e63',
                '#9c27b0',
                '#3f51b5',
                '#2196f3',
                '#03a9f4',
                '#00bcd4',
                '#009688',
                '#4caf50',
                '#cddc39',
                '#ffeb3b',
                '#ffc107',
                '#ff9800',
                '#ff5722',
                '#795548',
                '#9e9e9e',
                '#607d8b'
            ];
            editor.create();
          //判断用户填写内容（这里用的是vue 双向绑定。）
            editor.txt.html(vm.content.length === 0 ? '' : vm.content);
            editor.change = function () {          // 这里是change 不是官方文档中的 onchange
                // 编辑区域内容变化时，实时打印出当前内容
                vm.content = this.txt.html();
            };
        },