添加自定义菜单

src/components/tinymce/TinymceEditor.vue

@@ -12,119 +12,118 @@
 
 <script>
 // import axios from "axios";
-import tinymce from 'tinymce/tinymce'; //tinymce默认hidden，不引入不显示
-import Editor from '@tinymce/tinymce-vue'; //编辑器引入
-import 'tinymce/themes/silver/theme'; //编辑器主题
+import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
+import Editor from "@tinymce/tinymce-vue"; //编辑器引入
+import "tinymce/themes/silver/theme"; //编辑器主题
 // 引入编辑器插件（基本免费插件都在这儿了）
-import 'tinymce/plugins/advlist'; //高级列表
-import 'tinymce/plugins/autolink'; //自动链接
-import 'tinymce/plugins/link'; //超链接
-import 'tinymce/plugins/image'; //插入编辑图片
-import 'tinymce/plugins/lists'; //列表插件
-import 'tinymce/plugins/charmap'; //特殊字符
-import 'tinymce/plugins/media'; //插入编辑媒体
-import 'tinymce/plugins/wordcount'; // 字数统计
+import "tinymce/plugins/advlist"; //高级列表
+import "tinymce/plugins/autolink"; //自动链接
+import "tinymce/plugins/link"; //超链接
+import "tinymce/plugins/image"; //插入编辑图片
+import "tinymce/plugins/lists"; //列表插件
+import "tinymce/plugins/charmap"; //特殊字符
+import "tinymce/plugins/media"; //插入编辑媒体
+import "tinymce/plugins/wordcount"; // 字数统计
 // import Cookies from "js-cookie";
 
 const fonts = [
-  '宋体=宋体',
-  '微软雅黑=微软雅黑',
-  '新宋体=新宋体',
-  '黑体=黑体',
-  '楷体=楷体',
-  '隶书=隶书',
-  'Courier New=courier new,courier',
-  'AkrutiKndPadmini=Akpdmi-n',
-  'Andale Mono=andale mono,times',
-  'Arial=arial,helvetica,sans-serif',
-  'Arial Black=arial black,avant garde',
-  'Book Antiqua=book antiqua,palatino',
-  'Comic Sans MS=comic sans ms,sans-serif',
-  'Courier New=courier new,courier',
-  'Georgia=georgia,palatino',
-  'Helvetica=helvetica',
-  'Impact=impact,chicago',
-  'Symbol=symbol',
-  'Tahoma=tahoma,arial,helvetica,sans-serif',
-  'Terminal=terminal,monaco',
-  'Times New Roman=times new roman,times',
-  'Trebuchet MS=trebuchet ms,geneva',
-  'Verdana=verdana,geneva',
-  'Webdings=webdings',
-  'Wingdings=wingdings,zapf dingbats',
+  "宋体=宋体",
+  "微软雅黑=微软雅黑",
+  "新宋体=新宋体",
+  "黑体=黑体",
+  "楷体=楷体",
+  "隶书=隶书",
+  "Courier New=courier new,courier",
+  "AkrutiKndPadmini=Akpdmi-n",
+  "Andale Mono=andale mono,times",
+  "Arial=arial,helvetica,sans-serif",
+  "Arial Black=arial black,avant garde",
+  "Book Antiqua=book antiqua,palatino",
+  "Comic Sans MS=comic sans ms,sans-serif",
+  "Courier New=courier new,courier",
+  "Georgia=georgia,palatino",
+  "Helvetica=helvetica",
+  "Impact=impact,chicago",
+  "Symbol=symbol",
+  "Tahoma=tahoma,arial,helvetica,sans-serif",
+  "Terminal=terminal,monaco",
+  "Times New Roman=times new roman,times",
+  "Trebuchet MS=trebuchet ms,geneva",
+  "Verdana=verdana,geneva",
+  "Webdings=webdings",
+  "Wingdings=wingdings,zapf dingbats"
 ];
 export default {
-  name: 'TinymceEditor',
+  name: "TinymceEditor",
   components: {
-    Editor,
+    Editor
   },
   props: {
     //内容
     value: {
       type: String,
-      default: '',
+      default: ""
     },
     //是否禁用
     disabled: {
       type: Boolean,
-      default: false,
+      default: false
     },
     //插件
     plugins: {
       type: [String, Array],
-      default: 'advlist image lists  wordcount media', // autolink link charmap  media
+      default: "advlist image lists  wordcount media" // autolink link charmap  media
     },
     //工具栏
     toolbar: {
       type: [String, Array],
       default:
-        'undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media', //  | lists image media table
-    },
+        "undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media" //  | lists image media table
+    }
   },
   data() {
     return {
       //初始化配置
-      tinymceId: 'tinymce',
+      tinymceId: "tinymce",
       myValue: this.value,
       init: {
-        selector: '#tinymce',
-        language_url: '/tinymce/langs/zh_CN.js', //汉化路径是自定义的，一般放在public或static里面
-        language: 'zh_CN',
-        skin_url: '/tinymce/skins/ui/oxide', //皮肤
-        icons_url: '/tinymce/icons/default/icons.min.js', //图标
+        selector: "#tinymce",
+        language_url: "/tinymce/langs/zh_CN.js", //汉化路径是自定义的，一般放在public或static里面
+        language: "zh_CN",
+        skin_url: "/tinymce/skins/ui/oxide", //皮肤
+        icons_url: "/tinymce/icons/default/icons.min.js", //图标
         plugins: this.plugins, //插件
         //工具栏
         toolbar: this.toolbar,
-        toolbar_location: '/',
+        toolbar_location: "/",
         fontsize_formats:
-          '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
-        font_formats: fonts.join(';'),
+          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
+        font_formats: fonts.join(";"),
         content_style: "img {max-width:100%;}", // 图片最大的宽度,避免超出屏幕
         image_description: false,
         image_dimensions: false,
         height: 500, //高度
-        placeholder: '在这里输入文字',
-
+        placeholder: "在这里输入文字",
         branding: false, //隐藏右下角技术支持
         //图片上传
         images_upload_handler: function(blobInfo, success, failure) {
           //文件上传的formData传递，忘记为什么要用这个了
           const isAccord =
-            blobInfo.blob().type === 'image/jpeg' ||
-            blobInfo.blob().type === 'image/png' ||
-            blobInfo.blob().type === 'image/GIF' ||
-            blobInfo.blob().type === 'image/jpg' ||
-            blobInfo.blob().type === 'image/BMP';
+            blobInfo.blob().type === "image/jpeg" ||
+            blobInfo.blob().type === "image/png" ||
+            blobInfo.blob().type === "image/GIF" ||
+            blobInfo.blob().type === "image/jpg" ||
+            blobInfo.blob().type === "image/BMP";
           if (blobInfo.blob().size / 1024 / 1024 > 2) {
-            failure('上传失败，图片大小请控制在 2M 以内');
+            failure("上传失败，图片大小请控制在 2M 以内");
           } else if (blobInfo.blob().type == isAccord) {
-            failure('图片格式错误');
+            failure("图片格式错误");
           } else {
             let formData = new FormData();
             // 服务端接收文件的参数名，文件数据，文件名
-            formData.append('image-file', blobInfo.blob(), blobInfo.filename());
-            window.$_http.post('/image/upload', formData).then((res) => {
-              console.log('--upload--' + JSON.stringify(res));
+            formData.append("image-file", blobInfo.blob(), blobInfo.filename());
+            window.$_http.post("/image/upload", formData).then(res => {
+              console.log("--upload--" + JSON.stringify(res));
               success(res.data.url);
             });
           }
@@ -132,26 +131,26 @@ export default {
         file_picker_callback: function(callback, value, meta, failure) {
           //文件分类
           var filetype =
-            '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
+            ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4";
           //后端接收上传文件的地址
-          var upurl = '/demo/upfile.php';
+          var upurl = "/demo/upfile.php";
           //为不同插件指定文件类型及后端地址
           switch (meta.filetype) {
-            case 'image':
-              filetype = '.jpg, .jpeg, .png, .gif';
-              upurl = 'upimg.php';
+            case "image":
+              filetype = ".jpg, .jpeg, .png, .gif";
+              upurl = "upimg.php";
               break;
-            case 'media':
-              filetype = '.mp3, .mp4';
-              upurl = 'upfile.php';
+            case "media":
+              filetype = ".mp3, .mp4";
+              upurl = "upfile.php";
               break;
-            case 'file':
+            case "file":
             default:
           }
           //模拟出一个input用于添加本地文件
-          var input = document.createElement('input');
-          input.setAttribute('type', 'file');
-          input.setAttribute('accept', filetype);
+          var input = document.createElement("input");
+          input.setAttribute("type", "file");
+          input.setAttribute("accept", filetype);
           input.click();
           input.onchange = function() {
             var file = this.files[0];
@@ -160,56 +159,81 @@ export default {
             console.log(file.name);
             xhr = new XMLHttpRequest();
             xhr.withCredentials = false;
-            xhr.open('POST', upurl);
+            xhr.open("POST", upurl);
             xhr.onload = function() {
               var json;
               if (xhr.status != 200) {
-                failure('HTTP Error: ' + xhr.status);
+                failure("HTTP Error: " + xhr.status);
                 return;
               }
               json = JSON.parse(xhr.responseText);
-              if (!json || typeof json.location != 'string') {
-                failure('Invalid JSON: ' + xhr.responseText);
+              if (!json || typeof json.location != "string") {
+                failure("Invalid JSON: " + xhr.responseText);
                 return;
               }
               callback(json.location);
             };
             formData = new FormData();
-            formData.append('file', file, file.name);
+            formData.append("file", file, file.name);
             xhr.send(formData);
           };
         },
-      },
+        menu: {
+          file: { title: "File", items: "newdocument" },
+
+          edit: {
+            title: "Edit",
+            items: "undo redo | cut copy pastetext | selectall"
+          },
+
+          insert: { title: "Insert", items: "link image media | template hr" },
+
+          view: { title: "View", items: "visualaid" },
+
+          format: {
+            title: "Format",
+            items:
+              "bold italic underline strikethrough superscript subscript | formats | removeformat"
+          },
+
+          table: {
+            title: "Table",
+            items: "inserttable tableprops deletetable | cell row column"
+          },
+
+          tools: { title: "Tools", items: "spellchecker code" }
+        }
+      }
     };
   },
   watch: {
     //监听内容变化
     value(newValue) {
-      this.myValue = newValue == null ? '' : newValue;
+      this.myValue = newValue == null ? "" : newValue;
     },
     myValue(newValue) {
       if (this.triggerChange) {
-        this.$emit('change', newValue);
+        this.$emit("change", newValue);
       } else {
-        this.$emit('input', newValue);
+        this.$emit("input", newValue);
       }
-    },
+    }
   },
   mounted() {
     tinymce.init({});
   },
   methods: {
     onClick(e) {
-      this.$emit('onClick', e, tinymce);
+      this.$emit("onClick", e, tinymce);
     },
     //清空内容
     clear() {
-      this.myValue = '';
-    },
-  },
+      this.myValue = "";
+    }
+  }
 };
 </script>
 
 <style lang="less" scoped>
-@import '~@/styles/common/variable.less';
+@import "~@/styles/common/variable.less";
 </style>