tinymce富文本框组件使用(重点是theme.js不能加载和图片不能调整大小的问题)

本文分享了使用前端编辑器tinymce组件生成报告时遇到的问题及解决方案,包括图片本地上传配置、theme.js文件加载失败及图片手动调整大小等问题。

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

最近项目要求自动生成报告,试了很多种技术栈,最后决定还是用前端的tinymce组件来实现,但是使用过程中遇到很多问题,最麻烦的主要有以下几个问题:

1、图片的本地上传,这个官方文档写的很详细了 https://www.tinymce.com/docs/demo/local-upload/ 加入

在配置中定义images_upload_url,然后在后端写好上传的API就好,这里特别要注意的是,返回值一定要是一个包含location属性,用来指定图片在服务器中的位置。

2、theme.js文件无法加载

因为本人使用webpack管理,所以的build的时候,需要将tinymce包中的文件copy到编译路径,在webpack.dev.config.js(不同项目配置文件不一样)中

的plugins中增加 CopywebpackPlugin,代码:

  plugins: [
    new CopyWebpackPlugin([
      {
          from: 'src/components/text-editor/tinymce'
      }
  ], {
      ignore: [
          'text-editor.vue'
      ]
  })

  ]

3、图片无法手动拉伸调整大小

根本原因还是因为第二点,没有将tinymce中的文件copy到编译路径下,


建议参考项目https://github.com/iview/iview-admin

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值