安装

版本号 “@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'