tinyMce编辑器的使用（本地引用的方式）

 本地引用，可以免费使用，没有次数限制

 项目存放位置：

index.html页面：

<!--tinymce编辑器 -->
<script src="<%= BASE_URL %>tinymce/tinymce.min.js" type="text/javascript"></script>  

 tinyMce.vue组件页面内容

<template>
  <div>
    <textarea :id="tinymceId"></textarea>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tinymceId:
        "vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""),
      Editor: null,
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.Editor = window.tinymce.init({
        // 默认配置
        // 挂载的DOM对象
        selector: `#${this.tinymceId}`,
        //language_url: "../../../public/tinymce/langs/zh_CN.js",
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN", //注意大小写
        branding: false,
        //base_url:"/public/tinymce",
        // 扩展插件
        plugins:
          "print preview searchreplace visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime lists wordcount textpattern help emoticons autosave autoresize directionality autolink",
        toolbar1:
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | ltr rtl | styleselect  fontselect  | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs ",

        // toolbar2:
        //   "| styleselect  fontselect  | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
        //height: 650, //编辑器高度
        // width: 1000,
        // toolbar_location: 'top',
        // menubar: false,
        min_height: 920,
        statusbar: false, //影藏状态栏指的是编辑器最底下、左侧显示dom信息
        //fixed_toolbar_container: '#mytoolbar',
        toolbar_sticky: true,
        content_css: "/tinymce/css/tinyMceReset.css",//载入自定义样式表
        /*content_css: [ //可设置编辑区内容展示的css，谨慎使用
        '/static/reset.css',
        '/static/ax.css',
        '/static/css.css',
    ],*/
        fontsize_formats: "12px 14px 16px 18px 24px 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;",
        link_list: [
          { title: "预置链接1", value: "http://www.tinymce.com" },
          { title: "预置链接2", value: "http://tinymce.ax-z.cn" },
        ],
        image_list: [
          {
            title: "预置图片1",
            value: "https://www.tiny.cloud/images/[email protected]",
          },
          {
            title: "预置图片2",
            value: "https://www.baidu.com/img/bd_logo1.png",
          },
        ],
        image_class_list: [
          { title: "None", value: "" },
          { title: "Some class", value: "class-name" },
        ],
        importcss_append: true,
        //自定义文件选择器的回调内容
        file_picker_callback: function (callback, value, meta) {
          if (meta.filetype === "file") {
            callback("https://www.baidu.com/img/bd_logo1.png", {
              text: "My text",
            });
          }
          if (meta.filetype === "image") {
            callback("https://www.baidu.com/img/bd_logo1.png", {
              alt: "My alt text",
            });
          }
          if (meta.filetype === "media") {
            callback("movie.mp4", {
              source2: "alt.ogg",
              poster: "https://www.baidu.com/img/bd_logo1.png",
            });
          }
        },
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
        paste_data_images: true, //允许拖拽，粘贴图片到编辑器
        //images_file_types: 'jpeg,jpg,png,gif,bmp,webp',//允许拖拽，粘贴图片到编辑器的格式

        init_instance_callback: function (editor) {
          editor.on("ExecCommand", function (e) {
            console.log("The " + e.command + " command was fired.");
          });

          //内容变化的事件注册
          // editor.on("NodeChange", function (element, parents, selectionChange) {
          //   console.log("@@@NodeChange@@@", element, parents, selectionChange);
          // });

          //Fired before a command is executed.
          editor.on("BeforeExecCommand", function (command, ui, value) {
            console.log("@@@BeforeExecCommand@@@", command, ui, value);
            if (command == "mcePreview") {
              return false;
            }
            if (command == "mcePrint") {
              console.log(111);
            }
          });
          editor.on("SetContent", function (content, format, paste, selection) {
            var spanDoc = tinymce.activeEditor.dom.select(".tinyMceNote");
            for (var i = 0; i < spanDoc.length; i++) {}
          });

          //可以注册事件的列表信息参考
          //https://www.tiny.cloud/docs/advanced/events/#editorcoreevents

          // 编辑器内容发生变化时
          editor.on("change", function (e) {
            console.log("the event object ", e);
          });
        },

        // 粘贴内容格式处理
        paste_preprocess: function (plugin, args) {
          //args.content = "helloworld";
          console.log("args.content", args.content);
          console.log("args.node", args);

          args.content = args.content.replace(/&lt;/g, "<");
          args.content = args.content.replace(/&gt;/g, ">");
          args.content = args.content.replace(/&quot;/g, "'");

          args.content = args.content.replace(/position: absolute/g, "");
          args.content = args.content.replace(/position: fixed/g, "");
          args.content = args.content.replace(/position: relative/g, "");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>