123321

2024-05-30 11:29:44 +08:00
parent 91864994af
commit 7b37fdd2bb
19 changed files with 1396 additions and 268 deletions
--- a/cdTMP/src/components/Empty/index.vue
+++ b/cdTMP/src/components/Empty/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="empty-container">
+        <icon-empty :size="60" />
+        <p>{{ text }}</p>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+const text = ref("暂无数据")
+</script>
+
+<style lang="less" scoped>
+.empty-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #aaa;
+    p {
+        margin-top: 6px;
+    }
+}
+</style>
--- a/cdTMP/src/components/index.js
+++ b/cdTMP/src/components/index.js
@@ -22,6 +22,8 @@ import MaIcon from "./ma-icon/index.vue"
 import MaCodeEditor from "./ma-codeEditor/index.vue"
 import MaUserInfo from "./ma-userInfo/index.vue"
 import MaCityLinkage from "./ma-cityLinkage/index.vue"
+// 后续增加的全局组件
+import Empty from "./Empty/index.vue"

 use([
    CanvasRenderer,
@@ -52,5 +54,7 @@ export default {
        Vue.component("MaCodeEditor", MaCodeEditor)
        Vue.component("MaUserInfo", MaUserInfo)
        Vue.component("MaCityLinkage", MaCityLinkage)
+        // 后续增加的组件
+        Vue.component("Empty", Empty)
    }
 }
--- a/cdTMP/src/components/ma-crud/index.vue
+++ b/cdTMP/src/components/ma-crud/index.vue
@@ -840,5 +840,6 @@ defineExpose({
 }
 ._crud-footer {
    z-index: 10;
+    height: 80px;
 }
 </style>
--- a/cdTMP/src/components/ma-editor/index.vue
+++ b/cdTMP/src/components/ma-editor/index.vue
@@ -15,28 +15,28 @@ import "tinymce/icons/default"
 import "tinymce/models/dom"
 import "tinymce/themes/silver"

-import "tinymce/plugins/advlist" //高级列表
-import "tinymce/plugins/anchor" //锚点
-import "tinymce/plugins/autolink" //自动链接
-import "tinymce/plugins/autosave" //自动存稿
-import "tinymce/plugins/charmap" //特殊字符
-import "tinymce/plugins/code" //编辑源码
-import "tinymce/plugins/codesample" //代码示例
-import "tinymce/plugins/directionality" //文字方向
-import "tinymce/plugins/image" //插入编辑图片
-import "tinymce/plugins/importcss" //引入css
-import "tinymce/plugins/insertdatetime" //插入日期时间
-import "tinymce/plugins/lists" //列表插件
-import "tinymce/plugins/nonbreaking" //插入不间断空格
-import "tinymce/plugins/pagebreak" //插入分页符
-import "tinymce/plugins/preview" //预览
-import "tinymce/plugins/quickbars" //快速工具栏
-import "tinymce/plugins/save" //保存
-import "tinymce/plugins/searchreplace" //查找替换
-import "tinymce/plugins/table" //表格
-import "tinymce/plugins/visualblocks" //显示元素范围
-import "tinymce/plugins/visualchars" //显示不可见字符
-import "tinymce/plugins/wordcount" //字数统计
+// import "tinymce/plugins/advlist" // 高级列表
+// import "tinymce/plugins/anchor" // 锚点
+// import "tinymce/plugins/autolink" // 自动链接
+import "tinymce/plugins/autosave" // 自动存稿
+// import "tinymce/plugins/charmap" // 特殊字符
+import "tinymce/plugins/code" // 编辑源码
+// import "tinymce/plugins/codesample" // 代码示例
+// import "tinymce/plugins/directionality" // 文字方向
+import "tinymce/plugins/image" // 插入编辑图片
+import "tinymce/plugins/importcss" // 引入css
+// import "tinymce/plugins/insertdatetime" // 插入日期时间
+import "tinymce/plugins/lists" // 列表插件
+import "tinymce/plugins/nonbreaking" // 插入不间断空格
+// import "tinymce/plugins/pagebreak" // 插入分页符
+// import "tinymce/plugins/preview" // 预览
+import "tinymce/plugins/quickbars" // 快速工具栏
+import "tinymce/plugins/save" // 保存
+import "tinymce/plugins/searchreplace" // 查找替换
+import "tinymce/plugins/table" // 表格
+// import "tinymce/plugins/visualblocks" //显示元素范围
+import "tinymce/plugins/visualchars" // 显示不可见字符
+// import "tinymce/plugins/wordcount" // 字数统计

 const appStore = useAppStore()

@@ -46,15 +46,14 @@ const props = defineProps({
    id: { type: String, default: () => "tinymce" + new Date().getTime().toString() },
    plugins: {
        type: [String, Array],
-        default:
-            "preview searchreplace autolink directionality visualblocks visualchars code codesample table charmap nonbreaking insertdatetime advlist lists wordcount autosave"
+        default: "searchreplace visualchars code table nonbreaking lists autosave"
    },
    toolbar: {
        type: [String, Array],
        // 如果要取消粘贴只粘贴文本，需要用户加格式请加上pastetext
        default:
-            "code undo redo restoredraft | paste |bold codesample | preview | alignleft alignjustify indent formatpainter | \
-    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | charmap pagebreak insertdatetime"
+            "code undo redo restoredraft | paste | bold | alignleft alignjustify indent formatpainter | \
+    styleselect formatselect fontselect fontsizeselect | bullist numlist | subscript superscript removeformat"
    }
 })

@@ -71,6 +70,53 @@ let content = computed({

 const list = ref([])

+// 辅助函数：遍历元素和子元素的style样式
+function cleanStyles(element) {
+    element.removeAttribute("style") // 移除元素自身的style属性
+    element.removeAttribute("class") // 移除元素自身的class属性
+    // 遍历子元素，递归清理样式
+    for (const child of element.children) {
+        // 移除子元素的style以及class属性
+        cleanStyles(child)
+    }
+}
+
+// 辅助函数：将元素中span变为text节点
+function removeUnwantedSpansAndMore(element) {
+    // 所有span变为字符串
+    const spans = element.querySelectorAll("span")
+    for (const span of spans) {
+        const text = span.textContent
+        const textNode = document.createTextNode(text)
+        const parent = span.parentNode
+        parent.removeChild(span)
+        parent.appendChild(textNode)
+    }
+    // 所有a元素变成为字符串
+    const as = element.querySelectorAll("a")
+    for (const a of as) {
+        const text = a.textContent
+        const textNode = document.createTextNode(text)
+        const parent = a.parentNode
+        parent.removeChild(a)
+        parent.appendChild(textNode)
+    }
+}
+
+// 辅助函数：去掉注释节点
+function removeCommentNodes(node) {
+    const childNodes = node.childNodes
+    // 遍历子节点
+    for (let i = childNodes.length - 1; i >= 0; i--) {
+        // 如果是注释节点
+        if (childNodes[i].nodeType === Node.COMMENT_NODE) {
+            node.removeChild(childNodes[i]) // 从父节点中移除该注释节点
+        } else if (childNodes[i].nodeType === Node.ELEMENT_NODE) {
+            removeCommentNodes(childNodes[i]) // 如果是元素节点，递归检查该元素的子节点
+        }
+    }
+}
+
 const initConfig = reactive({
    menubar: false, // 菜单栏显隐
    language_url: "/tinymce/i18n/zh_CN.js",
@@ -82,17 +128,30 @@ const initConfig = reactive({
    toolbar: props.toolbar,
    skeletonScreen: true,
    branding: false,
-    paste_as_text: true, // 粘贴文字只能是纯文本
    content_css: "/tinymce/skins/content/default/content.css",
-    setup: (editor) => {
-        editor.on("init", () => {
-            editor.getBody().style.fontSize = "14px"
+    selector: "#textarea1", // 下面自定义样式选中的区域为编辑区
+    content_style: "body {line-height:1.5;font-size:14px;} p {margin:2px 0px;}", // 这里可以设置自定义样式
+    // paste_as_text: false, // 粘贴文字只能是纯文本
+    // 1.自定义粘贴过滤器函数，args.content就是粘贴内容
+    paste_preprocess: function (plugin, args) {
+        let content = args.content
+        const parser = new DOMParser()
+        const doc = parser.parseFromString(content, "text/html")
+        // 遍历一级元素
+        Array.from(doc.body.children).forEach((element) => {
+            cleanStyles(element)
+            removeUnwantedSpansAndMore(element)
+            removeCommentNodes(element)
+            console.log(element)
        })
+        // 将处理后的fragment转换回HTML字符串
+        args.content = doc.body.innerHTML
    }
 })

 const editorKey = ref(new Date().getTime())

+// 图片作为img的base64处理
 watch(
    () => list.value,
    (imgs) => {