前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序之富文本编辑组件editor结合RichText进行显示

微信小程序之富文本编辑组件editor结合RichText进行显示

作者头像
专注APP开发
发布2019-11-07 16:49:54
2K0
发布2019-11-07 16:49:54
举报
文章被收录于专栏:移动大前端

image

核心代码
代码语言:javascript
复制
var that;

Page({
  data: {
    content: '',
    content_html: '',
    placeholder: '开始输入...',
    isReadOnly: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'RichText组件'
      }]
    }]
  },
  onLoad() {
    that = this;
  },
  onEditorReady() {
    // 输入~编辑框
    wx.createSelectorQuery().select('#editor').context(function(res) {
      that.editorCtx = res.context;
      console.log("初始化成功:" + wx.getStorageSync("content"))
      if (wx.getStorageSync("content")) { // 设置~历史值
        that.editorCtx.insertText(wx.getStorageSync("content")) // 注意:插入的是对象
      }
    }).exec()

  },
  // 获取内容
  onContentChange(e) {
    that.setData({
      content: e.detail,
    })
    wx.setStorageSync("content", e.detail)
  },
  // 显示结果
  clickShowText(e) {
    that.setData({
      nodes: that.data.content.html,
      content_html: that.data.content.html
    })
  },
})
代码语言:javascript
复制
<view class="container">
  <view class="page-body">
    <editor id="editor" class="ql-container" placeholder="请输入..." bindready="onEditorReady" bindinput="onContentChange">
    </editor>

    <view>
      <button bindtap="clickShowText">显示结果</button>
    </view>

    <view class="show-rich">
      <rich-text nodes="{{nodes}}"></rich-text>
    </view>
  </view>
</view>
代码语言:javascript
复制
@import "../common/lib/weui.wxss";
@import "./assets/iconfont.wxss";

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

.ql-container2 {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  /* min-height: 30vh; */
  height: auto;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.ql-active {
  color: #06c;
}

.show-rich {
  padding: 12px 15px;
  width: 100%;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 核心代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档