unicloud云开发进阶25-项目9解决富文本标题标签不好回弹的问题

54 阅读1分钟

解决换行后标题字体恢复的问题

因为标题是一个块级元素,所以换行效果就没了,其他的加粗等是行级元素,所以换行没事,不影响效果

且只要是标题,无论先输入文字再点标题工具条,还是先选工具条再输内容,标题栏的字都会变成h2的效果, 但是加粗功能普通字体和加粗字体就能同时存在

image.png

检查编辑器样式的触发

只要有样式被触发就会调用这个方法 @statuschange

文档位置:uniapp.dcloud.net.cn/component/e…

    <!-- 内容部分 -->
    <view class="content">
      <editor 
      class="myEdit"
      placeholder="写点什么..."
      show-img-size=""
      show-img-toolbar=""
      show-img-resize=""
      @ready="onEditorReady"
      @focus="onFocus"
      @statuschange="onStatuschange"
      ></editor>
    </view>

方法: 调用方法,测试,点击工具条,就会拿到对应的目标

// 当样式发生改变时
onStatuschange(e){
    console.log(e);
},

现在,通过e.detail就能获取到是哪一个内置的样式发生了改变 image.png

通过监听这个方法,来判断是否还在当前样式,如果不在就取消高亮显示

上面的方法是监听,第一个参数是e.detail拿到的值,就是要对谁进行改变,第二个参数detail就是获取到的对象detail,第三个参数obj是通过if判断detail里有没有传过来的第一个值name

这里的obj就是页面中的data,this[obj]就是this.obj,视频中说用对象.的方式拿不到值,因为obj是一个变量,只能用数组的方式,不知道为什么这么写

        // 监听样式发生改变方法的状态
        checkStatus(name,detail,obj){
          if(detail.hasOwnProperty(name)){
            this[obj] = true;
          }else{
            this[obj] = false;
          }
        },
        // 当样式发生改变时
        onStatuschange(e){
          let detail=e.detail;
          this.checkStatus("header", detail,"headShow");
          this.checkStatus("bold", detail,"boldShow");
          this.checkStatus("italic", detail,"italicShow");
        },