• 本网豪情赞助商

  • login failed for display 0 ubuntuallowed_u
  • css设定文本超出一行或多行就隐藏并显示省略
  • css设定文本超出一行或多行就隐藏并显示省略
  • 微信小程序如何把接口调用成功的回调函数返回
  • CodeIgniter - 数据库的增删改查
  • php生成excel的三种方式
  • 小程序UI库推荐
  • 多个句子竖向排列
  • 美团，大众点评，58城市行政区域和商圈数据实
  • java.security.InvalidKeyException: Illega
    • h3>

    微信小程序之富文本编辑组件editor的简单使用


    文章摘要: 微信小程序之富文本编辑组件editor的简单使用 96 Jin牌码男 2019.05.31 11:06* 字数 29 阅读 500评论 0喜欢 0 image.png 官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 核心代码 如何获取内容 that.editorCtx.getConten


    时间:2019-08-08 09:40来源:未知 作者:admin 点击: 次

    文章TAG:

    微信小程序之富文本编辑组件editor的简单使用
    96  Jin牌码男 
    2019.05.31 11:06* 字数 29 阅读 500评论 0喜欢 0
     image.png
    官方文档
    https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
     
    核心代码
    如何获取内容
        that.editorCtx.getContents({
          success: function(res) {
            var content = {
              html: res.html,
              text: res.text,
              delta: res.delta,
            }
            that.showEditCtx.insertText(content)
          }
        })
    内容格式
    <p>微信小程序之扫码评分</p><p>备注说明：</p><p>① 评分规则</p><p>② 注意事项</p><p><br></p><p><br></p><p><br></p><p><br></p>
    image.png
    var that;
     
    Page({
      data: {
        content: '',
        formats: {}, // 样式
        placeholder: '开始输入...',
      },
      onLoad() {
        that = this;
      },
      // 初始化编辑器
      onEditorReady() {
        wx.createSelectorQuery().select('#editor').context(function(res) {
          that.editorCtx = res.context
     
          if (wx.getStorageSync("content")) { // 设置~历史值
            that.editorCtx.insertText(wx.getStorageSync("content")) // 注意：插入的是对象
          }
     
        }).exec()
      },
      // 返回选区已设置的样式
      onStatusChange(e) {
        // console.log(e.detail)
        const formats = e.detail
        this.setData({
          formats
        })
      },
      // 内容发生改变
      onContentChange(e) {
        // console.log("内容改变")
        // console.log(e.detail)
        // that.setData({
        //   content: e.detail
        // })
        // wx.setStorageSync("content", e.detail)
      },
      // 失去焦点
      onNoFocus(e) {
        // console.log("失去焦点")
        // console.log(e.detail)
        // that.setData({
        //   content: e.detail
        // })
        // wx.setStorageSync("content", e.detail)
      },
      // 获取内容
      clickLogText(e) {
        that.editorCtx.getContents({
          success: function(res) {
            console.log(res.html)
            wx.setStorageSync("content", res.html); // 缓存本地
            // < p > 备注说明：</p > <p>1、评分规则</p> <p>2、注意事项</p> <p>3、哈哈呵呵</p> <p><br></p><p><br></p>
          }
        })
      },
      // 清空所有
      clear() {
        this.editorCtx.clear({
          success: function(res) {
            console.log("清空成功")
          }
        })
      },
      // 清除样式
      removeFormat() {
        this.editorCtx.removeFormat()
      },
      // 记录样式
      format(e) {
        let {
          name,
          value
        } = e.target.dataset
        if (!name) return
        this.editorCtx.format(name, value)
      },
    })
    <view class="container">
     
      <view class="page-body">
        <view class='wrapper'>
          <view class='toolbar' bindtap="format">
            <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-clearedformat" bindtap="removeFormat"></i>
            <i class="iconfont icon-shanchu" bindtap="clear"></i>
          </view>
     
          <editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" bindready="onEditorReady" bindinput="onContentChange" bindblur="onNoFocus">
          </editor>
     
          <view>
            <button bindtap="clickLogText">打印结果</button>
          </view>
     
        </view>
      </view>
     
    </view>