UNPKG

3.99 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction } from './common'
3
4interface EditorProps extends StandardProps {
5 /** 设置编辑器为只读
6 * @default false
7 * @supported weapp
8 */
9 readOnly?: boolean
10
11 /** 提示信息
12 * @supported weapp
13 */
14 placeholder?: string
15
16 /** 点击图片时显示图片大小控件
17 * @default false
18 * @supported weapp
19 */
20 showImgSize?: boolean
21
22 /** 点击图片时显示工具栏控件
23 * @default false
24 * @supported weapp
25 */
26 showImgToolbar?: boolean
27
28 /** 点击图片时显示修改尺寸控件
29 * @default false
30 * @supported weapp
31 */
32 showImgResize?: boolean
33
34 /** 编辑器初始化完成时触发
35 * @supported weapp
36 */
37 onReady?: CommonEventFunction
38
39 /** 编辑器聚焦时触发
40 * event.detail = { html, text, delta }
41 * @supported weapp
42 */
43 onFocus?: CommonEventFunction<EditorProps.editorEventDetail>
44
45 /** 编辑器失去焦点时触发
46 * detail = { html, text, delta }
47 * @supported weapp
48 */
49 onBlur?: CommonEventFunction<EditorProps.editorEventDetail>
50
51 /** 编辑器内容改变时触发
52 * detail = { html, text, delta }
53 * @supported weapp
54 */
55 onInput?: CommonEventFunction<EditorProps.editorEventDetail>
56
57 /** 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式
58 * @supported weapp
59 */
60 onStatuschange?: CommonEventFunction
61}
62
63declare namespace EditorProps {
64 interface editorEventDetail {
65 html, text, delta
66 }
67}
68
69/** 富文本编辑器,可以对图片、文字进行编辑。
70 *
71 * 编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储。
72 *
73 * 通过 setContents 接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。
74 *
75 * 富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的 html 时,需要额外引入 这段样式,并维护 `<ql-container><ql-editor></ql-editor></ql-container>` 的结构。
76 *
77 * 图片控件仅初始化时设置有效。
78 *
79 * *编辑器内支持部分 HTML 标签和内联样式,不支持 **class** 和 **id***
80 * @classification forms
81 * @supported weapp
82 * @example_react
83 * ```tsx
84 * class App extends Components {
85 * state = {
86 * placeholder: '来,输入隔壁的名字试试...'
87 * }
88 *
89 * editorReady = e => {
90 * Taro.createSelectorQuery().select('#editor').context((res) => {
91 * this.editorCtx = res.context
92 * }).exec()
93 * }
94 *
95 * undo = e => {
96 * this.editorCtx.undo()
97 * }
98 *
99 * render () {
100 * return (
101 * <View>
102 * <Editor id='editor' className='editor' placeholder={this.state.placeholder} onReady={this.editorReady}></Editor>
103 * <Button type='warn' onClick={this.undo}>撤销</Button>
104 * </View>
105 * )
106 * }
107 * }
108 * ```
109 * @example_vue
110 * ```html
111 * <template>
112 * <view class="container">
113 * <editor id="editor" class="editor" :placeholder="placeholder" `@ready="editorReady"></editor>
114 * <button type="warn" `@tap="undo">撤销</button>
115 * </view>
116 * </template>
117 *
118 * <script>
119 * import Taro from '@tarojs/taro'
120 * export default {
121 * data() {
122 * return {
123 * placeholder: '来,输入隔壁的名字试试...'
124 * }
125 * },
126 * methods: {
127 * editorReady() {
128 * Taro.createSelectorQuery().select('#editor').context((res) => {
129 * this.editorCtx = res.context
130 * }).exec()
131 * },
132 * undo() {
133 * this.editorCtx.undo()
134 * }
135 * }
136 * }
137 * </script>
138 * ```
139 * @see https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
140 */
141declare const Editor: ComponentType<EditorProps>
142
143export { Editor, EditorProps }