1.0.1 • Published 3 years ago
tony-tinymce-wrap v1.0.1
基于 Tinymce 的富文本编辑器
安装
npm i tony-tinymce-wrap
或
yarn add tony-tinymce-wrap
使用
index.html 部分
... <script src="https://oss.sh123.cn/libs/tinymce.5.1.5/tinymce.min.js"></script> ...
template 部分
<template> <div> ... <tinymce-editor :value="componentTinymceEditor.content" :setting="componentTinymceEditor.setting" @result="componentTinymceEditor.result"> </tinymce-editor> ... </div> </template>
javascript 部分
import TinymceEditor from 'tony-tinymce-wrap' export default { components: { TinymceEditor }, data () { return { // Tinymce 富文本编辑器 componentTinymceEditor: { content: '<p>Tinymce富文本编辑器</p>', setting: { img_upload: { api_url: '', access_token: '' } }, result: ( _cnt ) => { console.log(_cnt) } } } } }
参数说明
名称 描述 :value
类型 String
,作为文本内容传入编辑器:setting
类型 Object
,编辑器配置项:img_upload
类型Object
,详细见下方参数说明;其他配置见:http://tinymce.ax-z.cn/general/basic-setup.php@result
类型 Function
,编辑器中Input
Change
Undo
Redo
事件响应后触发的事件返回文本内容,可绑定父页面对应数据img_upload
参数说明名称 描述 api_url
类型 String
,图片上传的API地址access_token
类型 String
,请求头(Header)的Tokenmax_size
类型 Number
,图片上传的最大限制,默认:1
,单位:M
allow_type
类型 Array
,图片上传的格式限制,默认:['jpeg', 'png', 'gif']