您现在的位置是：首页 > vue-tinymce增加135编辑器支持

vue-tinymce增加135编辑器支持

默认 2021-01-06 23:13 共2572人围观 来源：原创
tinymce  
简介随着公众号文章辅助工具的发展，涌现出了如135编辑器这样便捷的工具，极大的方便了文章的排版，这个时候对于传统的网站后台也逐渐出现了对接135的需求。
前言：

随着公众号文章辅助工具的发展，涌现出了如135编辑器这样便捷的工具，极大的方便了文章的排版，这个时候对于传统的网站后台也逐渐出现了对接135的需求。

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

WX20210106-231137@2x.png

135图像

 

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3cn0udci9ym88

相关文章

文章评论

栏目导航

点击排行

友情链接

官方微信