1.0.6 • Published 2 years ago
girf-tinymce-wrap v1.0.6
基于 Tinymce 的富文本编辑器
girf-tinymce-wrap
安装
npm i girf-tinymce-wrap
或
yarn add girf-tinymce-wrap
使用
template 部分
<template> <div> ... <tinymce-editor :value="componentTinymceEditor.content" :setting="componentTinymceEditor.setting" @result="componentTinymceEditor.result"> </tinymce-editor> ... </div> </template>
javascript 部分
import TinymceEditor from './tinymce' export default { components: { TinymceEditor }, data () { return { // Tinymce 富文本编辑器 componentTinymceEditor: { content: '<p>长颈鹿英语</p>', setting: { img_upload: { api_url: '', headers: { Authorization: '123', schoolId: 100, // ....... } } }, 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地址 |
headers | 类型 Object ,请求头(Header)的对象,{ Authorization: '***' } |
max_size | 类型 Number ,图片上传的最大限制,默认:1 ,单位:M |
allow_type | 类型 Array ,图片上传的格式限制,默认:['jpeg', 'png'] |