微信小程序中富文本編輯器的實(shí)現(xiàn)

更新時(shí)間：2022年06月11日 10:04:50 作者：camellia

富文本編輯器不同于文本編輯器，程序員可到網(wǎng)上下載免費(fèi)的富文本編輯器內(nèi)嵌于自己的網(wǎng)站或程序里。本文將詳解一下微信小程序中富文本編輯器的實(shí)現(xiàn)與使用，需要的可以參考一下

小程序也是有富文本編輯器這個(gè)控件的，別說(shuō)，之前我還真沒(méi)注意。

官方文檔

官方文檔中給出的東西倒是不多，具體的代碼示例在下圖紅框中標(biāo)注的位置：

示例代碼大概是這個(gè)樣子：

通過(guò)官方的示例，我這邊大概了解了一下微信小程序editor的使用，我這里封裝了一個(gè)自定義組件：

效果如下圖所示：

功能展示大概就是這個(gè)樣子，我這里放一下我組件的全部代碼：

myEditor.js

// api 請(qǐng)求類(lèi)
const API = require("../../request/api.js").report;
// 公共函數(shù)庫(kù)
const utils = require("../../utils/util.js");
// 加密字符
const constant = require("../../utils/constant.js");
// 雙語(yǔ)字典
const languageUtils = require("../../language/languageUtils");
// 獲取應(yīng)用實(shí)例
const app = getApp();
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    project_id: {
      type: Number,
      value: "",
    },
    //編輯器默認(rèn)提示語(yǔ)
    placeholder: {
      type: String,
      value: "開(kāi)始編輯吧...",
    },
    // 修改時(shí)顯示內(nèi)容
    richTextContents: {
      type: String,
      value: "",
    },
    // 編輯的富文本的索引
    index: {
      type: Number,
      value: 0,
    },
  },
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    // 用戶(hù)手機(jī)鍵盤(pán)得高度，大于0表示打開(kāi)了鍵盤(pán)
  },
  /**
   * 組件的方法列表
   */
  methods: {
    /**
     * @name: 編輯器初始化完成時(shí)觸發(fā)
     * @author: camellia
     * @date: 20211220
     */
    onEditorReady() {
      let self = this;
      this.triggerEvent("onEditorReady");
      // 獲取編輯器實(shí)例
      self
        .createSelectorQuery()
        .select("#editor")
        .context((res) => {
          self.editorCtx = res.context;
          self.setContents(self.properties.richTextContents); //設(shè)置富文本內(nèi)容
        })
        .exec();
    },
    /**
     * @name: 點(diǎn)擊工具欄格式化編輯文本
     * @author: camellia
     * @date: 20211220
     */
    format(e) {
      let self = this;
      let { name, value } = e.target.dataset;
      // 富文本編輯器格式化內(nèi)容方法
      self.editorCtx.format(name, value);
    },
    /**
     * @name: 工具欄選項(xiàng)選中，圖標(biāo)出現(xiàn)選中樣式
     * @author: camellia
     * @date: 20211220
     */
    onStatusChange(e) {
      let self = this;
      self.setData({
        formats: e.detail,
      });
    },
    /**
     * @name: 設(shè)置富文本內(nèi)容
     * @author: camellia
     * @date: 2021-12-23
     * @param:	rechtext	string	富文本內(nèi)容
     */
    setContents(rechtext) 
    {
      this.editorCtx.setContents({
        html: rechtext,
        success: (res) => {
          // 富文本內(nèi)容設(shè)置成功
          // console.log("[setContents success]", res);
        },
      });
    },
    /**
     * @name: 富文本編輯器輸入時(shí)，獲取值
     * @author: camellia
     * @date: 20211220
     */
    getEditorContent() 
    {
      let self = this;
      // 富文本編輯器獲取內(nèi)容方法
      self.editorCtx.getContents({
        success: (res) => {
          let array = [];
          array["html"] = res.html;
          array["index"] = self.properties.index;
          // 通過(guò)自定義事件把內(nèi)容傳到父組件
          self.triggerEvent("getEditorValue", array);
        },
      });
    },
    
  },
});

myEditor.json

{
  "component": true,
  "usingComponents": {}
}

myEditor.wxss

@import "./icon/icon.wxss";

.ql-container{
    padding: 12rpx;
    border: 1rpx solid #707070;

}
/* 工具欄 */
.toolbar {
    z-index: 999;
    box-sizing: border-box;
    padding: 0 20rpx;
    height: 100rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2rpx solid #ECECEC;
    border-left: none;
    border-right: none;
    background-color: #FFFFFF;
}
/* 工具欄點(diǎn)擊時(shí)出現(xiàn)選中樣式 */
.ql-active {
    color:  #22C704;
}

myEditor.wxml

<view class="toolbar" catchtouchend="format">
      <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i> 
      <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
      <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
      <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
      <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
      <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
      <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
      <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
      <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
</view>
<editor style="height:auto; min-height:240rpx;"  
        id="editor" 
        class="ql-container"
        bindinput="getEditorContent"
        bindready="onEditorReady"
        bindstatuschange="onStatusChange">
</editor>

以上就是微信小程序中富文本編輯器的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于小程序富文本編輯器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: