ATFX-Custom-TinyMCE

安装

npm install atfx-custom-tinymce --save

基本使用

<template>
  <div>
    <textarea id="tinymceId" v-model="content"></textarea>
  </div>
</template>

<script>
import tinymce from 'atfx-custom-tinymce'

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

完整配置示例

<template>
  <div>
    <textarea id="tinymceId" v-model="content"></textarea>
  </div>
</template>

<script>
import tinymce from 'atfx-custom-tinymce'

export default {
  data() {
    return {
      content: '',
      headers: {
        Authorization: 'Bearer token'
      },
    }
  },
  methods: {
	init() {
		tinymce.init({
			selector: '#tinymceId',
			plugins: "image, lists, advlist",
			toolbar: 'forecolor backcolor bold italic underline strikethrough alignleft aligncenter alignright alignjustify outdent indent fileUpload undo redo',
			content_style: `
				body { 
				  font-family: 'Arial', sans-serif; 
				  line-height: 1.6;
				  color: #333;
				}
				h1 { color: #2c3e50; }
				.custom-class { background: #f0f8ff; }
			  `, // 编辑器内容样式
		})
	},
  }
}
</script>

属性

属性名	类型	默认值	描述
id	String	自动生成	编辑器的唯一ID
value / v-model	String	''	编辑器内容
toolbar	Array	[]	自定义工具栏，为空则使用默认工具栏
menubar	String	''	菜单栏配置
options	Object	{}	额外的TinyMCE初始化选项
height	Number/String	360	编辑器高度
width	Number/String	'auto'	编辑器宽度
language	String	'us'	编辑器语言，支持多种语言
limit	Number	5	文件上传数量限制
customUploadUrl	String	''	文件上传接口URL
reviewFileUrl	String	''	文件预览基础URL
customHeaders	Object	{}	上传文件的请求头
uploadDialogTitle	String	'上传文件'	上传对话框标题
uploadDialogText	String	'单击或将文件拖到此处上传...'	上传对话框提示文本
uploadFileRequest	Function	() => {}	自定义文件上传方法

事件

事件名	参数	描述

方法

方法名	参数	描述
setContent	value	设置编辑器内容
getContent	-	获取编辑器内容
getEditor	-	获取原始TinyMCE编辑器实例

文件上传功能

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

## 多语言支持

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

| 代码 | 语言 |
|------|------|
| cn | 简体中文 |
| hk | 繁体中文 |
| us | 英语(美国) |
| ar | 阿拉伯语 |
| ur | 乌尔都语 |
| id | 印尼语 |
| jp | 日语 |
| ko | 韩语 |
| ms | 马来语 |
| th | 泰语 |
| vn | 越南语 |
| ru | 俄语 |
| my | 马来语 |
| hi | 印地语 |
...

## 自定义样式

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

```css
/* 自定义编辑器容器样式 */
.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

常见问题

编辑器无法显示

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