WeChat ミニプログラム実践プロジェクトリッチテキストエディターの実装-ミニプログラム開発-php.cn

この記事では、WeChat ミニプログラムに関する関連知識を提供し、公開ページの作成、基本レイアウトの実装、編集の実装など、主にリッチテキストエディターの実践例を紹介します。エリア操作バーの機能やその他の内容について、皆様のお役に立てれば幸いです。

WeChat ミニプログラム実践プロジェクトリッチテキストエディターの実装

[関連する学習の推奨事項: 小さなプログラム学習チュートリアル]

1. 効果を達成する

効果以下に示すように達成されました:

#実装された関数ポイントは次のとおりです:

#太字、斜体、下線テキスト、配置

元に戻す、復元、画像の挿入、削除機能。
2. 公開ページを作成し、基本レイアウトを実装する

最初に公開ページ

article

を作成し、app.json の構成を通じて生成します。 ページ。

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

ログイン後にコピー

article.wxml

に構造を記述します:

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

ログイン後にコピー

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: &#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;
}

ログイン後にコピー

この時点では真ん中の操作バーアイコンが表示されていないので、

article.wxss

のヘッダーにiconfont.wxssフォントアイコンを導入する必要があります。 iconfont.wxss ファイル取得アドレス

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

ログイン後にコピー

3. 編集エリアに操作バーの機能を実現する

本記事は操作バーの機能を実装し、リッチテキスト編集を実現するだけです。記事タイプは自分で実装してください。難しいことはありません。

まず、リッチテキストエディターインスタンス

EditorContext

を取得する必要があります。wx.createSelectorQuery を通じて取得します。ページ Page 関数で、インスタンスを取得するための onEditorReady 関数を作成します。

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

ログイン後にコピー

次に、このメソッドをリッチテキストの

bindready

にバインドします。 editor 属性では、リッチテキストエディターの初期化が完了した後にトリガーされ、インスタンスを取得します。

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

ログイン後にコピー

3.1. テキストの太字、斜体、テキストの下線、左揃え、中央揃え、右揃えの実装

テキストのスタイルを変更するにはどうすればよいですか?

インスタンスによって提供される API を通じてスタイルを変更します: EditorContext.format(string name, string value)。
: CSS 属性; value: 値。

name

と value の値を使用する必要があることがわかります。必要なのは:

では、ボタンをクリックしてテキストスタイルを変更するにはどうすればよいでしょうか?

まず、

属性と value 属性をアイコン <i> ラベルにバインドし、 icon 上の図の name と value に相当します。value がない場合は、空白のままにしておきます。次に、イベント

を親タグにバインドし、イベント関数を使用して、EditorContext.format API を使用してスタイルを変更します。

        <view class=&#39;toolbar&#39; 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

format 関数内関数:

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

ログイン後にコピー

問題: アイコンをクリックすると、テキストは次のようになります。スタイルは変更されましたが、アイコンのスタイルは変更されておらず、テキストの現在のスタイルのステータスを尋ねるプロンプトが表示されません。

現時点では、アイコンをクリックした後に色を変更するなど、フォントアイコンのスタイルを動的に変更する必要があります。

editor

WeChat アプレット開発に関連するドキュメントを参照した後、Context## を渡すと、bindstatuschange 属性バインディングメソッドが表示されます。このメソッドは、エディターでスタイルを変更するときにトリガーされ、選択範囲に設定されているスタイルを返します。 次に、data

に

formats オブジェクトを追加して、クリック後のスタイル属性を保存します。次に、アイコンボタンをクリックすると、設定されたスタイルが取得され、bindstatuschange バインディングメソッドを通じて formats に保存され、テンプレートがレンダリングされるときに <i># に保存されます。 ##class 属性に、{{formats.align === 'right' ? 'ql-active' : ''}} (右側のテキストなど) を追加します。このアイコンをクリックすると、formats にこの属性があり、動的クラス名 ql-active を追加してアイコンの色を変更します。

具体实现

对 editor 标签属性 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
        })
    }

ログイン後にコピー

在图标 <i> 标签上，添加{{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>

ログイン後にコピー

在 article.wxss 添加 ql-active 类

.ql-active {
  color: #497749;
}

ログイン後にコピー

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

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

          <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

调用 EditorContext API 即可

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

ログイン後にコピー

恢复 redo

同理

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

ログイン後にコピー

插入图片 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()
                            }
                        })
                    }
                })
            }
        })
    }

ログイン後にコピー

清空 clear

同理

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

ログイン後にコピー

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

以上がWeChat ミニプログラム実践プロジェクトリッチテキストエディターの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。