unicloud云开发进阶24-项目8自定义富文本样式修改format

添加标题

上一节是获取节点信息，然后通过上下文上富文本中添加内容，这一节做其他内容

上一节给工具条添加的选中后变色样式没生效是没有在DOM体中写上属性名active，给哪一项写active，他就默认被选中，一刷新页面他就是蓝色的，所以，这应该是一个动态绑定的属性

<view class="item" @click="clickHead"><text class="iconfont icon-zitibiaoti  active"></text></view>

给第一项写死了一个active属性，他就默认一进入页面就是蓝色的

写点击事件，动态绑定active属性,定义一个变量headShow， 点击事件是给这个变量取反，每次点击都取反，效果就是每次点击headShow属性就在true和false之间切换

然后在DOM体中用三元表达式判断headShow的值是true还是false，如果是true就让他调用css的active属性，把字体变成蓝色，如果是false，就不做效果，

DOM结构

    <!-- 富文本功能选择 -->
    <view class="tools" v-if="toolShow">
      <view class="item" @click="clickHead">
        <text class="iconfont icon-zitibiaoti  " :class="headShow ? 'active' : ''"></text>
        </view>

变量定义

    data() {
      return {
        // 是否选中工具条其中一项
        headShow:false
      };
    },

点击事件方法：

    methods:{
      // 富文本组件初始化代码
      	onEditorReady() {
      		uni.createSelectorQuery().in(this).select('.myEdit').fields({
            // 这些属性在文档里有
            size:true,
            context:true
          },res=>{
            // 返回值有宽高
            this.editorCtx = res.context
          }).exec()
      	},
        // 添加大标题
        clickHead(){
          this.headShow = !this.headShow
        },

进入页面时不变色，如上，点击后变蓝色，如下，再次点击又恢复成黑色

效果写好之后，接下来就是做功能了

设置标题

文档位置： uniapp.dcloud.net.cn/api/media/e…

做功能还是通过上下文来调用API方法来做,如下，在点击事件中，通过上下文调用format方法，传递参数是要设置的样式的name和value，这里name就是header，value就是h1

// 设置标题
this.editorCtx.format("header", "h2")

也可以写成这样

this.editorCtx.format("header", this.headShow ? 'H2':false)

// 添加大标题
clickHead(){
    // 点击工具条变色
    this.headShow = !this.headShow
    // 设置标题
    this.editorCtx.format("header", "h1")
},

当回车之后，输入的字号就变成正常的了，不再是h1了，但是下面的工具条还在高亮显示，后面会写一个方法来解决这个问题

加粗功能

还是和上面一样，先变色，再做功能 DOM结构

<!-- 字体加粗 -->
<view class="item" @click="clickBold">
    <text class="iconfont icon-zitijiacu" :class="boldShow ? 'active' : ''"></text>
</view>

定义的变量

  // 字体加粗
  boldShow:false 

方法

        // 字体加粗
        clickBold(){
          // 点击工具条变色
          this.boldShow = !this.boldShow
          // 字体加粗
          this.editorCtx.format("bold")
        },

加粗功能换行后还是一直加粗的，跟标题不一样

字体倾斜

        <!-- 字体加粗 -->
      <view class="item" @click="clickBold">
        <text class="iconfont icon-zitijiacu" :class="boldShow ? 'active' : ''"></text>
      </view>

变量

// 字体倾斜
italicShow:false

方法

// 字体倾斜
clickItalic(){
    // 点击工具条变色
    this.italicShow = !this.italicShow
    // 字体加粗
    this.editorCtx.format("italic")
},

点击√隐藏工具栏

只需要一个点击事件，在点击事件里将是否显示工具条的值置为false

<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" @click="clickHead">
        <text class="iconfont icon-zitibiaoti  " :class="headShow ? 'active' : ''"></text>
        </view>
        <!-- 字体加粗 -->
      <view class="item" @click="clickBold">
        <text class="iconfont icon-zitijiacu" :class="boldShow ? 'active' : ''"></text>
      </view>
      <!-- 字体倾斜 -->
      <view class="item" @click="clickItalic">
        <text class="iconfont icon-zitixieti"  :class="italicShow ? 'active' : ''"></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" @click="editOk"><text class="iconfont icon-duigou_kuai"></text></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 是否显示工具条
        toolShow:false,
        // 是否选中工具条其中一项
        headShow:false,
        // 字体加粗
        boldShow:false,
        // 字体倾斜
        italicShow:false
      };
    },
    methods:{
      // 富文本组件初始化代码
      	onEditorReady() {
      		uni.createSelectorQuery().in(this).select('.myEdit').fields({
            // 这些属性在文档里有
            size:true,
            context:true,
          },res=>{
            // 返回值有宽高
            this.editorCtx = res.context
          }).exec()
      	},
        // 点击工具条的确认
        editOk(){
          this.toolShow = false;
        },
        // 字体倾斜
        clickItalic(){
          // 点击工具条变色
          this.italicShow = !this.italicShow
          // 字体倾斜
          this.editorCtx.format("italic")
        },
        // 字体加粗
        clickBold(){
          // 点击工具条变色
          this.boldShow = !this.boldShow
          // 字体加粗
          this.editorCtx.format("bold")
        },
        // 添加大标题
        clickHead(){
          // 点击工具条变色
          this.headShow = !this.headShow
          // 设置标题
          this.editorCtx.format("header", this.headShow ? 'H2':false)
        },
        // 添加分隔线
        clickDivider(){
          // this.editorCtx就是富文本的上下文
          this.editorCtx.insertDivider();
        },
        // 离开焦点
      onFocus(){
        this.toolShow = true
      }
    }
  }
</script>

输入内容，点√后，工具条隐藏，再点击输入框，工具条又出现了