tinymce 使用及自定义上传插件

藕粉到底要怎样弄呢

已于 2022-11-10 15:37:21 修改

阅读量2.9k

点赞数

分类专栏： tinymce vue 学习记录 vben admin 使用记录文章标签： javascript vue.js 前端 typescript 前端框架

于 2022-11-10 15:08:05 首次发布

本文链接：https://blog.csdn.net/Heixiu6/article/details/127788511

版权

vben admin 使用记录同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

vue 学习记录

3 篇文章 1 订阅

订阅专栏

tinymce

2 篇文章 0 订阅

订阅专栏

使用框架及语言：vue3 + ts + ant design vue + vben admin

在vben admin框架中有封装使用 tinymce 且重写了上传组件，但是与项目要求的上传不一致，特记录使用中要注意的点以便下次遇到可以快速开始。
项目要求，使用tinymce 自定义上传插件使文件上传不是从本地上传，而是从已经做好的文件管理功能（已经上传到服务器中的文件）中选择上传。

项目中引入tinymce 及配置

安装

npm :
npm install @tinymce/tinymce-vue -S
npm install tinymce -S
yarn :
yarn add @tinymce/tinymce-vue
yarn add tinymce

在public目录下新建tinymce目录,将中文包和skins目录(node_modules->tinymce->skins)放到该目录

tinymce官网下载中文包
在这里插入图片描述
文件配置目录：

封装组件

Vben admin 框架自己有封装，我这里是把它封装的删掉之后用的根据网上找的来写得，没有封装的可以新建文件夹封装:

<template>
  <div>
    <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId" />
    <FileModal @register="registerModal" @success="handleSuccess" :multiple="true" />
    <!--FileModal 是封装的文件管理组件  -->
  </div>
</template>

<script setup lang="ts">
  //JS部分
  //在js中引入所需的主题和组件
  import tinymce from 'tinymce/tinymce';
  // import 'tinymce/skins/content/default/content.css'; //引入后全局页面样式收影响
  import Editor from '@tinymce/tinymce-vue';
  import 'tinymce/themes/silver';
  import 'tinymce/themes/silver/theme';
  import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
  import 'tinymce/models/dom'; // 这里是个坑 一定要引入
  //在TinyMce.vue中接着引入相关插件
  import 'tinymce/icons/default/icons';
  import 'tinymce/plugins/table'; // 插入表格插件
  import 'tinymce/plugins/lists'; // 列表插件
  import 'tinymce/plugins/wordcount'; // 字数统计插件
  import 'tinymce/plugins/code'; // 源码
  import 'tinymce/plugins/codesample';
  import 'tinymce/plugins/fullscreen'; //全屏
  import 'tinymce/plugins/advlist'; //高级列表
  import 'tinymce/plugins/anchor'; //锚点
  import 'tinymce/plugins/autolink'; //自动链接
  import 'tinymce/plugins/charmap'; //特殊字符
  import 'tinymce/plugins/directionality'; //文字方向
  import 'tinymce/plugins/help'; //帮助
  import 'tinymce/plugins/importcss'; //引入css
  import 'tinymce/plugins/insertdatetime'; //插入日期时间
  import 'tinymce/plugins/nonbreaking'; //插入不间断空格
  import 'tinymce/plugins/pagebreak'; //插入分页符
  import 'tinymce/plugins/preview'; //预览
  import 'tinymce/plugins/quickbars'; //快速工具栏
  import 'tinymce/plugins/searchreplace'; //查找替换
  import 'tinymce/plugins/visualblocks'; //显示元素范围
  import 'tinymce/plugins/visualchars'; //显示不可见字符
  import 'tinymce/plugins/link'; //显示不可见字符

  //接下来定义编辑器所需要的插件数据
  import { reactive, ref } from 'vue';
  import { onMounted, defineEmits, watch } from '@vue/runtime-core';
  import axios from 'axios';
  import { getToken } from '/@/utils/auth';
  import { message } from 'ant-design-vue';
  import { getAppEnvConfig } from '/@/utils/env';
  import FileModal from '/@/attachment_web/views/FileModal/index.vue';
  import { getFileType } from '/@/utils/file/fileType';
  import { useModal } from '/@/components/Modal';
  const token = getToken();
  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  // import { updateImg } from '@/api/order/order'
  const emits = defineEmits(['change']);
  // 文件选择框
  const [registerModal, { openModal, closeModal }] = useModal();
  let editors = ref<Nullable<Editor>>(null);
  //这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
  const props = defineProps({
    value: {
      type: String,
      default: () => {
        return '';
      },
    },
    baseUrl: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        'nonbreaking visualblocks visualchars pagebreak lists table code fullscreen anchor autolink charmap searchreplace preview insertdatetime help advlist directionality quickbars link codesample',
    }, //必填
    toolbar: {
      type: [String, Array],
      default: `undo redo |  bold italic underline strikethrough |formatselect fontselect fontsizeselect |alignleft aligncenter alignright alignjustify | bullist numlist outdent indent lists| Upload fullscreen | forecolor backcolor |
       searchreplace lineheight link table pagebreak code codesample 
         anchor charmap preview insertdatetime quickbars removeformat  subscript superscript selectall`,
    }, //必填
  });
  //用于接收外部传递进来的富文本
  const myValue = ref(props.value);
  const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''));
  //定义一个对象 init初始化
  const htmlRoot = document.getElementById('htmlRoot');
  const isDark = htmlRoot?.getAttribute('data-theme') === 'dark';
  const init = reactive({
    selector: '#' + tinymceId.value, //富文本编辑器的id,
    language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
    language: 'zh_CN', //语言
    skin_url: (isDark && '/tinymce/skins/ui/oxide-dark') || '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
    promotion: false,
    custom_elements: 'style,html,head,body,title,meta', //允许自定义标签存在
    setup: function (editor) {
      // 注册icon 方法
      // editor.ui.registry.addIcon(
      //   'shopping-cart',
      //   `<svg viewBox="0 0 1024 1024" data-icon="shopping-cart" width="1.5em" height="1.5em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M922.9 701.9H327.4l29.9-60.9 496.8-.9c16.8 0 31.2-12 34.2-28.6l68.8-385.1c1.8-10.1-.9-20.5-7.5-28.4a34.99 34.99 0 0 0-26.6-12.5l-632-2.1-5.4-25.4c-3.4-16.2-18-28-34.6-28H96.5a35.3 35.3 0 1 0 0 70.6h125.9L246 312.8l58.1 281.3-74.8 122.1a34.96 34.96 0 0 0-3 36.8c6 11.9 18.1 19.4 31.5 19.4h62.8a102.43 102.43 0 0 0-20.6 61.7c0 56.6 46 102.6 102.6 102.6s102.6-46 102.6-102.6c0-22.3-7.4-44-20.6-61.7h161.1a102.43 102.43 0 0 0-20.6 61.7c0 56.6 46 102.6 102.6 102.6s102.6-46 102.6-102.6c0-22.3-7.4-44-20.6-61.7H923c19.4 0 35.3-15.8 35.3-35.3a35.42 35.42 0 0 0-35.4-35.2zM305.7 253l575.8 1.9-56.4 315.8-452.3.8L305.7 253zm96.9 612.7c-17.4 0-31.6-14.2-31.6-31.6 0-17.4 14.2-31.6 31.6-31.6s31.6 14.2 31.6 31.6a31.6 31.6 0 0 1-31.6 31.6zm325.1 0c-17.4 0-31.6-14.2-31.6-31.6 0-17.4 14.2-31.6 31.6-31.6s31.6 14.2 31.6 31.6a31.6 31.6 0 0 1-31.6 31.6z"></path></svg>`,
      // );
      // 注册一个自定义的按钮
      editor.ui.registry.addButton('Upload', {
        icon: `upload`,
        tooltip: '插入文件',
        onAction: function (_) {
          editors.value = editor;
          openModal(true);
        },
      });
    },
    height: 400, //编辑器高度
    menubar: true, //顶部菜单栏显示
    image_dimensions: false, //去除宽高属性
    plugins: props.plugins, //这里的数据是在props里面就定义好了的
    toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
    toolbar_mode: 'sliding',
    fontsize_formats: '11px 12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
    font_formats:
      '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
    // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
    paste_webkit_styles: 'all',
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    auto_focus: true,
    paste_auto_cleanup_on_paste: false,
    content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
    branding: false, //tiny技术支持信息是否显示
    paste_data_images: false, //图片是否可粘贴
  });

  // 文件选择方法
  function handleSuccess(value) {
    const { urls } = value;
    let addvalue = ``;
    for (let i = 0; i < urls.length; i++) {
      if (getFileType(urls[i]) == 'picture') {
        addvalue += `<img width='360px' src='${VITE_GLOB_API_URL || ''}/xx/${urls[i]}'/>`;
      } else if (getFileType(urls[i]) == 'video') {
        addvalue += `<video controls >
                <source src='${VITE_GLOB_API_URL || ''}/xx/${urls[i]}' type="video/mp4" />
              </video>`;
      } else if (getFileType(urls[i]) == 'audio') {
        addvalue += `<audio controls style="width: 100%" src='${VITE_GLOB_API_URL || ''}/xx/${
          urls[i]
        }'></audio>`;
      } else {
        message.warning('暂不支持该类型文件上传，请重新选择', 2);
      }
    }
    editors.value.insertContent(addvalue || '');
    closeModal();
  }

  //监听外部传递进来的的数据变化
  watch(
    () => props.value,
    () => {
      myValue.value = props.value;
      emits('change', myValue.value);
    },
  );
  //监听富文本中的数据变化
  watch(
    () => myValue.value,
    () => {
      emits('change', myValue.value);
    },
  );
  //在onMounted中初始化编辑器
  onMounted(() => {
    tinymce.init({});
  });
</script>

使用：

h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      })
// 这是在vben admin 框架中使用的版本

或者

<Tinymce :value="value" @onChange="onChange" />

以下记录在使用tinymce 中遇到的问题

1.自定义上传插件（按钮）

在 init 中自定义按钮，然后在toolbar 中将按钮引入，onAction中写对应需求方法即可

setup: function (editor) {
      // 注册一个自定义的按钮
      editor.ui.registry.addButton('Upload', {
        icon: `upload`,
        tooltip: '插入文件',
        onAction: function (_) {
          editors.value = editor;
          openModal(true);
        },
      });
    },

toolbar: {
      type: [String, Array],
      default: `Upload`,
    },

隐藏快速工具栏 quickbars

因为自定义了上传组件而光标处弹出的快速工具栏中的图片上传还是调用的本地上传，就要把它去掉，后面发现是引入了快速工具栏插件 quickbars ，解决办法就是不要引用它就好了！

  import 'tinymce/plugins/quickbars'; //快速工具栏

藕粉到底要怎样弄呢

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
tinymce 使用及自定义上传插件

tinymce 使用及自定义上传插件
复制链接

扫一扫

专栏目录

tinymce 使用及自定义上传插件

项目中引入tinymce 及配置

安装

在public目录下新建tinymce目录,将中文包和skins目录(node_modules->tinymce->skins)放到该目录

封装组件

使用：

以下记录在使用tinymce 中遇到的问题

1.自定义上传插件（按钮）

隐藏快速工具栏 quickbars

“相关推荐”对你有帮助么？