1.0.4 • Published 6 years ago
@layson/rich-text-editor v1.0.4
@layson/rich-text-editor
介绍
@layson/rich-text-editor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。 Demo以vue框架展示
安装
npm install @layson/rich-text-editor -- save
简单使用
<div ref=“testEditor”></div>
import Pn from "@layson/rich-text-editor";
let editor = new Pn(this.$refs.testEditor); // 这个为元素块对象,其他框架为相对应的对象'#div1'
editor.customConfig.onchange = (html) => {
console.log(html); // 这里可以双向绑定获取到输入的html代码 this.testValue = html;
var json = editor.txt.getJSON(); // 获取 JSON 格式的内容
var jsonStr = JSON.stringify(json);
console.log(json);
console.log(jsonStr);
};
editor.create();
// 可以使用绑定到vue对象中
// this.pnEditor = editor;
已知问题
已知在vue的created使用会报错,需要设置一个setTimeout延迟, 建议在mounted中使用。
核心api使用
禁用编辑功能 editor.$textElem.attr('contenteditable', false);
开启编辑功能 editor.$textElem.attr('contenteditable', true);
设置内容
editor.txt.html('<p>用 JS 设置的内容</p>'
);
清空内容 editor.txt.clear();
富文本框对于”录入代码“的功能:
在H5端显示
需要对<
转换为<,
需要对>
转换为>
demo记录
let editor = new Pn(this.$refs.testEditor);
editor.customConfig.onchange = (html) => {
this.testValue = html;
};
editor.customConfig.debug = true;
// (1)使用 base64 保存图片
// editor.customConfig.uploadImgShowBase64 = true;
// (2)上传图片到服务器
// editor.customConfig.uploadImgServer = constant.baseURI+'/upload/img'; // 上传图片服务器地址
// editor.customConfig.uploadFileName = 'file'; // 上传图片时,可自定义filename
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function (xhr, editor) {
console.log(xhr);
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
let url = result.url;
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
};
editor.customConfig.colors = [
'#409EFF',
'#7498EB',
'#61C09F',
'#F4C333',
'#FA5555',
'#303133',
'#606266',
'#C0C4CC',
'#DCDFE6',
'#FFFFFF'
];
editor.create();