免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

這篇文章主要講解了“微信小程序中如何實(shí)現(xiàn)富文本編輯器”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“微信小程序中如何實(shí)現(xiàn)富文本編輯器”吧！

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供樂至網(wǎng)站建設(shè)、樂至做網(wǎng)站、樂至網(wǎng)站設(shè)計、樂至網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、樂至企業(yè)網(wǎng)站模板建站服務(wù)，10年樂至做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

1. 實(shí)現(xiàn)

實(shí)現(xiàn)的功能點(diǎn)如下：

  • 文本加粗、斜體、下劃線，對齊方式

  • 撤銷、恢復(fù)、插入圖片、刪除功能。

2. 創(chuàng)建發(fā)布頁面，實(shí)現(xiàn)基本布局

首先創(chuàng)建發(fā)布頁面 article，在 app.json 中通過配置生成頁面即可。

"pages": [
        "pages/article/article"
    ]

在 article.wxml 中，書寫結(jié)構(gòu)：

<view>
  <!-- 文章類型 -->
  <view>
    <picker bindchange="bindPickerChange" model:value="{{index}}" range="{{array}}">
      <view class="picker">
        文章類型：{{objectArray[index].name}}
      </view>
    </picker>
  </view>
  <!-- 文章標(biāo)題 -->
  <view>
    <input name="title" class="title" placeholder="請輸入文章標(biāo)題" maxlength="18" model:value="{{title}}"></input>
  </view>
  <!-- 編輯區(qū) -->
  <view class="container">
    <view class="page-body">
      <view class='wrapper'>
        <!-- 操作欄 -->
        <view class='toolbar' bindtap="format">
           <i class="iconfont icon-zitijiacu"></i>
          <i class="iconfont icon-zitixieti"></i>
          <i class="iconfont icon-zitixiahuaxian"></i>
          <i class="iconfont icon-zuoduiqi"></i>
          <i class="iconfont icon-juzhongduiqi"></i>
          <i class="iconfont icon-youduiqi"></i>
          <i class="iconfont icon-undo"></i>
          <i class="iconfont icon-redo"></i> 
          <i class="iconfont icon-charutupian"></i>
          <i class="iconfont icon-shanchu"></i>

        </view>
        <!-- 文章內(nèi)容區(qū)，富文本編輯器 -->
        <editor id="editor" class="ql-container" placeholder="{{placeholder}}"  showImgSize showImgToolbar showImgResize>
        </editor>
        <!-- 發(fā)布按鈕 -->
        <view class="button" bindtap="formSubmit">發(fā)布</view>
      </view>
    </view>
  </view>
</view>

在 article.wxss，書寫基本的樣式：

page{
    width: 740rpx;
    margin: 0 auto;
    background-color: #f9f9f9;

}

.title {
  border: 1rpx solid #f2f2f2;
  margin: 10rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
}

.picker{
  padding: 10rpx;
}

.wrapper {
  padding: 5px;
}

.iconfont {
  display: inline-block;
  padding: 8px 8px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 20px;
}

.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.ql-container {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  min-height: 30vh;
  height: auto;
  background: #fff;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
  border: 1rpx solid #f2f2f2;
  border-radius: 15rpx;
}

.button{
  width: 360rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin: auto;
  margin-top: 50rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  color: white;
  background-color: #497749!important;
}

這時我們會發(fā)現(xiàn)中間的操作欄圖標(biāo)不顯示，我們需要在 article.wxss 中頭部引入 iconfont.wxss 字體圖標(biāo)。 iconfont.wxss 文件獲取地址

@import "./assets/iconfont.wxss";

3. 實(shí)現(xiàn)編輯區(qū)操作欄的功能

首先，我們需要獲取富文本編輯器實(shí)例 EditorContext，通過 wx.createSelectorQuery 獲取，我們在頁面 Page 函數(shù)中，創(chuàng)建 onEditorReady 函數(shù)，用于獲取該實(shí)例：

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

然后將該方法綁定到富文本編輯器的 bindready 屬性上，隨著富文本編輯器初始化完成后觸發(fā)，從而獲取實(shí)例。

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

3.1. 實(shí)現(xiàn)文本加粗、斜體、文本下劃線、左對齊、居中對齊、右對齊

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

我們?nèi)绾涡薷奈谋镜臉邮侥兀?/p>

  • 通過 EditorContext 實(shí)例提供的API：EditorContext.format(string name, string value)，進(jìn)行樣式修改。

  • name：CSS屬性；value：值。

通過查閱微信小程序開發(fā)文檔可知，實(shí)現(xiàn)上述功能，我們需要的 name 和 value的值為：

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

那么我們?nèi)绾瓮ㄟ^點(diǎn)擊按鈕，來修改文本樣式呢？

  • 首先我們在圖標(biāo) <i> 標(biāo)簽上綁定name 和 value 屬性，填上圖標(biāo)所對應(yīng)上圖的 name 和 value，無 value 的不填即可。

  • 然后在父標(biāo)簽上綁定事件 format，通過該事件函數(shù)，使用 EditorContext.format API 進(jìn)行樣式修改。

        <view class='toolbar' bindtap="format">
          <i class="iconfont icon-zitijiacu  data-name="bold"></i>
          <i class="iconfont icon-zitixieti data-name="italic"></i>
          <i class="iconfont icon-zitixiahuaxian  data-name="underline"></i>
          <i class="iconfont icon-zuoduiqi  data-name="align" data-value="left"></i>
          <i class="iconfont icon-juzhongduiqi  data-name="align" data-value="center"></i>
          <i class="iconfont icon-youduiqi data-name="align" data-value="right"></i>
        </view>

Page 函數(shù)中的 format 函數(shù)：

    format(e) {
        let {
            name,
            value
        } = e.target.dataset
        if (!name) return
        this.editorCtx.format(name, value)
    },

問題：當(dāng)我們點(diǎn)擊圖標(biāo)時，改變了文本樣式，但是圖標(biāo)的樣式?jīng)]有改變，無法提示我們文本現(xiàn)在的樣式狀態(tài)，那該怎么解決呢？

  • 這時候我們就需要動態(tài)改變字體圖標(biāo)的樣式了，比如點(diǎn)擊圖標(biāo)后，改變顏色。

通過查閱 editor 微信小程序開發(fā)相關(guān)文檔后，bindstatuschange 屬性綁定的方法，會在當(dāng)你通過 Context 方法改變編輯器內(nèi)樣式時觸發(fā)，會返回選區(qū)已設(shè)置的樣式。

那么我們可以在 data 中，添加 formats 對象，存儲點(diǎn)擊后的樣式屬性。然后在點(diǎn)擊圖標(biāo)按鈕時，通過 bindstatuschange 綁定的方法，得到已設(shè)置的樣式存儲到 formats 中；在模板渲染時，在<i> 的 class 屬性上，添加 {{formats.align === 'right' ? 'ql-active' : ''}}(如文本向右)，當(dāng)你點(diǎn)擊了這個圖標(biāo)，那么 formats 中就有這個屬性了，那么就添加我們的動態(tài)類名 ql-active 改變圖標(biāo)顏色。

具體實(shí)現(xiàn)

  • 對 editor 標(biāo)簽屬性 bindstatuschange 綁定方法 onStatusChange

<editor id="editor" 
class="ql-container" 
placeholder="{{placeholder}}"  
showImgSize showImgToolbar showImgResize  
bindstatuschange="onStatusChange" 
read-only="{{readOnly}}" 
bindready="onEditorReady">
    onStatusChange(e) {
        const formats = e.detail
        this.setData({
            formats
        })
    }

  • 在圖標(biāo) <i> 標(biāo)簽上，添加{{formats.align === 'right' ? 'ql-active' : ''}}

          <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-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i>
          <i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i>
          <i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i>

  • 在 article.wxss 添加 ql-active 類

.ql-active {
  color: #497749;
}

3.2. 實(shí)現(xiàn)撤銷、恢復(fù)、插入圖片、刪除操作

首先在 <i> 標(biāo)簽上綁定相應(yīng)的事件：

          <i class="iconfont icon-undo" bindtap="undo"></i>
          <i class="iconfont icon-redo" bindtap="redo"></i> 
          <i class="iconfont icon-charutupian" bindtap="insertImage"></i>
          <i class="iconfont icon-shanchu" bindtap="clear"></i>

撤銷 undo

調(diào)用 EditorContext API 即可

    undo() {
        this.editorCtx.undo()
    }

恢復(fù) redo

同理

    redo() {
        this.editorCtx.redo()
    }

插入圖片 insertImage

同理

    insertImage() {
        const that = this
        wx.chooseImage({
            count: 1,
            success: function (res) {
                wx.showLoading({
                    title: '正在上傳圖片',
                })
                wx.cloud.uploadFile({
                    cloudPath: `news/upload/${time.formatTime(new Date)}/${Math.floor(Math.random() * 100000000)}.png`, // 上傳至云端的路徑
                    filePath: res.tempFilePaths[0], 
                    success: cover => {
                        that.editorCtx.insertImage({
                            src: cover.fileID,
                            data: {
                                id: cover.fileID,
                                role: 'god'
                            },
                            success: function () {
                                wx.hideLoading()
                            }
                        })
                    }
                })
            }
        })
    }

清空 clear

同理

    clear() {
        this.editorCtx.clear({
            success: function (res) {
                console.log("clear success")
            }
        })
    }

感謝各位的閱讀，以上就是“微信小程序中如何實(shí)現(xiàn)富文本編輯器”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對微信小程序中如何實(shí)現(xiàn)富文本編輯器這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前題目：微信小程序中如何實(shí)現(xiàn)富文本編輯器
分享地址：http://m.newbst.com/article10/jesedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、虛擬主機(jī)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)