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"
-         :enabled="enabled"
+         :init="tinymceOptions"
         :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/models/dom"; // 一定要引入
- import "tinymce/themes/silver"; // 界面UI主题
- import "tinymce/plugins/image";
- import "tinymce/plugins/table";
- import "tinymce/plugins/lists"; // 列表插件
- import "tinymce/plugins/wordcount"; // 文字计数
- import "tinymce/plugins/preview"; // 预览
- import "tinymce/plugins/emoticons"; // emoji表情
- import "tinymce/plugins/emoticons/js/emojis.js"; //必须引入这个文件才有表情图库
- import "tinymce/plugins/code"; // 编辑源码
- import "tinymce/plugins/link"; // 链接插件
- import "tinymce/plugins/advlist"; //高级列表
- import "tinymce/plugins/codesample"; //代码示例
- import "tinymce/plugins/autoresize"; // 自动调整编辑器大小
- import "tinymce/plugins/quickbars"; // 光标处快捷提示
- import "tinymce/plugins/nonbreaking"; //插入不间断空格
- import "tinymce/plugins/searchreplace"; //查找替换
- import "tinymce/plugins/autolink"; //自动链接
- import "tinymce/plugins/directionality"; //文字方向
- import "tinymce/plugins/visualblocks"; //显示元素范围
- import "tinymce/plugins/visualchars"; //显示不可见字符
- import "tinymce/plugins/charmap"; // 特殊符号
- import "tinymce/plugins/nonbreaking"; //插入不间断空格
- import "tinymce/plugins/insertdatetime"; //插入日期时间
- import "tinymce/plugins/importcss"; //引入自定义样式的css文件
- import "tinymce/plugins/accordion"; // 可折叠数据手风琴模式
- import "tinymce/plugins/anchor"; //锚点
- import "tinymce/plugins/fullscreen";
+ // import "tinymce/icons/default/icons";
+ // import "tinymce/models/dom"; // 一定要引入
+ // import "tinymce/themes/silver"; // 界面UI主题
+ // import "tinymce/plugins/image";
+ // import "tinymce/plugins/table";
+ // import "tinymce/plugins/lists"; // 列表插件
+ // import "tinymce/plugins/wordcount"; // 文字计数
+ // import "tinymce/plugins/preview"; // 预览
+ // import "tinymce/plugins/emoticons"; // emoji表情
+ // import "tinymce/plugins/emoticons/js/emojis.js"; //必须引入这个文件才有表情图库
+ // import "tinymce/plugins/code"; // 编辑源码
+ // import "tinymce/plugins/link"; // 链接插件
+ // import "tinymce/plugins/advlist"; //高级列表
+ // import "tinymce/plugins/codesample"; //代码示例
+ // import "tinymce/plugins/autoresize"; // 自动调整编辑器大小
+ // import "tinymce/plugins/quickbars"; // 光标处快捷提示
+ // import "tinymce/plugins/nonbreaking"; //插入不间断空格
+ // import "tinymce/plugins/searchreplace"; //查找替换
+ // import "tinymce/plugins/autolink"; //自动链接
+ // import "tinymce/plugins/directionality"; //文字方向
+ // import "tinymce/plugins/visualblocks"; //显示元素范围
+ // import "tinymce/plugins/visualchars"; //显示不可见字符
+ // import "tinymce/plugins/charmap"; // 特殊符号
+ // import "tinymce/plugins/nonbreaking"; //插入不间断空格
+ // import "tinymce/plugins/insertdatetime"; //插入日期时间
+ // import "tinymce/plugins/importcss"; //引入自定义样式的css文件
+ // import "tinymce/plugins/accordion"; // 可折叠数据手风琴模式
+ // import "tinymce/plugins/anchor"; //锚点
+ // 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: "https://cdn.ipadbiz.cn/custom_form/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路径，具体路径看自己的项目
   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) {
-     new Promise((resolve, reject) => {
-       let file = blobInfo.blob();
-       if (file.size / 1024 / 1024 > 200) {
-         reject({
-           message: "上传失败，图片大小请控制在 200M 以内",
-           remove: true,
-         });
-       }
-         const formData = new FormData();
-         formData.append("file", file);
-         console.log( formData)
-         axios.post("/api/upload/upload", formData, {
-           headers: {
-             "Content-Type": "multipart/form-data",
-           },
-           onUploadProgress: (progressEvent) => {
-             progress(
-                 Math.round((progressEvent.loaded / progressEvent.total) * 100)
-             );
-           },
-         }).then((res) => {
-               resolve(res.data.url);
-         })
-         .catch()
+   // images_upload_handler: function (blobInfo, progress) {
+   //   new Promise((resolve, reject) => {
+   //     let file = blobInfo.blob();
+   //     if (file.size / 1024 / 1024 > 200) {
+   //       reject({
+   //         message: "上传失败，图片大小请控制在 200M 以内",
+   //         remove: true,
+   //       });
+   //     }
+   //       const formData = new FormData();
+   //       formData.append("file", file);
+   //       console.log( formData)
+   //       axios.post("/api/upload/upload", formData, {
+   //         headers: {
+   //           "Content-Type": "multipart/form-data",
+   //         },
+   //         onUploadProgress: (progressEvent) => {
+   //           progress(
+   //               Math.round((progressEvent.loaded / progressEvent.total) * 100)
+   //           );
+   //         },
+   //       }).then((res) => {
+   //             resolve(res.data.url);
+   //       })
+   //       .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":
-   version "5.1.1"
-   resolved "https://mirrors.cloud.tencent.com/npm/@tinymce/tinymce-vue/-/tinymce-vue-5.1.1.tgz#0879787e07833a4316b2eaf0417c7c6a2abce86b"
-   integrity sha512-iO57HOWesFOhsaqjA5Ea6sDvQBmJJH3/dq00Uvg7metlct2kLF+ctRgoDsetLt6gmeZ7COPftr814/XzqnJ/dg==
+ "@tinymce/tinymce-vue@4.0.7":
+   version "4.0.7"
+   resolved "https://mirrors.cloud.tencent.com/npm/@tinymce/tinymce-vue/-/tinymce-vue-4.0.7.tgz#811dd87a2a9f70e60c43c2d9d932771c0c8b4677"
+   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":
-   version "6.8.4"
-   resolved "https://mirrors.cloud.tencent.com/npm/tinymce/-/tinymce-6.8.4.tgz#53e1313ebfe5524b24c0fa45937d51fda058632d"
-   integrity sha512-okoJyxuPv1gzASxQDNgQbnUXOdAIyoOSXcXcZZu7tiW0PSKEdf3SdASxPBupRj+64/E3elHwVRnzSdo82Emqbg==
- 
- 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==
+ tinymce@5.10.9, tinymce@^5.5.0:
+   version "5.10.9"
+   resolved "https://mirrors.cloud.tencent.com/npm/tinymce/-/tinymce-5.10.9.tgz#1dfacb3231c71a688d90ff44a0b3f2e91b3b9edf"
+   integrity sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg==
 
 tmp@~0.2.1:
   version "0.2.1"