富文本编辑器 TinyMCE 插件 powerpaste

在使用 vue-element-admin 做后台的时候需要复制粘贴带图片的内容,这时就需要用到这个插件了。

powerpaste 下载后放到 static/tinymce4.7.5/plugins 目录下

富文本编辑器 TinyMCE 插件 powerpaste_第1张图片

接着修改下面的文件 plugins.js

富文本编辑器 TinyMCE 插件 powerpaste_第2张图片

将 plugins 里的 paste 替换成 powerpaste

相关的初始化配置:

initTinymce() {
    const _this = this
    window.tinymce.init({
    selector: `#${this.tinymceId}`,
    language: 'zh_CN',
    lineheight_formats: '1 1.5 1.75 2 3 4 5',
    font_formats: '宋体=宋体;微软雅黑=微软雅黑;Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats',
    height: this.height,
    body_class: 'panel-body ',
    object_resizing: false,
    toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
    menubar: this.menubar,
    plugins: plugins,
    end_container_on_empty_block: true,
    powerpaste_word_import: 'clean',
    code_dialog_height: 450,
    code_dialog_width: 1000,
    advlist_bullet_styles: 'square',
    advlist_number_styles: 'default',
    imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
    default_link_target: '_blank',
    link_title: false,
    automatic_uploads: true,
    init_instance_callback: editor => {
        if (_this.value) {
        editor.setContent(_this.value)
        }
        _this.hasInit = true
        editor.on('NodeChange Change KeyUp SetContent', () => {
        this.hasChange = true
        this.$emit('input', editor.getContent())
        })
    }
    })
}

plugins.js

// Any plugins you want to use has to be imported
// Detail plugins list see https://www.tinymce.com/docs/plugins/
// Custom builds see https://www.tinymce.com/download/custom-builds/

const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak powerpaste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount lineheight']

export default plugins
下载地址:

TinyMCE.rar
powerPaste.zip

你可能感兴趣的:(富文本编辑器 TinyMCE 插件 powerpaste)