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