关于富⽂本编辑器jodit的使⽤和使⽤中遇到的问题
Jodit v.3使⽤纯TypeScript编写的优秀开源WYSIWYG编辑器，⽆需使⽤其他库，是国外的⼀个开源富⽂本编辑器
我打算在项⽬中集成这个富⽂本编辑框.
按照官⽹的教程基本配置成功!
//开始使⽤
通过 bower安装
bower install jodit
通过 npm安装
npm install jodit
CDN使⽤⽅法
<link rel="stylesheet" href="//cdnjs.cloudflare/ajax/libs/jodit/3.1.39/jodit.min.css">
<script src="//cdnjs.cloudflare/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>';
});
已经可以正常使⽤，其中还有⼀些⼩的功能,⽐如选项的配置，安装官⽅给出的⼀些指导:
uploadimage,filebrowser
var editor = new Jodit('#editor', {
uploader: {
url: 'localhost:8181/index-test.php?action=fileUpload'
},
filebrowser: {
ajax: {
url: 'localhost:8181/index-test.php'
}
}
});
Create plugin
urplugin = function (editor) {
('afterInit', function () {
editor.seleciotn.insertHTMl('Text');
});
}
Add custom button
var editor = new Jodit('.someselector', {
extraButtons: [
{
name: 'insertDate',
iconURL: 'xdsoft/jodit/logo.png',
exec: function (editor) {
editor.selection.insertHTML((new Date).toDateString());
}
}
]
})
其中图⽚上传默认是以base64编码的形式存储的，这样的话，在⼀边⽂档中有许多图⽚，就会使得⽂档变⼤，不利于存储及显⽰，我们要改成路径存储在⽂档中，根据上⾯的代码
uploader: {
url: 'localhost:8181/index-test.php?action=fileUpload'
},
修改为
uploader: {
url: "/articlesLife/admin/uploadAboutMePic",
insertImageAsBase64URI: false,
imagesExtensions: [
"jpg",
"png",
"jpeg",
"gif"
],
//headers: {"token":`${db.token}`},
filesVariableName: 'files',
withCredentials: false,
pathVariableName: "path",
format: "json",
method: "POST",
prepareData: function (formdata) {
file = All("files[0]")[0];
//formdata.append("createTime", (w() / 1000) | 0);
formdata.append("aboutMePic", file);
return formdata;
},
isSuccess: function (e) {
console.log(e);getsavefilename
//console.log("shuju"+e.length);
return e.data;
},
getMessage: function (e) {
return void 0 !== ssages && Array.isArray(ssages) ? ssages.join("") : "" },
process: function (resp) {
var ss = this;
console.log(resp);
var arrfile = [];
//arrfile.push(resp.data);
arrfile.unshift(resp.data);
console.log(arrfile.length + "" + arrfile[0]);
//this.selection.insertImage(arrfile[0]);
return {
files: arrfile, //[this.options.uploader.filesVariableName] || [],
path: '',
baseurl: '',
error: resp.msg,
msg: resp.msg
};
//return resp.data;
},
error: function (e) {
this.jodit.events.fire("errorMessage", e.message, "error", 4e3)
},
defaultHandlerSuccess: function (resp) {},
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"
}
}
其中url为上传图⽚的接⼝;
prepareData: function (formdata) {
file = All("files[0]")[0];
//formdata.append("createTime", (w() / 1000) | 0);
formdata.append("aboutMePic", file);
return formdata;
}，这⼀段为上传的参数名称及图⽚,aboutMePic为上传图⽚的参数名,
后台使⽤springboot
public Result uploadAboutMePic(@RequestParam("aboutMePic") MultipartFile multipartFile, HttpServletRequest request,HttpServletResponse response) { isSuccess：中为上传成功返回的参数；根据⾃⼰定义的返回参数结构来解析;
process: function (resp) {
var ss = this;
console.log(resp);
var arrfile = [];
//arrfile.push(resp.data);
arrfile.unshift(resp.data);
console.log(arrfile.length + "" + arrfile[0]);
//this.selection.insertImage(arrfile[0]);
return {
files: arrfile, //[this.options.uploader.filesVariableName] || [],
path: '',
baseurl: '',
error: resp.msg,
msg: resp.msg
};
//return resp.data;
},
process：中的这个很重要，是上传成功之后返回图⽚的路径插⼊到富⽂本框中，我的返回数据格式是 {code:"1000",msg:"成功",data:"上传成功返回的图⽚路径",count:""}
其中files为图⽚路径的数组集合，把⼀次上传图⽚返回的图⽚路径存⼊数组，其实⼀次上传只有⼀个图⽚，所以数组中只有⼀张图⽚资源,path:
和baseurl：我没⽤到，我所使⽤的就是以上的⽅法，上传成功后返回图⽚路径，并插⼊在⽂本框中!
下⾯看我完整的配置代码：
//jodit富⽂本编辑器
var joditor = new Jodit('#jodit_editor',{
zIndex: 10,
language: 'zh_cn',
width:'auto',
height: 500,
minHeight: 500,
toolbarStickyOffset: 100,
saveModeInCookie: false,
iframeStyle: '*,.jodit_wysiwyg {color:red;}',
observer: {
timeout: 800
},
uploader: {
url: "/articlesLife/admin/uploadAboutMePic",
insertImageAsBase64URI: false,
imagesExtensions: [
"jpg",
"png",
"jpeg",
"gif"
],
//headers: {"token":`${db.token}`},
filesVariableName: function(t){return "files["+t+"]"},//"files",
withCredentials: false,
pathVariableName: "path",
format: "json",
method: "POST",
prepareData: function (formdata) {
file = All("files[0]")[0];
//formdata.append("createTime", (w() / 1000) | 0);
formdata.append("aboutMePic", file);
return formdata;
},
isSuccess: function (e) {
console.log(e);
//console.log("shuju"+e.length);
return e.data;
},
getMessage: function (e) {
return void 0 !== ssages && Array.isArray(ssages) ? ssages.join("") : ""
},
process: function (resp) {
var ss = this;
console.log(resp);
var arrfile = [];
arrfile.unshift(resp.data);
console.log(arrfile.length + "||路径：" + arrfile[0]);
console.log("再次打印："+resp.data+"||baseurl:");
return {
files: arrfile, //[this.options.uploader.filesVariableName] || [],
path: '',
baseurl: '',
error: resp.msg,
msg: resp.msg,
isImages:arrfile,
};
//return resp.data;
},
error: function (e) {
this.jodit.events.fire("errorMessage", e.message, "error", 4e3)
},
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"
}
},
filebrowser: {
ajax: {
url: 'xdsoft/jodit/connector/index.php'
}
}
});
@RequestMapping("/articlesLife")
public class ArticlesLifeController {
@RequestMapping("/admin/uploadAboutMePic")
public Result uploadAboutMePic(@RequestParam("aboutMePic") MultipartFile multipartFile, HttpServletRequest request,HttpServletResponse response) { //ArticlesLife aboutUs=new ArticlesLife();
//String path = DefaultClassLoader().getResource("").getPath();
//String path = URL("classpath:").getPath();
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论