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"
}