引入 wysiwyg-editor
字体,css,jquery,js, 汉化包
<link href=”/public/admin/wysiwyg-editor/css/font-awesome.min.css” rel=”stylesheet” type=”text/css” />
<!– Include Editor style. –>
<link href=”/public/admin/wysiwyg-editor/css/froala_editor.pkgd.min.css” rel=”stylesheet” type=”text/css” />
<link href=”/public/admin/wysiwyg-editor/css/froala_style.min.css” rel=”stylesheet” type=”text/css” />
<!– 引入 jquery –>
<!– Include Editor JS files. –>
<script type=”text/javascript” src=”/public/admin/wysiwyg-editor/js/froala_editor.pkgd.min.js”></script>
<script type=”text/javascript” src=”/public/admin/wysiwyg-editor/js/zh_cn.js”></script>
前端配置 wysiwyg-editor
height 高度
language 语言
imageUploadURL 图片上传地址
toolbarButtons ,toolbarButtonsMD ,toolbarButtonsSM 不同分辨率显示工具
<script>
$(function() {
$(‘#content’).froalaEditor({
height: 300, // 给编辑器设置默认的高度
language: ‘zh_cn’,
imageUploadURL: ‘/admin/goods/goodsUploadImage’,
// 根据不同的分辨率加载不同的配置
toolbarButtons: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-‘, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’],
toolbarButtonsMD: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-‘, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’],
toolbarButtonsSM: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-‘, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’]
});
});
</script>
后台配置图片上传
router.js
router.post(‘/admin/goods/goodsUploadImage’, controller.admin.goods.goodsUploadImage);
controller
app/controller/admin/goods.js
async goodsUploadImage() {
// 实现图片上传
let parts = this.ctx.multipart({autoFields: true});
let files = {};
let stream;
while ((stream = await parts()) != null) {
if (!stream.filename) {
break;
}
let fieldname = stream.fieldname; //file 表单的名字
// 上传图片的目录
let dir=await this.service.tools.getUploadFile(stream.filename);
let target = dir.uploadDir;
let writeStream = fs.createWriteStream(target);
await pump(stream, writeStream);
files=Object.assign(files,{
[fieldname]:dir.saveDir
})
}
console.log(files);
// 图片的地址转化成 {link: ‘path/to/image.jpg’}
this.ctx.body={link: files.file};
}
图片上传不经过 csrf
报错
解决办法
config/config.default.js
config.security = {
csrf: {
// 判断是否需要 ignore 的方法，请求上下文 context 作为第一个参数
ignore: ctx => {
if(ctx.request.url==’/admin/goods/goodsUploadImage’){
return true;
}
return false;
}
}
}
成功效果