vue-tinymce增加135编辑器支持

零云

发布于 2023-07-24 21:27:51

4170

发布于 2023-07-24 21:27:51

文章被收录于专栏：用户1998800的专栏用户1998800的专栏

一、引入@tinymce/tinymce-vue

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

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

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

<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用户无需上述步骤，官方已集成直接可以使用。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-01-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

tinymce