之前一直使用textarea 來進(jìn)行內(nèi)容的編輯。但是局限性還是太多，最近發(fā)現(xiàn)了editor。覺得很不錯

1.查看官方示例

uniapp的官方說明

https://uniapp.dcloud.io/component/editor.html

這里有個例子，看起來很棒。但是自己使用起來的時候，怎么也沒有官方demo上面的工具欄！

2.關(guān)于富文本編輯器的工具欄

無論是uniapp的demo 還是微信官方的demo。editor組件都是沒有工具欄的

微信官方的editor demo里面工具欄效果更好一點，是直接集成在鍵盤輸入框上面的，體驗更好。

研究之后發(fā)現(xiàn) editor 只是一個編輯器內(nèi)容控件而已。想要上圖工具欄的效果還得自己封裝。

其實這里官方也提到了需要使用api。但是如果稍微解釋一下工具欄的效果需要結(jié)合api來實現(xiàn)的話會更好。

這里的api uniapp和原生的格式基本一樣。

3.自己實踐一下

頁面如下：

主要嘗試以下功能（其他的功能實現(xiàn)都相似的）

1. 撤銷的動作
2. 圖片的插入
3. editor內(nèi)容的保存 （這里的數(shù)據(jù)是Delta格式）
4. editor內(nèi)容的賦值

關(guān)于具體editor的動作，都可以結(jié)合api來處理

文檔 https://uniapp.dcloud.io/api/media/editor-context.html#editorcontext-format

頁面 editor.vue 代碼如下:

<template>
  <view>
    <editor id="editor" :placeholder="placeholder" @ready="onEditorReady"></editor>
    <view style="display: flex;">
      <button type="primary" @tap="undo">撤銷</button>
      <button type="primary" @tap="insertDivider">插入分割線</button>
      <button type="primary" @tap="insertImage">插入圖片</button>
      <button type="primary" @tap="saveEditor">保存editor頁面</button>
      <button type="primary" @tap="pasteEditor">鏡像另一個editor頁面</button>
    </view>
    <view>
      <view>這里另外一個editor</view>
      <view>
        <editor id="editor2" class="ql-container" placeholder="這里另外一個editor" @ready="onEditorReady2"></editor>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        placeholder: '開始輸入...',
        tempDelta: {}
      }
    },
    methods: {
      onEditorReady() {

        // #ifdef MP-BAIDU
        this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
        // #endif

        // #ifdef APP-PLUS || H5 ||MP-WEIXIN
        uni.createSelectorQuery().select('#editor').context((res) => {
          this.editorCtx = res.context
        }).exec()
        // #endif
      },
      onEditorReady2() {
 

        // #ifdef APP-PLUS || H5 ||MP-WEIXIN
        uni.createSelectorQuery().select('#editor2').context((res) => {
          this.editorCtx2 = res.context
        }).exec()
        // #endif
      },
      undo() {
        this.editorCtx.undo()
      },
      insertDivider() {

        this.editorCtx.insertDivider()
      },
      insertImage() {
        var that = this
        uni.chooseImage({
          success(res) {

            console.log('選擇圖片成功')
            console.log(res)
            that.editorCtx.insertImage({
              width: '20%',
              height: '20%',
              src: res.tempFilePaths[0]
            })
          }
        })
      },
      saveEditor() {
        var that = this
        this.editorCtx.getContents({
          success(res) {
            // debugger
            that.tempDelta = res.delta
            console.log(res)
          }
        })

      },
      pasteEditor() {
        debugger
        this.editorCtx2.setContents({
          delta: this.tempDelta,
          complete(res){
            debugger
          }
        })
      },

    }
  }
</script>

<style>

</style>

效果

文章來源地址http://www.zghlxwxcb.cn/news/detail-492767.html

到了這里，關(guān)于uniapp 微信小程序 editor富文本編輯器 api 使用記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！