fix 编辑器改造

hookehuyr
Commit 2215e7ae05a0fcbf8bd6642f8316e3a6d6215821 2215e7ae 1 parent ec8659d0
Showing 5 changed files with 132 additions and 85 deletions
index.html
package.json
src/components/TEditor/index.vue
src/views/test.vue
yarn.lock
--- a/index.html
View file @2215e7a
+++ b/index.html
View file @2215e7a
+<!--
+ * @Date: 2023-02-13 14:56:34
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-07-12 16:49:21
+ * @FilePath: /data-table/index.html
+ * @Description: 文件描述
+-->
 <!DOCTYPE html>
 <html lang='zh'>
 <head>
@@ -10,6 +17,7 @@
 </head>
 <body>
   <div id="app"></div>
+  <script src="https://cdn.ipadbiz.cn/custom_form/tinymce/tinymce.min.js"></script>
   <script type="module" src="/src/main.js"></script>
 </body>
 </html>
--- a/package.json
View file @2215e7a
+++ b/package.json
View file @2215e7a
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@dedisuryadi/json-form-data": "^0.1.1",
-    "@tinymce/tinymce-vue": "^5",
+    "@tinymce/tinymce-vue": "4.0.7",
     "@vant/area-data": "^1.3.1",
     "@vant/touch-emulator": "^1.4.0",
     "@vitejs/plugin-legacy": "^1.8.2",
@@ -56,7 +56,7 @@
     "moment": "^2.29.3",
     "mui-player": "^1.7.0",
     "sha1": "^1.1.1",
-    "tinymce": "^7.2.1",
+    "tinymce": "5.10.9",
     "typescript": "^4.7.3",
     "uuid": "^8.3.2",
     "vant": "^4.9.1",
--- a/src/components/TEditor/index.vue
View file @2215e7a
+++ b/src/components/TEditor/index.vue
View file @2215e7a
 <!--
  * @Date: 2024-07-12 13:28:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-12 14:20:07
+ * @LastEditTime: 2024-07-12 17:22:36
  * @FilePath: /data-table/src/components/TEditor/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div style="height: 100%; overflow: hidden">
+  <div style="height: 100%; overflow: hidden;">
     <editor
       api-key="no-api-key"
         v-model="myValue"
-        :init="init"
+        :init="tinymceOptions"
-        :enabled="enabled"
         :id="tinymceId"
     ></editor>
   </div>
@@ -20,38 +19,38 @@
 <script setup>
 import {computed, reactive, watch, ref, nextTick, onMounted} from "vue"; //全屏
-import tinymce from "tinymce/tinymce";
+// import tinymce from "tinymce/tinymce";
 // import "tinymce/skins/content/default/content.css";
 import Editor from "@tinymce/tinymce-vue";
-import "tinymce/icons/default/icons";
+// import "tinymce/icons/default/icons";
-import "tinymce/models/dom"; // 一定要引入
+// import "tinymce/models/dom"; // 一定要引入
-import "tinymce/themes/silver"; // 界面UI主题
+// import "tinymce/themes/silver"; // 界面UI主题
-import "tinymce/plugins/image";
+// import "tinymce/plugins/image";
-import "tinymce/plugins/table";
+// import "tinymce/plugins/table";
-import "tinymce/plugins/lists"; // 列表插件
+// import "tinymce/plugins/lists"; // 列表插件
-import "tinymce/plugins/wordcount"; // 文字计数
+// import "tinymce/plugins/wordcount"; // 文字计数
-import "tinymce/plugins/preview"; // 预览
+// import "tinymce/plugins/preview"; // 预览
-import "tinymce/plugins/emoticons"; // emoji表情
+// import "tinymce/plugins/emoticons"; // emoji表情
-import "tinymce/plugins/emoticons/js/emojis.js"; //必须引入这个文件才有表情图库
+// import "tinymce/plugins/emoticons/js/emojis.js"; //必须引入这个文件才有表情图库
-import "tinymce/plugins/code"; // 编辑源码
+// import "tinymce/plugins/code"; // 编辑源码
-import "tinymce/plugins/link"; // 链接插件
+// import "tinymce/plugins/link"; // 链接插件
-import "tinymce/plugins/advlist"; //高级列表
+// import "tinymce/plugins/advlist"; //高级列表
-import "tinymce/plugins/codesample"; //代码示例
+// import "tinymce/plugins/codesample"; //代码示例
-import "tinymce/plugins/autoresize"; // 自动调整编辑器大小
+// import "tinymce/plugins/autoresize"; // 自动调整编辑器大小
-import "tinymce/plugins/quickbars"; // 光标处快捷提示
+// import "tinymce/plugins/quickbars"; // 光标处快捷提示
-import "tinymce/plugins/nonbreaking"; //插入不间断空格
+// import "tinymce/plugins/nonbreaking"; //插入不间断空格
-import "tinymce/plugins/searchreplace"; //查找替换
+// import "tinymce/plugins/searchreplace"; //查找替换
-import "tinymce/plugins/autolink"; //自动链接
+// import "tinymce/plugins/autolink"; //自动链接
-import "tinymce/plugins/directionality"; //文字方向
+// import "tinymce/plugins/directionality"; //文字方向
-import "tinymce/plugins/visualblocks"; //显示元素范围
+// import "tinymce/plugins/visualblocks"; //显示元素范围
-import "tinymce/plugins/visualchars"; //显示不可见字符
+// import "tinymce/plugins/visualchars"; //显示不可见字符
-import "tinymce/plugins/charmap"; // 特殊符号
+// import "tinymce/plugins/charmap"; // 特殊符号
-import "tinymce/plugins/nonbreaking"; //插入不间断空格
+// import "tinymce/plugins/nonbreaking"; //插入不间断空格
-import "tinymce/plugins/insertdatetime"; //插入日期时间
+// import "tinymce/plugins/insertdatetime"; //插入日期时间
-import "tinymce/plugins/importcss"; //引入自定义样式的css文件
+// import "tinymce/plugins/importcss"; //引入自定义样式的css文件
-import "tinymce/plugins/accordion"; // 可折叠数据手风琴模式
+// import "tinymce/plugins/accordion"; // 可折叠数据手风琴模式
-import "tinymce/plugins/anchor"; //锚点
+// import "tinymce/plugins/anchor"; //锚点
-import "tinymce/plugins/fullscreen";
+// import "tinymce/plugins/fullscreen";
 const emits = defineEmits(["update:modelValue", "setHtml"]);
@@ -104,13 +103,13 @@ const tinymceId = ref(
 //定义一个对象 init初始化
-const init = reactive({
+const init = {
   selector: "#" + tinymceId.value, //富文本编辑器的id,
   // language_url: "/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目
-  language_url: "https://cdn.ipadbiz.cn/custom_form/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目
+  // language_url: "https://cdn.ipadbiz.cn/custom_form/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目
   language: "zh_CN",
-  // skin_url: "/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
+  skin_url: "/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
-  skin_url: "https://cdn.ipadbiz.cn/custom_form/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
+  // skin_url: "https://cdn.ipadbiz.cn/custom_form/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
   editable_root: props.editable_root,
   height: 600,
   branding: false, // 是否禁用“Powered by TinyMCE”
@@ -164,35 +163,75 @@ const init = reactive({
   // setup: function (editor) {
   // },
   //图片上传  -实列 具体请根据官网补充-
-  images_upload_handler: function (blobInfo, progress) {
+  // images_upload_handler: function (blobInfo, progress) {
-    new Promise((resolve, reject) => {
+  //   new Promise((resolve, reject) => {
-      let file = blobInfo.blob();
+  //     let file = blobInfo.blob();
-      if (file.size / 1024 / 1024 > 200) {
+  //     if (file.size / 1024 / 1024 > 200) {
-        reject({
+  //       reject({
-          message: "上传失败，图片大小请控制在 200M 以内",
+  //         message: "上传失败，图片大小请控制在 200M 以内",
-          remove: true,
+  //         remove: true,
-        });
+  //       });
-      }
+  //     }
-        const formData = new FormData();
+  //       const formData = new FormData();
-        formData.append("file", file);
+  //       formData.append("file", file);
-        console.log( formData)
+  //       console.log( formData)
-        axios.post("/api/upload/upload", formData, {
+  //       axios.post("/api/upload/upload", formData, {
-          headers: {
+  //         headers: {
-            "Content-Type": "multipart/form-data",
+  //           "Content-Type": "multipart/form-data",
-          },
+  //         },
-          onUploadProgress: (progressEvent) => {
+  //         onUploadProgress: (progressEvent) => {
-            progress(
+  //           progress(
-                Math.round((progressEvent.loaded / progressEvent.total) * 100)
+  //               Math.round((progressEvent.loaded / progressEvent.total) * 100)
-            );
+  //           );
-          },
+  //         },
-        }).then((res) => {
+  //       }).then((res) => {
-              resolve(res.data.url);
+  //             resolve(res.data.url);
-        })
+  //       })
-        .catch()
+  //       .catch()
-    });
+  //   });
-  },
+  // },
-});
+};
+
+/*const tinymceOptions = {
+  // selector: selector,
+  language: 'zh_CN',
+  // 插件列表：https://www.tiny.cloud/docs/plugins/opensource/
+  // image 插件的使用示例：https://www.tiny.cloud/docs/demo/file-picker/
+  // plugins: 'searchreplace autoresize link image code',
+  plugins: 'searchreplace autoresize link image code table',
+  autoresize_bottom_margin: 100,
+  image_title: true,
+  menubar: 'edit view insert format tools',
+  // fontselect fontsizeselect
+  toolbar: 'bold italic table',
+  width: '100vw',
+  paste_data_images: false, //允许粘贴图像
+  min_height: 300,
+  // file_picker_callback: function (cb, value, meta) {
+  //   var input = document.createElement('input');
+  //   input.setAttribute('type', 'file');
+  //   if (meta.filetype == 'image') { // 图片上传控件的点击事件
+  //     input.setAttribute('accept', 'image/~');
+  //   }
+  //   input.onchange = function () {
+  //     upload({
+  //       input,
+  //       onAdd: function (images) {
+  //         cb(images[0].src, { title: images[0].name });
+  //       },
+  //     });
+  //   };
+  //   input.click();
+  // },
+  // init_instance_callback: function (editor) {
+  //   editor.on('click', function (e) {
+  //     // tinymce 使用 <iframe> 实现功能，当点击 tinymce 的输入框时应该让表单设计器选中对应的字段，
+  //     // 所以需要把点击事件转发给 iframe 外面的 textarea
+  //     document.getElementById(editor.id).click();
+  //   });
+  // },
+}*/
 // 外部传递进来的数据变化
 const myValue = computed({
@@ -234,7 +273,7 @@ watch(
 //初始化编辑器
 onMounted(() => {
-  tinymce.init({});
+  // tinymce.init({});
 });
 // 设置值
--- a/src/views/test.vue
View file @2215e7a
+++ b/src/views/test.vue
View file @2215e7a
 <template>
   <div class="tinymce-box">
-    <TEditor ref="refEdit" ></TEditor>
+    <TEditor ref="refEdit" readonly ></TEditor>
     <div @click="getValue">获取内容</div>
+    <div @click="setValue">设置内容</div>
   </div>
 </template>
@@ -14,10 +15,14 @@
   const getValue = () => {
     console.warn(refEdit.value.handleGetContent());
   }
+
+  const setValue = () => {
+    refEdit.value.handleSetContent('<p>test</p>')
+  }
 </script>
 <style>
 .tinymce-box {
-  width: 200px;
+  width: 100%;
 }
 </style>
--- a/yarn.lock
View file @2215e7a
+++ b/yarn.lock
View file @2215e7a
@@ -375,12 +375,12 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
-"@tinymce/tinymce-vue@^5":
+"@tinymce/tinymce-vue@4.0.7":
-  version "5.1.1"
+  version "4.0.7"
-  resolved "https://mirrors.cloud.tencent.com/npm/@tinymce/tinymce-vue/-/tinymce-vue-5.1.1.tgz#0879787e07833a4316b2eaf0417c7c6a2abce86b"
+  resolved "https://mirrors.cloud.tencent.com/npm/@tinymce/tinymce-vue/-/tinymce-vue-4.0.7.tgz#811dd87a2a9f70e60c43c2d9d932771c0c8b4677"
-  integrity sha512-iO57HOWesFOhsaqjA5Ea6sDvQBmJJH3/dq00Uvg7metlct2kLF+ctRgoDsetLt6gmeZ7COPftr814/XzqnJ/dg==
+  integrity sha512-1esB8wGWrjPCY+rK8vy3QB1cxwXo7HLJWuNrcyPl6LOVR+QJjub0OiV/C+TUEsLN6OpCtRv+QnIqMC5vXz783Q==
   dependencies:
-    tinymce "^6.0.0 || ^5.5.1"
+    tinymce "^5.5.0"
 "@types/estree@^1.0.0":
   version "1.0.0"
@@ -3370,15 +3370,10 @@ through@^2.3.8:
   resolved "https://mirrors.cloud.tencent.com/npm/through/-/through-2.3.8.tgz"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-"tinymce@^6.0.0 || ^5.5.1":
+tinymce@5.10.9, tinymce@^5.5.0:
-  version "6.8.4"
+  version "5.10.9"
-  resolved "https://mirrors.cloud.tencent.com/npm/tinymce/-/tinymce-6.8.4.tgz#53e1313ebfe5524b24c0fa45937d51fda058632d"
+  resolved "https://mirrors.cloud.tencent.com/npm/tinymce/-/tinymce-5.10.9.tgz#1dfacb3231c71a688d90ff44a0b3f2e91b3b9edf"
-  integrity sha512-okoJyxuPv1gzASxQDNgQbnUXOdAIyoOSXcXcZZu7tiW0PSKEdf3SdASxPBupRj+64/E3elHwVRnzSdo82Emqbg==
+  integrity sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg==
-
-tinymce@^7.2.1:
-  version "7.2.1"
-  resolved "https://mirrors.cloud.tencent.com/npm/tinymce/-/tinymce-7.2.1.tgz#9b4f6b5a0fa647e2953c174ac69aa47483683332"
-  integrity sha512-ADd1cvdIuq6NWyii0ZOZRuu+9sHIdQfcRNWBcBps2K8vy7OjlRkX6iw7zz1WlL9kY4z4L1DvIP+xOrVX/46aHA==
 tmp@~0.2.1:
   version "0.2.1"