vue-tinymce增加135编辑器支持

2023-07-24 21:27:51 浏览数 (1)

一、引入@tinymce/tinymce-vue

import TinymceVue from '@tinymce/tinymce-vue';

二、实例化tinymce并调用135编辑器

注意里面的external_plugins表示引入自定义的135编辑器插件。

代码语言:javascript复制
<tinymce-vue
    api-key="申请一个tinymce的key"
    v-model="content"
    :init="{
        external_plugins: {
 'editor135': 'https://cdn.jsdelivr.net/gh/starideas/xyfront/libs/tinymce/plugins/editor135/plugin.js'
        },
        fixed_toolbar_container: true,
        init_instance_callback: editor => {},
        default_link_target: '_blank',
        paste_data_images: true,  // 设置为允许粘帖图片
        automatic_uploads: true,
        file_picker_types: 'file image media',
        file_picker_callback: filePickerCallback,
        images_upload_handler: imagesUploadHandler,
        language: 'zh_CN',
        theme: 'silver',
        plugins: 'editor135 bdmap media ',
        toolbar: 'formatselect fontselect editor135',
        height: 600,
        convert_urls: false,
    }">
</tinymce-vue>

三、测试

    点击工具栏的135如果没问题的化会弹窗一个窗口,窗口里就是135编辑器,在135里完成编辑后点击右侧橙色的完成编辑,会自动将内容同步到tinymce里。

    注意file_picker_callback和images_upload_handler这两个接口尽量都实现,一个是传图的一个是传媒体和其他格式文件的。基本上网上能搜到实现。

    UniAdmin用户无需上述步骤,官方已集成直接可以使用。

0 人点赞