GCLS_Page_Exercise/src/components/common/RichText.vue

<template>
  <Editor
    v-bind="$attrs"
    :id="id"
    ref="richText"
    :value="value"
    :class="['rich-text', isBorder ? 'is-border' : '']"
    :init="init"
    @input="updateValue"
    v-on="$listeners"
  />
</template>

<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';

import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver';
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min';
import 'tinymce/skins/ui/oxide/skin.min.css';
// 扩展插件
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
// import 'tinymce/plugins/code';
// import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
// import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/media'; // 插入视频插件
// import 'tinymce/plugins/template'; // 模板插件
// import 'tinymce/plugins/fullscreen'; // 全屏插件
// import 'tinymce/plugins/paste';
// import 'tinymce/plugins/preview'; // 预览插件
import 'tinymce/plugins/hr';
import 'tinymce/plugins/autoresize'; // 自动调整大小插件
import 'tinymce/plugins/ax_wordlimit'; // 字数限制插件

import { getRandomNumber } from '@/utils';

export default {
  name: 'RichText',
  components: {
    Editor
  },
  inheritAttrs: false,
  props: {
    inline: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '输入内容'
    },
    value: {
      type: String,
      required: true
    },
    height: {
      type: [Number, String],
      default: 110
    },
    isBorder: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: getRandomNumber(),
      init: {
        inline: this.inline,
        language_url: `/tinymce/langs/zh_CN.js`,
        placeholder: this.placeholder,
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        // height: this.height,
        content_css: '/tinymce/skins/content/index.css',
        min_height: 52,
        width: '100%',
        autoresize_bottom_margin: 0,
        plugins: 'link lists image hr media autoresize ax_wordlimit',
        /* eslint-disable max-len */
        toolbar:
          'fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright | bullist numlist | image media | link blockquote hr',
        menubar: false,
        branding: false,
        statusbar: false,
        ax_wordlimit_num: 500,
        ax_wordlimit_callback(editor) {
          editor.execCommand('undo');
        }
      }
    };
  },
  mounted() {
    this.addWheelEvent();
  },
  methods: {
    addText() {
      tinymce.get(this.id).selection?.setContent('<strong>some</strong>');
    },
    addWheelEvent() {
      let richText = this.$refs.richText;
      if (!richText?.$el?.nextElementSibling?.getElementsByTagName('iframe')?.length) {
        return setTimeout(this.addWheelEvent, 100);
      }
      richText.$el.nextElementSibling.getElementsByTagName('iframe')[0].contentDocument.addEventListener(
        'wheel',
        (e) => {
          if (e.ctrlKey) e.preventDefault();
        },
        { passive: false }
      );
    },
    updateValue(data) {
      this.$emit('update:value', data);
    }
  }
};
</script>

<style lang="scss" scoped>
.rich-text {
  :deep + .tox {
    .tox-sidebar-wrap {
      border: 1px solid $fill-color;
      border-radius: 4px;

      &:hover {
        border-color: #c0c4cc;
      }
    }

    &.tox-tinymce {
      border-width: 0;
      border-radius: 0;

      .tox-edit-area__iframe {
        background-color: $fill-color;
      }
    }

    &:not(.tox-tinymce-inline) .tox-editor-header {
      box-shadow: none;
    }
  }

  :deep &.is-border + .tox.tox-tinymce {
    border-width: 2px;
    border-radius: 10px;
  }
}
</style>