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

最近项目要求自动生成报告,试了很多种技术栈,最后决定还是用前端的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

你可能感兴趣的:(tinymce)