HTML5 的 WYSIWYG HTML 编辑器富文本编辑器

本文链接：https://blog.youkuaiyun.com/qq_42896543/article/details/130454963

本文介绍了如何在Nodejs环境中，特别是使用Nestjs框架时，集成和定制WYSIWYG-Editor。包括汉化编辑器、自定义工具栏以及配置图片上传功能的详细步骤，并提供了官方文档链接作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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};
}