文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序中富文本编辑器如何实现

2023-07-02 09:01

关注

本文小编为大家详细介绍“微信小程序中富文本编辑器如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序中富文本编辑器如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

示例代码大概是这个样子:

微信小程序中富文本编辑器如何实现

通过官方的示例,我这边大概了解了一下微信小程序editor的使用,我这里封装了一个自定义组件:

效果如下图所示:

微信小程序中富文本编辑器如何实现

myEditor.js

// api 请求类const API = require("../../request/api.js").report;// 公共函数库const utils = require("../../utils/util.js");// 加密字符const constant = require("../../utils/constant.js");// 双语字典const languageUtils = require("../../language/languageUtils");// 获取应用实例const app = getApp();Component({    properties: {    project_id: {      type: Number,      value: "",    },    //编辑器默认提示语    placeholder: {      type: String,      value: "开始编辑吧...",    },    // 修改时显示内容    richTextContents: {      type: String,      value: "",    },    // 编辑的富文本的索引    index: {      type: Number,      value: 0,    },  },    data: {    // 用户手机键盘得高度,大于0表示打开了键盘  },    methods: {        onEditorReady() {      let self = this;      this.triggerEvent("onEditorReady");      // 获取编辑器实例      self        .createSelectorQuery()        .select("#editor")        .context((res) => {          self.editorCtx = res.context;          self.setContents(self.properties.richTextContents); //设置富文本内容        })        .exec();    },        format(e) {      let self = this;      let { name, value } = e.target.dataset;      // 富文本编辑器格式化内容方法      self.editorCtx.format(name, value);    },        onStatusChange(e) {      let self = this;      self.setData({        formats: e.detail,      });    },        setContents(rechtext)     {      this.editorCtx.setContents({        html: rechtext,        success: (res) => {          // 富文本内容设置成功          // console.log("[setContents success]", res);        },      });    },        getEditorContent()     {      let self = this;      // 富文本编辑器获取内容方法      self.editorCtx.getContents({        success: (res) => {          let array = [];          array["html"] = res.html;          array["index"] = self.properties.index;          // 通过自定义事件把内容传到父组件          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;}.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           id="editor"         class="ql-container"        bindinput="getEditorContent"        bindready="onEditorReady"        bindstatuschange="onStatusChange"></editor>

读到这里,这篇“微信小程序中富文本编辑器如何实现”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯