jodit-vue 插件踩坑之路

jsdit富文本编辑器的踩坑之路

总体来说这个富文本编辑器还挺好使用的；但是中文文档不全，使用起来必须看

文档地址：传送门

一 如何使用

      npm 安装   

npm install jodit

CDN使用方法

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.1.39/jodit.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.1.39/jodit.min.js"></script>

Self-hosted · Download files

<link rel="stylesheet" href="build/jodit.min.css">

<script src="build/jodit.min.js"></script>

使用:

html:<textarea id="editor" name="editor"></textarea>或<div id="editor"></div>

js:

var editor = new Jodit('#editor');

jquery:

$('textarea').each(function () {

var editor = new Jodit(this);

editor.value = '<p>start</p>';

二 组件中使用

              import 'jodit/build/jodit.min.css'

              import {JoditVue } from 'jodit-vue'

               components: {JoditVue},

               <jodit-vue v-model="form.solution" :config="editor_options" />

                editor_options:{

                            "autofocus": true,

                             "uploader": {

                                    // url: "上传图片路径地址"

                   }

               到这里遇到了一个大坑；；上传图片这个路径协商之后上床图片报错；

               需要上传图片到图片服务器或者是本地开启一个服务存储图片；

               可能会遇到上传成功了但是图片没有显示出来

               解决办法：

附 配置项完整json 根据需要配置即可：

      editor_options:{

          "autofocus": true,

          "uploader": {

              // url: "http://192.168.2.26:8000/confknowledge/addZyFile"

              url: "http://192.168.2.26:8000/confknowledge/addZyFile",

              // insertImageAsBase64URI: false,

              imagesExtensions: [

                    "jpg",

                    "png",

                    "jpeg",

                    "gif"

                  ],

              //headers: {"token":`${db.token}`},

              // filesVariableName: 'files',

              filesVariableName: function(t){return "files["+t+"]"},

              // withCredentials: false,

              // pathVariableName: "path",

              // format: "json",

              // method: "POST",

              prepareData: function (formdata) {

                  console.log(formdata)

                  let file = formdata.getAll("files[0]")[0];

                  //formdata.append("createTime", (Date.now() / 1000) | 0);

                  formdata.append("file", file);

                  return formdata;

              },

              isSuccess: function (e) {

                  // console.log("shuju"+e.data);

                  return e.data;

              },

              getMessage: function (e) {

                  return void 0 !== e.data.messages && Array.isArray(e.data.messages) ? e.data.messages.join("") : ""

              },

              process: function (resp) {

                  var ss = this;

                  console.log(resp);

                  var arrfile = [];

                  //arrfile.push(resp.data);

                  arrfile.unshift(resp.data);

                  this.path = arrfile[0];

                  return {

                      file: arrfile, //[this.options.uploader.filesVariableName] || [],

                      path: arrfile[0],

                      baseurl: '',

                      error: resp.msg,

                      msg: resp.msg,

                      isImages:arrfile[0]

                  };

                  //return resp.data;

              },

              // error: function (e) {

              //     // this.jodit.events.fire("errorMessage", e.message, "error", 4e3)

              // },

              defaultHandlerSuccess: function(data,resp){

                 this.s.insertImage(data.baseurl + data['isImages']);

                // console.log(data,resp)

                // var i, field = 'files';

                //     for (i = 0; i < data[file].length; i += 1) {

                //         this.s.insertImage(data.baseurl + data[file][i]);

                //     }

              },

              defaultHandlerError: function (e) {

                  this.jodit.events.fire("errorMessage", e.message)

              },

              // contentType: function (e) {

              //     return (void 0 === this.jodit.ownerWindow.FormData || "string" == typeof e) &&

              //         "application/x-www-form-urlencoded; charset=UTF-8"

              // }

          },

          "language": "zh_cn",

          "toolbarButtonSize": "small",

          "enter": "P",

          "defaultMode": "1",

          "toolbarSticky": false,

          "buttons": "bold,strikethrough,underline,italic,|,ul,ol,|,outdent,indent,|,font,fontsize,brush,paragraph,,image,table,link,align,undo,redo,\n,cut,hr,eraser,copyformat,|,symbol,fullsize,selectall,print,about",

          "buttonsMD": "bold,image,|,brush,paragraph,|,align,,undo,redo,|,eraser,dots"

        }