微信小程序(二十四)微信小程序富文本编辑器editor

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

小程序也是有富文本编辑器这个控件的,别说,之前我还真没注意。

官方文档:

developers.weixin.qq.com/miniprogram…

官方文档中给出的东西倒是不多,具体的代码示例在下图红框中标注的位置:

image.png

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


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

效果如下图所示:

功能展示大概就是这个样子,我这里放一下我组件的全部代码:

myEditor.js

javascript

复制代码

// 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: {
    /**
     * @name: 编辑器初始化完成时触发
     * @author: camellia
     * @date: 20211220
     */
    onEditorReady() {
      let self = this;
      this.triggerEvent("onEditorReady");
      // 获取编辑器实例
      self
        .createSelectorQuery()
        .select("#editor")
        .context((res) => {
          self.editorCtx = res.context;
          self.setContents(self.properties.richTextContents); //设置富文本内容
        })
        .exec();
    },
    /**
     * @name: 点击工具栏格式化编辑文本
     * @author: camellia
     * @date: 20211220
     */
    format(e) {
      let self = this;
      let { name, value } = e.target.dataset;
      // 富文本编辑器格式化内容方法
      self.editorCtx.format(name, value);
    },
    /**
     * @name: 工具栏选项选中,图标出现选中样式
     * @author: camellia
     * @date: 20211220
     */
    onStatusChange(e) {
      let self = this;
      self.setData({
        formats: e.detail,
      });
    },
    /**
     * @name: 设置富文本内容
     * @author: camellia
     * @date: 2021-12-23
     * @param:  rechtext  string  富文本内容
     */
    setContents(rechtext) 
    {
      this.editorCtx.setContents({
        html: rechtext,
        success: (res) => {
          // 富文本内容设置成功
          // console.log("[setContents success]", res);
        },
      });
    },
    /**
     * @name: 富文本编辑器输入时,获取值
     * @author: camellia
     * @date: 20211220
     */
    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

json

复制代码

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

myEditor.wxss

css

复制代码

@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

ini

复制代码

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

上方演示的图片插入功能的代码这里没有展示,下一篇中会详细的讲解图片上传

有好的建议,请在下方输入你的评论。

欢迎访问个人博客:guanchao.site

欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”

目录
相关文章
|
13天前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
15天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1067 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
5月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
293 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
7月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
604 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
8月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
420 3
|
8月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
578 8
|
8月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2433 12
|
12月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2894 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
15天前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。

热门文章

最新文章