如图效果
html 代码
这是按钮。
<el-button type=“text” class=“contenteditableA” data-name=“justifyCenter” @click=“clickButton(‘justifyCenter’)”>居中
<el-button type=“text” class=“contenteditableA” data-name=“justifyLeft” @click=“clickButton(‘justifyLeft’)”>左对齐
<el-button type=“text” class=“contenteditableA” data-name=“indent” @click=“clickButton(‘indent’)”>添加缩进
<el-button type=“text” class=“contenteditableA” data-name=“outdent” @click=“clickButton(‘outdent’)”>去掉缩进
<el-button type=“text” class=“contenteditableB” data-name=“fontsize” data-value=“5” @click=“clickTypeface(‘fontsize’,‘5’)”>大字体
<el-button type=“text” class=“contenteditableB” data-name=“fontsize” data-value=“5” @click=“clickTypeface(‘fontsize’,‘2’)”>小字体
<el-button type=“text” class=“contenteditableB” data-name=“forecolor” data-value=“red” @click=“clickTypeface(‘forecolor’,‘red’)”>红色字体
<el-button type=“text” class=“contenteditableB” data-name=“backColor” data-value=“lightgreen” @click=“clickTypeface(‘backColor’,‘lightgreen’)”>浅绿背景
<el-button type=“text” class=“contenteditableB” data-name=“bold” @click=“clickButton(‘bold’)”>加粗
<el-button type=“text” class=“contenteditableB” data-name=“forecolor” data-value="#4F566F" @click=“clickTypeface(‘forecolor’,‘4F566F’)”>黑色
<el-button type=“text” class=“contenteditableB” data-name=“italic” @click=“clickButton(‘italic’)”>斜体
<el-button type=“text” class=“contenteditableB” data-name=“underline” @click=“clickButton(‘underline’)”>下划线
下面是编辑框
重点是添加 contenteditable 可编辑属性。
下面是事件
data() {
return {
getTextualEditString: ‘’
}
},
methods: {
clickButton(val) { // 修改其他样式
document.execCommand(val);
},
clickTypeface(val, src){ // 修改颜色等
document.execCommand(val,false,src);
},
acquire() {
this.emit(′getTextualEditString′,document.getElementById(′richCcontent′).innerHTML);this.emit(‘update:showtextualEdit’, false)
},
handleClose() {
this.getTextualEditString = ‘’;
this.$emit(‘update:showtextualEdit’, false)
}
},
获取数据 document.getElementById(‘richCcontent’).innerHTML
