<template>
<view>
<editor id=”editor” :placeholder=”placeholder” @ready=”onEditore”></editor>
<button type=”warn” @click=”color”>变色</button>
<button type=”warn” @click=”bain”>变粗</button>
<button type=”warn” @click=”romo”>清空</button>
</view>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const placeholder =ref('开始输入…')
const editordata = ref([])
onMounted(()=>{
uni.createSelectorQuery().select('#editor').context((res) => {
editordata.value = res.context
}).exec()
})
// 使用format改变颜色
function color(){
editordata.value.format('color', 'red')
}
const qie = ref(true)
function bain(){
qie.value = !qie.value
if(qie.value == true){
editordata.value.format('font-weight', 'bold')
console.log('加粗了');
}else{
editordata.value.format('font-weight', 'normal')
console.log('没有加粗');
}
}
// 清空
function romo (){
editordata.value.clear()
}
function onEditore(){
console.log('初始化完成');
}
</script>
<style scoped>
.content{
padding: 10rpx;
// font-weight: bold;
.editor{
width: 100%;
height: 500rpx;
background-color: #ccc;
}
button{
margin-top: 10rpx;
}
}
</style>
