安装

版本号 “@tinymce/tinymce-vue”: “^3.2.8”,

初始化

复制node_modules/tinymce/skins/ui下的文件夹到public/tinymce/skins

https://www.tiny.cloud/get-tiny/language-packages/网站下载语言包,复制到public/tinymce/langs文件夹

tinymce.vue

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
<template>
<editor id="tinymce" v-model="content" :init="options"
ref="tinymce" initial-value="正在初始化..."
@onInit="initEditor"></editor>
</template>
<script>
import tinymce from 'tinymce';
import Editor from '@tinymce/tinymce-vue';
// tinymce config
import TINYMCE_OPTIONS from "./config"
// themes
import "tinymce/themes/silver";
import "tinymce/icons/default/icons";
export default {
methods: {
initEditor() {}
},
created() {
this.content = this.value
this.options = {
selector: "#tinymce", //tinymce的id
language_url: "/tinymce/langs/zh_CN.js", // 语言包路径
language: "zh_CN",
toolbar_mode: 'Wrap',
preview_styles: 'font-size color',
fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
skin_url: "/tinymce/skins/oxide", //编辑器需要一个skin才能正常工作,所以要设置一个skin_url指向之前复制出来的skin文件
...TINYMCE_OPTIONS
}
},
mounted() {
// 这里要调用一下初始化
tinymce.init({});
},
}
</script>

config.js

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
74
75
76
77
78
79
80
81
82
83
84
// plugins
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";
// service
import sSelectFile from "../../services/select-file";
const TINYMCE_PLUGINS = 'preview searchreplace autolink directionality visualblocks visualchars fullscreen ' +
'image link media template code codesample table charmap hr nonbreaking insertdatetime advlist ' +
'lists wordcount imagetools textpattern autosave autoresize'

const TINYMCE_TOOLBAR =
'| fullscreen preview ' +
'| code undo redo restoredraft | cut copy paste pastetext ' +
'| forecolor backcolor bold italic underline strikethrough link codesample ' +
'| blockquote subscript superscript removeformat ' +
'| table image media charmap hr pagebreak insertdatetime ' +
'| alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter ' +
'| styleselect formatselect fontselect fontsizeselect | bullist numlist '

// 预览插件
const PREVIEW_PLUGIN_CONFIG = {
plugin_preview_width : "375",
plugin_preview_height : "812"
}

// 图片插件
const IMAGE_PLUGIN_CONFIG = {
file_picker_callback: function(callback, value, meta) {
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
sSelectFile({fileType: 'img'}).then(img => {
console.log(img)
callback(img.url);
}).catch()
}

// Provide alternative source and posted for the media dialog
if (meta.filetype == 'media') {
// callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
}
}
}

const TINYMCE_OPTIONS = {
plugins: TINYMCE_PLUGINS,
toolbar: TINYMCE_TOOLBAR,
// referrer_policy: 'no-referrer',
menubar: '',
branding: false,
autosave_ask_before_unload: false,
height: 770,
min_height: 770,
max_height: 770,
content_style: 'img {max-width:100%;display:block;};',
...PREVIEW_PLUGIN_CONFIG,
...IMAGE_PLUGIN_CONFIG
}

export default TINYMCE_OPTIONS

支持事件

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
'onActivate',
'onAddUndo',
'onBeforeAddUndo',
'onBeforeExecCommand',
'onBeforeGetContent',
'onBeforeRenderUI',
'onBeforeSetContent',
'onBeforePaste',
'onBlur',
'onChange',
'onClearUndos',
'onClick',
'onContextMenu',
'onCopy',
'onCut',
'onDblclick',
'onDeactivate',
'onDirty',
'onDrag',
'onDragDrop',
'onDragEnd',
'onDragGesture',
'onDragOver',
'onDrop',
'onExecCommand',
'onFocus',
'onFocusIn',
'onFocusOut',
'onGetContent',
'onHide',
'onInit',
'onKeyDown',
'onKeyPress',
'onKeyUp',
'onLoadContent',
'onMouseDown',
'onMouseEnter',
'onMouseLeave',
'onMouseMove',
'onMouseOut',
'onMouseOver',
'onMouseUp',
'onNodeChange',
'onObjectResizeStart',
'onObjectResized',
'onObjectSelected',
'onPaste',
'onPostProcess',
'onPostRender',
'onPreProcess',
'onProgressState',
'onRedo',
'onRemove',
'onReset',
'onSaveContent',
'onSelectionChange',
'onSetAttrib',
'onSetContent',
'onShow',
'onSubmit',
'onUndo',
'onVisualAid'