博客

vue封装tinymce富文本组件,图片上传回调方法

  • Post author:
  • Post category:vue


这里我用了tinymce，主要解决的是上传图片回调处理

效果预览：

第一步：下载tinymce资源，

把tinymce放到static目录

在index.html中引入tinymce.min.js文件 

<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>

第二步：新建tinymce组件

template: 

<template>
  <div class="comp-tinymce-wrapper">
    <textarea :id="tinymceId"></textarea>
  </div>
</template>

script: 

<script>
//上传图片方法

  import {uploadRichImg} from '@/api/common'
  export default {
    name:'tinymce',
    props:{
      id:{
        type:String
      },
      value:{
        type:String,
        default:&#