unicloud云开发进阶23-项目7通过selectorQuery节点实现富文本定制

文档 uniapp.dcloud.net.cn/component/e…

定义一个toolShow变量，值为false，使编辑工具栏一开始隐藏，获取到焦点之后才显示

要想对富文本组件进行操作，需要先初始化

文档在uniapp.dcloud.net.cn/api/media/e…

onEditorReady() {
    uni.createSelectorQuery().select('#editor').context((res) => {
        this.editorCtx = res.context
    }).exec()
}

按照如下代码是没用的，还得看selectQuery文档搭配使用才行 uniapp.dcloud.net.cn/api/ui/node…

查询节点信息对象

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

不加in(this)获取不到节点

      	onEditorReady() {
      		uni.createSelectorQuery().in(this).select('.myEdit').fields({
            // 这些属性在文档里有
            size:true,
            context:true
          },res=>{
            // 返回值有宽高
            this.editorCtx = res.context
          }).exec()
      	},

给编辑器组件加点击事件

<template>
  <view class="edit">
    <!-- 标题输入框 -->
    <view class="title">
      <input type="text" placeholder="请输入标题" placeholder-class="placeholderClass"/>
    </view>
    <!-- 内容部分 -->
    <view class="content">
      <editor 
      class="myEdit"
      placeholder="写点什么..."
      show-img-size=""
      show-img-toolbar=""
      show-img-resize=""
      @ready=""
      @focus="onFocus"
      ></editor>
    </view>
    <!-- 提交按钮 -->
    <view class="btnGroup">
      <u-button type="primary" text="确定发表" disabled=""></u-button>
    </view>
    <!-- 富文本功能选择 -->
    <view class="tools" v-if="toolShow">
      <view class="item"><text class="iconfont icon-zitibiaoti"></text></view>
      <view class="item"><text class="iconfont icon-zitijiacu"></text></view>
      <view class="item"><text class="iconfont icon-zitixieti"></text></view>
      <view class="item"><text class="iconfont icon-fengexian"></text></view>
      <view class="item"><text class="iconfont icon-charutupian"></text></view>
      <view class="item"><text class="iconfont icon-duigou_kuai"></text></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        toolShow:false
      };
    },
    methods:{
      	onEditorReady() {
      		uni.createSelectorQuery().in(this).select('.myEdit').fields({
            // 这些属性在文档里有
            size:true,
            context:true
          },res=>{
            // 返回值有宽高
            this.editorCtx = res.context
          }).exec()
      	},
        // 离开焦点
      onfocus(){
        this.toolShow = true
      }
    }
  }
</script>

点击工具条，向编辑器中添加功能

在插件市场有一个jin-edit富文本插件可以用，就不用写了

在编辑器中插入一个分隔线

uniapp.dcloud.net.cn/api/media/e…

定义一个点击事件，然后在点击事件中通过上下文this.editorCtx调用API方法insertDivider(),就能实现在富文本编辑器中添加分隔线

<template>
  <view class="edit">
    <!-- 标题输入框 -->
    <view class="title">
      <input type="text" placeholder="请输入标题" placeholder-class="placeholderClass"/>
    </view>
    <!-- 内容部分 -->
    <view class="content">
      <editor 
      class="myEdit"
      placeholder="写点什么..."
      show-img-size=""
      show-img-toolbar=""
      show-img-resize=""
      @ready="onEditorReady"
      @focus="onFocus"
      ></editor>
    </view>
    <!-- 提交按钮 -->
    <view class="btnGroup">
      <u-button type="primary" text="确定发表" disabled=""></u-button>
    </view>
    <!-- 富文本功能选择 -->
    <view class="tools" v-if="toolShow">
      <view class="item"><text class="iconfont icon-zitibiaoti"></text></view>
      <view class="item"><text class="iconfont icon-zitijiacu"></text></view>
      <view class="item"><text class="iconfont icon-zitixieti"></text></view>
      <view class="item" @click="clickDivider"><text class="iconfont icon-fengexian"></text></view>
      <view class="item"><text class="iconfont icon-charutupian"></text></view>
      <view class="item"><text class="iconfont icon-duigou_kuai"></text></view>
    </view>
  </view>
</template>

      // 富文本组件初始化代码
      	onEditorReady() {
      		uni.createSelectorQuery().in(this).select('.myEdit').fields({
            // 这些属性在文档里有
            size:true,
            context:true
          },res=>{
            // 返回值有宽高
            this.editorCtx = res.context
          }).exec()
      	},
        // 添加分隔线
        clickDivider(){
          // this.editorCtx就是富文本的上下文
          this.editorCtx.insertDivider();
        },

先点到富文本编辑框中，让他获得焦点，然后点下面的小横线，编辑器中就有横线了，点一次就有一条