ATFX-TinyMCE

安装

npm install atfx-tinymce --save

基本使用

<template>
  <div>
    <Tinymce v-model="content" />
  </div>
</template>

<script>
import { Tinymce } from 'atfx-tinymce'

export default {
  components: {
    Tinymce
  },
  data() {
    return {
      content: '<p>Hello World!</p>'
    }
  }
}
</script>

完整配置示例

<template>
  <div>
    <Tinymce
      v-model="content"
      :height="500"
      :width="800"
      language="cn"
      :limit="10"
      :custom-upload-url="uploadUrl"
      :review-file-url="reviewUrl"
      :custom-headers="headers"
      upload-dialog-title="上传文件"
      upload-dialog-text="单击或将文件拖到此处上传(支持jpg、jpeg、png、gif、pdf格式)"
      @update:uploadFileSuccess="handleUploadSuccess"
      @update:uploadFileError="handleUploadError"
      @update:imageReview="handleImageReview"
    />
  </div>
</template>

<script>
import { Tinymce } from 'atfx-tinymce'

export default {
  components: {
    Tinymce
  },
  data() {
    return {
      content: '',
      uploadUrl: '/api/upload',
      reviewUrl: '/api/files',
      headers: {
        Authorization: 'Bearer token'
      },
    }
  },
  methods: {
    handleUploadSuccess(fileList, fileUrl) {
      console.log('上传成功', fileList, fileUrl)
    },
    handleUploadError(error) {
      console.error('上传失败', error)
    },
    handleImageReview(imageUrl, imageContainer) {
      console.log('查看图片', imageUrl)
      // 可以在这里实现自定义的图片预览功能
    }
  }
}
</script>

属性

事件

方法

文件上传功能

组件内置了强大的文件上传功能：

支持的文件类型

• 图片：jpg, jpeg, png, gif
• 文档：pdf

文件处理

• 默认文件大小限制为10MB
• 图片自动插入到编辑器中并显示预览
• PDF文件以链接+图标形式插入，点击可在新窗口打开
• 支持拖拽上传和点击上传
• 支持直接粘贴图片自动上传

上传接口要求

上传接口需要返回以下格式的数据：

{
  "code": 1004,  // 成功状态码
  "data": "filename.jpg"  // 文件名
}

多语言支持

组件支持多种语言，通过language属性设置：

自定义样式

组件预设了基本样式，同时支持自定义：

/* 自定义编辑器容器样式 */
.tinymce-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

/* 自定义编辑器内容样式 */
.tinymce-body {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
}

/* 自定义PDF预览样式 */
.pdf-container {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
}

环境要求

• Vue 2.x
• Element UI（用于上传对话框）

常见问题

文件上传失败

• 检查customUploadUrl是否正确配置
• 确认服务器接口返回格式是否符合要求
• 验证customHeaders是否包含必要的认证信息

编辑器无法显示

• 检查容器宽高设置
• 确认TinyMCE初始化是否成功