富文本編輯器 wangEditor.js

一、引用 wangEditor 相關js  和 css

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

三、頁面：

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

二、初始化編輯器：

 //初始化編輯器
        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();
            };
        },