HTML5 的 WYSIWYG HTML 编辑器富文本编辑器
一、wysiwyg-editor 官方文档…1
二、Nodejs 中使用 wysiwyg-editor… 1
三、Nestjs 中汉化 wysiwyg-editor…2
四、Nestjs 中自定义 wysiwyg-editor 的导航条…2
五、Nestjs 中配置 wysiwyg-editor 上传图片…3
一、wysiwyg-editor 官方文档
一个设计精美的基于 HTML5 的 WYSIWYG HTML 编辑器，它非常小但是非常强大。我们不仅
可以在 nodejs 中使用它，还可以在 vue 、 react 、angular 前端框架中使用，并还可以在
PHP, .NET, Java, and Python 等其他后端语言使用。
1、https://github.com/froala/wysiwyg-editor
2、https://www.froala.com/wysiwyg-editor/docs/options
WYSIWYG 的是 what you see is what you get 的缩写。
二、Nodejs 中使用 wysiwyg-editor
href=“https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css”
rel=“stylesheet” type=“text/css” />
well. -->
三、Nestjs 中汉化 wysiwyg-editor
https://www.froala.com/wysiwyg-editor/languages
1、引入 zh_cn 的语言包
2、配置 language: ‘zh_cn’
四、Nestjs 中自定义 wysiwyg-editor 的导航条
https://www.froala.com/wysiwyg-editor/docs/options#toolbarBottom
new FroalaEditor(‘#content’, {
height: 300,
language: ‘zh_cn’, toolbarButtons: [ [‘bold’, ‘strikethrough’, ‘subscript’, ‘superscript’, ‘outdent’, ‘indent’,
‘clearFormatting’, ‘insertTable’, ‘html’] ,[‘undo’, ‘redo’]], toolbarButtonsXS: [ [‘bold’, ‘strikethrough’, ‘subscript’, ‘superscript’, ‘outdent’, ‘indent’,
‘clearFormatting’, ‘insertTable’, ‘html’] , [‘undo’, ‘redo’]]
});
五、Nestjs 中配置 wysiwyg-editor 上传图片
https://www.froala.com/wysiwyg-editor/docs/options#imageUploadURL
new FroalaEditor(‘#content’, {
height: 300,
language: ‘zh_cn’,
imageUploadURL: ‘/<%=config.adminPath%>/goods/doUpload’, });
注意：后台返回数据格式：{link: ‘path/to/image.jpg’}
@Post(‘doUpload’)
@UseInterceptors(FileInterceptor(‘file’))
async doAdd(@UploadedFile() file){
console.log(‘执行’);
let {saveDir}=this.toolsService.uploadFile(file);
return {link: “/”+saveDir};
}