如图效果
html 代码
这是按钮。
下面是编辑框
重点是添加 contenteditable 可编辑属性。下面是事件
data() {
return {
getTextualEditString: ‘’
}
},
methods: {
clickButton(val) { // 修改其他样式
document.execCommand(val);
},
clickTypeface(val, src){ // 修改颜色等
document.execCommand(val,false,src);
},
acquire() {
this.
e
m
i
t
(
′
g
e
t
T
e
x
t
u
a
l
E
d
i
t
S
t
r
i
n
g
′
,
d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
′
r
i
c
h
C
c
o
n
t
e
n
t
′
)
.
i
n
n
e
r
H
T
M
L
)
;
t
h
i
s
.
emit('getTextualEditString', document.getElementById('richCcontent').innerHTML); this.
emit(′getTextualEditString′,document.getElementById(′richCcontent′).innerHTML);this.emit(‘update:showtextualEdit’, false)
},
handleClose() {
this.getTextualEditString = ‘’;
this.$emit(‘update:showtextualEdit’, false)
}
},
获取数据 document.getElementById(‘richCcontent’).innerHTML