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