用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 資訊/觀點 查看內容

2012湖人vs雷霆季后赛:小程序富文本編輯器editor初體驗

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-6-3 00:32

終于,微信在5月9號的v2.7.0版本中新增了 editor富文本編輯器組件,今天有時間了準備體驗一下在5月6日的時候寫了一篇小程序富文本解析的「偽需求」,從wxParse到towxml的坑,當時還在感慨官方什么時候出個比較全面的 ...

終于,微信在5月9號的 v2.7.0 版本中新增了 editor富文本編輯器組件,今天有時間了準備體驗一下

在5月6日的時候寫了一篇 小程序富文本解析的「偽需求」,從wxParse到towxml的坑 ,當時還在感慨官方什么時候出個比較全面的富文本組件,誰知道沒幾天就發布了 editor 富文本組件。

熟悉下文檔

首先是兼容版本,最低要求 2.7.0 ,使用時確認下開發工具的調試基礎庫。

然后需要關注下目前支持的標簽,從目前公眾號排版出來的文章的樣式還是比較復雜的,總覺得目前的富文本編輯器不一定全部支持「我的猜測還是正確的」

從文檔上看目前支持的標簽數不是很多,但常用的基本都在里面了。

初嘗試

使用還是比較簡單的,官方的文檔已經表述的比較清楚了,直接在 wxml 中引入組件

<editor
  id="editor"
  class="ql-container"
  placeholder="{{placeholder}}"
  showImgSize
  showImgToolbar
  showImgResize
  bindstatuschange="onStatusChange"
  read-only="{{readOnly}}"
  bindready="onEditorReady">
</editor>

然后在js中對組件進行初始化即可。

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
    }).exec()
  },

具體也可以直接下載官方的demo,可以直接在開發工具中運行,還是比較簡單的。

結合我的博客湖人vs爵士季后赛

最后就想嘗試下,我的博客小程序中是否可以將 towxml 替換成 editor ,畢竟 towxml 太大了。

實現也比較簡單,獲取文章詳情后,利用 setContents 來給富文本賦值,先寫了一個簡單的demo,核心代碼如下:

/**
   * 初始化富文本框
   */
  onEditorReady:async function() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
    }).exec()

    let result=await api.getPostsById('ee3099285ccee97e0ca03888750d4603')
    console.info(result.data)
    that.editorCtx.setContents({
      html:result.data.content,
      success:  (res)=> {
        console.log(res)
      },
      fail:(res)=> {
        console.log(res)
      }
    })
  },

運行后發現,一片空白,但看了日志數據已經獲取成功,調用 setContents 方法也是成功的。

首先確認下代碼是否有問題,將html賦值的地方寫死固定的字符串,運行后發現是可以渲染成功的,證明代碼應該沒問題。

在確認代碼確實無問題之后,優先想到的是開發工具是不是也要更新成最新版,檢查更新之后發現確實有最新版,于是更新了下開發工具。

可遺憾的是即使更新到最新的版本,依舊無法顯示,但神奇的是,利用手機預覽是可以渲染成功的。

可還是比較遺憾,渲染出來的效果不是特別理想,原因還是因為部分標簽不支持的緣故。

這里簡單看了下樣式出現問題的html代碼,比如截圖中的 使用教程 標題沒有居中且顏色也不是原來的紅色。

<section style="text-align: center;white-space: normal;">
    <p style="color:#f05454;" class="active brush">
        使用教程
    </p><
/section>

代碼中是使,用 section 標簽來進行渲染的,可目前 editor 應該還不支持。

同樣的,對于文章中的代碼塊的樣式渲染也不是很理想,原因與上面一樣,不支持 code 標簽。

總結

editor 富文本編輯器還是基本能滿足需求的,但對于從第三方生成的復雜的 html 文本,支持的不是很完美。

就目前來看,目前還不能替換 towxml 組件,期待 editor 后續的更新吧。

分享至 : QQ空間
收藏
原作者: bug2048 來自: bug2048