EditorTinymce 富文本编辑器（Tinymce 版本）

概述

• 官方文档：点击打开 (opens new window)
• 中文文档：点击打开 (opens new window)
• 版本号：v5.10.2

安装组件

第一步：配置 sdk 目录

import Vue from 'vue';
import { EditorTinymce } from '@polyv/polyv-ui';

Vue.use(EditorTinymce, {
  // 主程序结构所在 url
  baseUrl: 'https://s1.videocc.net/library/tinymce/v5.10.2',
});

第二步：配置插件（可选）

创建 tinymce 编辑器时，需要外部引入对应的插件，插件文件位于 tinymce 包中的 plugins 目录，组件库内部已默认配置了插件列表。

插件的配置可在全集配置，也可在组件参数中配置，在创建编辑器时会将默认插件、全局插件、组件插件的三个数组合并起来并传入到编辑器的配置中。

import Vue from 'vue';
import { EditorTinymce } from '@polyv/polyv-ui';

Vue.use(EditorTinymce, {
  plugins: [
    // 表情插件
    'emoticons',
    // 帮助插件
    'help',
  ]
});

内部默认的插件列表

export default [
  'code',
  'lists',
  'advlist',
  'autosave',
  'image',
  'link',
  'table',
  'fullscreen',
  'wordcount',
  'hr',
  'preview',

  // 手动添加的插件包
  'formatpainter',
];

第三步：配置图片上传（可选）

tinymce 的图片上传需要配置 uploadImageAction 配置项，如果没配置则不显示图片上传选项，仅显示图片链接输入，该配置项支持组件单独传入，以下是配合图片上传组件实现的上传功能示例：

import Vue from 'vue';
import { EditorTinymce, ImageUpload } from '@polyv/polyv-ui';

Vue.use(EditorTinymce, {
  uploadImageAction: async (file, props, cb) => {
    console.log(file, props);

    const url = await ImageUpload.imageUpload({
      autoFileSource: file,
      ...props,
    });

    cb(url);
  },
});

配置字体和字体大小列表（可选）

import Vue from 'vue';
import { EditorTinymce } from '@polyv/polyv-ui';

Vue.use(EditorTinymce, {
  fontFormats: [
    { title: '黑体', value: '黑体' },
    { title: '微软雅黑', value: '微软雅黑' },
  ],
  fontSizeFormats: ['12px', '14px', '16px', '32px'],
});

基础用法

<template>
  <div style="height: 500px;">
    <plv-editor-tinymce
      v-model="content"
      placeholder="请输入内容"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '<p>hellow editor tinymce</p>',
    };
  },
};
</script>

显示代码

图片上传

由于该文档不支持上传图片到服务器，以下示例上传的图片显示的都会是同一张图片。

<template>
  <div style="height: 500px;">
    <plv-editor-tinymce
      v-model="content"
      placeholder="请输入内容"
      :toolbar="toolbar"
      :tinymce-config="tinymceConfig"
      :upload-image-props="uploadImageProps"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      toolbar: ['image preview'],
      tinymceConfig: {
        menubar: false,
      },
      uploadImageProps: {
        data: { type: 'menuImage' },
        cropper: true,
        cropperTitle: '裁剪图片',
        cropperOptions: {
          fixed: false,
        },
        sizeLimit: 2 * 1024,
      },
    };
  },
};
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	String	-	-
height	编辑器高度	String	-	100%
base-url	主程序结构所在 url，即 tinymce sdk 目录	String	-	-
placeholder	占位符	String	-	-
upload-image-action	上传图片到服务器，支持全局配置	Function	-	-
upload-image-props	上传图片额外配置	Object	-	-
plugins	插件列表，支持全局配置	Array	-	-
toolbar	工具栏列表	Array	-	-
toolbar-mode	工具栏模式，详情请查看文档 (opens new window)	String	floating / sliding / scrolling / wrap	sliding
font-formats	字体列表，支持全局配置	Array<{ title, value }>	-	-
font-size-formats	字体大小列表，支持全局配置	Array	-	-
hidden-menubar	隐藏菜单栏	Boolean	-	false
tinymce-config	tinymce 编辑器配置，传入后会合并进内部的配置中	Object	-	-

Events

事件名称	说明	回调参数
change	绑定值改变时触发	新的值