# 富文本
引入js
<script src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/tinymcedoc/tinymce.min.js"></script>
<script src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/tinymce/zh_CN.js"></script>
1
2
2
defineExpose({
// 获取富文本内容
getContent() {
var cnt = window.tinymce.editors[fwbid].getContent();
return cnt
},
// 获取富文本内容 文本
gettext() {
var cnt = window.tinymce.editors[fwbid].getContent({ format: 'text' });
return cnt
},
// 设置富文本内容
setContent(html) {
setTimeout(() => {
window.tinyMCE.editors[fwbid].setContent(html)
}, 500);
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
点击查看该示例的代码
<template>
<div class="pr">
<el-button type="primary" @click="crsp">插入视频</el-button>
<div :id="fwbid" class="fwbclass "></div>
</div>
</template>
<script>
const pluginse = `
undo
redo
fontsizeselect
styleselect
forecolor
lineheight
italic
bold
alignleft
aligncenter
alignright
alignjustify
removeformat
table
image
bullist
numlist
fullscreen
hr
pagebreak
preview
print
searchreplace
`
const fontsize = []
for (let i = 12; i < 100; i++) {
fontsize.push(i + 'px')
}
export default {
data() {
return {
fwbid: ""
};
},
components: {},
methods: {
crsp(){
/**
* insertContent 插入内容
*/
tinymce.editors[this.fwbid].insertContent('<video id="top_kv_pc" preload autoplay playsinline loop controlslist="nodownload" src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/%E6%A1%88%E4%BE%8B%E8%A7%86%E9%A2%91/video1673367475226.mp4" style="width:100%"></video>');
}
},
mounted() {
this.fwbid = "ids" + new Date().getTime()
setTimeout(() => {
tinymce.init({
selector: '#' + this.fwbid,
plugins: "table image link imagetools contextmenu lists advlist fullscreen hr pagebreak preview print searchreplace",
language: 'zh_CN',
toolbar: pluginse,
images_upload_url: 'https://duxinggj.com/public/Upimgfwb',
fontsize_formats: fontsize.join(' '),
});
}, 100);
},
};
</script>
<style scoped>
.fwbclass{
height: 500px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73