@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();