官网:www.wangeditor.com
基本
在vue2项目使用:
一:在新增页面使用
1.npm下载安装 npm install wangeditor
2.引入 import E from "wangeditor";
3.初始化富文本
initEditor() {
this.editor = new E("#editor");
this.editor.customConfig.onchange = () => { this.addNewsForm.newContent = this.editor.txt.html(); };
// editor.customConfig.uploadImgShowBase64 = true;
this.editor.customConfig.menus = [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入图片
"table", // 表格
"video", // 插入视频
"code", // 插入代码
"undo", // 撤销
"redo" // 重复 ];
this.editor.customConfig.uploadFileName = "picture"; this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; this.editor.customConfig.uploadImgHeaders = { Accept: "*/*" }; this.editor.customConfig.withCredentials = true;
// 上传图片到服务器
this.editor.customConfig.uploadImgServer = uploadURL.imgUrl;
// this.editor.customConfig.debug = true;
// this.editor.customConfig.debug = // location.href.indexOf("wangeditor_debug_mode=1") > 0;
上面两句看官网说是开启调式模式,但是测试了下好像不生效,可能姿势不对
this.editor.customConfig.customAlert = function(info) {
console.log("自定义提示：" + info)
// info 是需要提示的内容, 有错误它也会打印出来
};
this.editor.customConfig.uploadImgHooks = {
/***before: function(xhr, editor, files) {
let formdata = new FormData();
for (let i = 0; i < files.length; i++) {
let url = files[i];
formdata.append("file[]", url);
}
}, ***/
//以下代码实现插入图片功能
customInsert: function(insertImg, result, editor) {
insertImg(result.msg);
/*** for (let i = 0; i < result.msg.length; i++) {
let url = result.msg[i]; insertImg(url);
} } ***/
};
this.editor.create();
}
二:编辑页面进来回显富文本内容
this.editor.txt.html(res.data.newContent);
三,禁用编辑器
// 禁用编辑功能
editor.$textElem.attr('contenteditable', false)
// 开启编辑功能
editor.$textElem.attr('contenteditable', true)
