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();
};
},
更多专业前端知识,请上 【猿2048】www.mk2048.com