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

本文介绍了如何在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};
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值