diff --git a/docs/component/editor.md b/docs/component/editor.md
index 0b77ccc9a53ca379ddcbffd35022db2629d79b9b..3bc756a2be8d38ee7c5d7f5588012815d573d771 100644
--- a/docs/component/editor.md
+++ b/docs/component/editor.md
@@ -69,12 +69,89 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
**示例代码** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/editor/editor)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/editor/editor
+示例中css文件地址https://github.com/dcloudio/hello-uniapp/blob/master/pages/component/editor/editor-icon.css
> Template
``` vue
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -84,23 +161,97 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
export default {
data() {
return {
- placeholder: '开始输入...'
+ readOnly: false,
+ formats: {}
}
},
+ onLoad() {
+ // #ifndef MP-BAIDU
+ uni.loadFontFace({
+ family: 'Pacifico',
+ source: 'url("https://sungd.github.io/Pacifico.ttf")'
+ })
+ // #endif
+ },
methods: {
+ readOnlyChange() {
+ this.readOnly = !this.readOnly
+ },
onEditorReady() {
- // #ifdef MP-BAIDU
- this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
- // #endif
-
- // #ifdef APP-PLUS || H5 ||MP-WEIXIN
- uni.createSelectorQuery().select('#editor').context((res) => {
- this.editorCtx = res.context
- }).exec()
- // #endif
+ // #ifdef MP-BAIDU
+ this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
+ // #endif
+
+ // #ifdef APP-PLUS || MP-WEIXIN || H5
+ uni.createSelectorQuery().select('#editor').context((res) => {
+ this.editorCtx = res.context
+ }).exec()
+ // #endif
},
undo() {
this.editorCtx.undo()
+ },
+ redo() {
+ this.editorCtx.redo()
+ },
+ format(e) {
+ let {
+ name,
+ value
+ } = e.target.dataset
+ if (!name) return
+ // console.log('format', name, value)
+ this.editorCtx.format(name, value)
+ },
+ onStatusChange(e) {
+ const formats = e.detail
+ this.formats = formats
+ },
+ insertDivider() {
+ this.editorCtx.insertDivider({
+ success: function() {
+ console.log('insert divider success')
+ }
+ })
+ },
+ clear() {
+ uni.showModal({
+ title: '清空编辑器',
+ content: '确定清空编辑器全部内容？',
+ success: res => {
+ if (res.confirm) {
+ this.editorCtx.clear({
+ success: function(res) {
+ console.log("clear success")
+ }
+ })
+ }
+ }
+ })
+ },
+ removeFormat() {
+ this.editorCtx.removeFormat()
+ },
+ insertDate() {
+ const date = new Date()
+ const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
+ this.editorCtx.insertText({
+ text: formatDate
+ })
+ },
+ insertImage() {
+ uni.chooseImage({
+ count: 1,
+ success: (res) => {
+ this.editorCtx.insertImage({
+ src: res.tempFilePaths[0],
+ alt: '图像',
+ success: function() {
+ console.log('insert image success')
+ }
+ })
+ }
+ })
}
}
}
@@ -109,18 +260,49 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
> Style
``` vue
```