解决换行后标题字体恢复的问题
因为标题是一个块级元素,所以换行效果就没了,其他的加粗等是行级元素,所以换行没事,不影响效果
且只要是标题,无论先输入文字再点标题工具条,还是先选工具条再输内容,标题栏的字都会变成h2的效果, 但是加粗功能普通字体和加粗字体就能同时存在
检查编辑器样式的触发
只要有样式被触发就会调用这个方法
@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就能获取到是哪一个内置的样式发生了改变
通过监听这个方法,来判断是否还在当前样式,如果不在就取消高亮显示
上面的方法是监听,第一个参数是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");
},