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;
}
检查容器宽高设置
确认TinyMCE初始化是否成功