Praktisches Projekt zum WeChat Mini-Programm, Rich-Text-Editor-Implementierung-Mini-Programmentwicklung-php.cn

Dieser Artikel vermittelt Ihnen relevantes Wissen über das WeChat Mini-Programm, das hauptsächlich praktische Beispiele für Rich-Text-Editoren vorstellt, einschließlich der Erstellung von Veröffentlichungsseiten, der Implementierung grundlegender Layouts, der Implementierung der Funktionen der Bearbeitungsbereich-Bedienleiste usw. Werfen wir einen Blick darauf Ich hoffe, dass der folgende Inhalt für alle hilfreich ist. 🔜 Kursiver Text, Unterstreichung, Ausrichtung

Rückgängig machen, wiederherstellen, Bilder einfügen, Funktionen löschen. Praktisches Projekt zum WeChat Mini-Programm, Rich-Text-Editor-Implementierung

2. Erstellen Sie eine Veröffentlichungsseite und implementieren Sie das Grundlayout Erstellen Sie zunächst die Veröffentlichungsseite

Artikel

und generieren Sie die Seite durch Konfiguration in

app.json

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

Nach dem Login kopieren

In article.wxml

schreiben Sie die Struktur:

<view>
  <!-- 文章类型 -->
  <view>
    <picker bindchange="bindPickerChange" model:value="{{index}}" range="{{array}}">
      <view class="picker">
        文章类型：{{objectArray[index].name}}
      </view>
    </picker>
  </view>
  <!-- 文章标题 -->
  <view>
    <input name="title" class="title" placeholder="请输入文章标题" maxlength="18" model:value="{{title}}"></input>
  </view>
  <!-- 编辑区 -->
  <view class="container">
    <view class="page-body">
      <view class=&#39;wrapper&#39;>
        <!-- 操作栏 -->
        <view class=&#39;toolbar&#39; 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>
        <!-- 文章内容区，富文本编辑器 -->
        <editor id="editor" class="ql-container" placeholder="{{placeholder}}"  showImgSize showImgToolbar showImgResize>
        </editor>
        <!-- 发布按钮 -->
        <view class="button" bindtap="formSubmit">发布</view>
      </view>
    </view>
  </view>
</view>

Nach dem Login kopieren

schreiben Sie den Grundstil:

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: &#39;Helvetica Neue&#39;, &#39;Helvetica&#39;, &#39;Arial&#39;, 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;
}

Nach dem Login kopieren

Zu diesem Zeitpunkt werden wir feststellen, dass das Symbol der mittleren Betriebsleiste nicht angezeigt wird, was wir benötigen zum

iconfont.wxss

wird im Header von .wxss

eingeführt. iconfont.wxss-Dateierfassungsadresse

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

Nach dem Login kopieren

3. Implementieren Sie die Funktion der Operationsleiste im Bearbeitungsbereich. Dieser Artikel implementiert nur die Funktion der Operationsleiste und realisiert die Rich-Text-Bearbeitung. Wenn Sie andere Artikeltypen auswählen, implementieren Sie diese bitte alleine. Es ist nicht schwer!

Zuerst müssen wir die Rich-Text-Editor-Instanz EditorContext über

wx.createSelectorQuery

abrufen. In der Seitenfunktion Page erstellen wir die Funktion

onEditorReady

, um die Instanz zu erhalten:

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

Nach dem Login kopieren

Dann Binden Sie diese Methode an das Attribut bindready des Rich-Text-Editors. Sie wird ausgelöst, nachdem die Initialisierung des Rich-Text-Editors abgeschlossen ist, wodurch die Instanz abgerufen wird.

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

Nach dem Login kopieren

3.1. Implementieren Sie Textfettung, Kursivschrift, Textunterstreichung, linke Ausrichtung, zentrierte Ausrichtung, rechte Ausrichtung

Wie ändern wir den Textstil?

Ändern Sie den Stil über die API, die von der EditorContext-Instanz bereitgestellt wird: EditorContext.format(string name, string value). name: CSS-Attribut; wert: Wert.

Wenn wir die WeChat-Applet-Entwicklungsdokumentation konsultieren, können wir sehen, dass wir zum Erreichen der oben genannten Funktionen folgende Werte von name und value benötigen:

Wie ändern wir also den Text? Stil durch Klicken auf die Schaltfläche?

Zuerst binden wir die Attribute name und value an das Icon-Tag  und geben das entsprechende For ein name und value im obigen Bild, wenn es keinen value gibt, lassen Sie es einfach leer.

Binden Sie dann das Ereignis

format

EditorContext.format

API zu ändern. <view class='toolbar' bindtap="format"> </view>
Nach dem Login kopieren
EditorContext.format(string name, string value)，进行样式修改。

name：CSS属性；value：值。

通过查阅微信小程序开发文档可知，实现上述功能，我们需要的 name 和 value的值为：

那么我们如何通过点击按钮，来修改文本样式呢？

首先我们在图标  标签上绑定name 和 value 属性，填上图标所对应上图的 name 和 value，无 value 的不填即可。
然后在父标签上绑定事件 format，通过该事件函数，使用 EditorContext.format API 进行样式修改。

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

Nach dem Login kopieren

Page 函数中的 format 函数：

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

Nach dem Login kopieren

问题：当我们点击图标时，改变了文本样式，但是图标的样式没有改变，无法提示我们文本现在的样式状态，那该怎么解决呢？

这时候我们就需要动态改变字体图标的样式了，比如点击图标后，改变颜色。

通过查阅 editor 微信小程序开发相关文档后，bindstatuschange 属性绑定的方法，会在当你通过 Context 方法改变编辑器内样式时触发，会返回选区已设置的样式。

那么我们可以在 data 中，添加 formats 对象，存储点击后的样式属性。然后在点击图标按钮时，通过 bindstatuschange 绑定的方法，得到已设置的样式存储到 formats 中；在模板渲染时，在 的 class 属性上，添加 {{formats.align === 'right' ? 'ql-active' : ''}}Seite Die format-Funktion in der Funktion:

    onStatusChange(e) {
        const formats = e.detail
        this.setData({
            formats
        })
    }

Nach dem Login kopieren

Problem: Wenn wir auf das Symbol klicken, wird der Textstil geändert, aber der Symbolstil hat sich nicht geändert, und wir können uns nicht dazu auffordern Der aktuelle Stilstatus des Textes. Wie kann man das Problem lösen? 🎜

🎜🎜Zu diesem Zeitpunkt müssen wir den Stil des Schriftsymbols dynamisch ändern, z. B. die Farbe ändern, nachdem wir auf das Symbol geklickt haben. 🎜🎜🎜Nach Rücksprache mit den 🎜editor🎜 WeChat-Applet-Entwicklungsdokumenten wird die Attributbindungsmethode 🎜bindstatuschange🎜 ausgelöst, wenn Sie den Stil im Editor über die 🎜Context🎜-Methode ändern, und gibt den eingestellten Stil zurück die Auswahl. 🎜🎜Dann können wir das 🎜formats🎜-Objekt in 🎜data🎜 hinzufügen, um die Stilattribute nach dem Klicken zu speichern. Wenn dann auf die Symbolschaltfläche geklickt wird, wird der festgelegte Stil in 🎜Formaten🎜 über die Bindungsmethode 🎜bindstatuschange🎜 gespeichert, wenn die Vorlage gerendert wird, das Attribut 🎜class🎜 von  oben. Fügen Sie {{formats.align === 'right' ? 'ql-active' : ''}} hinzu (z. B. Text auf der rechten Seite), wenn Sie auf dieses Symbol klicken, dann 🎜formats🎜 Dies Das Attribut existiert bereits in , dann fügen Sie unseren dynamischen Klassennamen 🎜ql-active🎜 hinzu, um die Symbolfarbe zu ändern. 🎜

具体实现

对 editor 标签属性 bindstatuschange 绑定方法 onStatusChange

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

Nach dem Login kopieren

    onStatusChange(e) {
        const formats = e.detail
        this.setData({
            formats
        })
    }

Nach dem Login kopieren

在图标  标签上，添加{{formats.align === 'right' ? 'ql-active' : ''}}

          <i class="iconfont icon-zitijiacu {{formats.bold ? &#39;ql-active&#39; : &#39;&#39;}}" data-name="bold"></i>
          <i class="iconfont icon-zitixieti {{formats.italic ? &#39;ql-active&#39; : &#39;&#39;}}" data-name="italic"></i>
          <i class="iconfont icon-zitixiahuaxian {{formats.underline ? &#39;ql-active&#39; : &#39;&#39;}}" data-name="underline"></i>
          <i class="iconfont icon-zuoduiqi {{formats.align === &#39;left&#39; ? &#39;ql-active&#39; : &#39;&#39;}}" data-name="align" data-value="left"></i>
          <i class="iconfont icon-juzhongduiqi {{formats.align === &#39;center&#39; ? &#39;ql-active&#39; : &#39;&#39;}}" data-name="align" data-value="center"></i>
          <i class="iconfont icon-youduiqi {{formats.align === &#39;right&#39; ? &#39;ql-active&#39; : &#39;&#39;}}" data-name="align" data-value="right"></i>

Nach dem Login kopieren

在 article.wxss 添加 ql-active 类

.ql-active {
  color: #497749;
}

Nach dem Login kopieren

3.2. 实现撤销、恢复、插入图片、删除操作

首先在  标签上绑定相应的事件：

          <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>

Nach dem Login kopieren

撤销 undo

调用 EditorContext API 即可

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

Nach dem Login kopieren

恢复 redo

同理

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

Nach dem Login kopieren

插入图片 insertImage

同理

    insertImage() {
        const that = this
        wx.chooseImage({
            count: 1,
            success: function (res) {
                wx.showLoading({
                    title: &#39;正在上传图片&#39;,
                })
                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: &#39;god&#39;
                            },
                            success: function () {
                                wx.hideLoading()
                            }
                        })
                    }
                })
            }
        })
    }

Nach dem Login kopieren

清空 clear

同理

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

Nach dem Login kopieren

【相关学习推荐：小程序学习教程】

Das obige ist der detaillierte Inhalt vonPraktisches Projekt zum WeChat Mini-Programm, Rich-Text-Editor-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!