Merge branch 'zy-email' of https://gitee.com/wjl2008_admin/tougao_web

src/components/page/GenerateCharts.vue

@@ -229,7 +229,7 @@
                         @getContent="getContent"
                         :value="commentForm.remark"
                         class="paste-area text-container"
-                        toolbar="bold italic subscript superscript clearButton"
+                        toolbar="bold italic subscript superscript clearButton "
                         style=""
                     ></tinymce>
                 </el-form-item>
@@ -262,7 +262,7 @@
                         @getContent="getContent"
                         :value="currentContent.content"
                         class="paste-area text-container"
-                        toolbar="bold italic forecolor subscript superscript clearButton"
+                        toolbar="bold italic customBlue removeBlue  subscript superscript clearButton "
                         style=""
                     ></tinymce>
                 </el-form-item>
@@ -453,6 +453,26 @@ export default {
         },
         async getContent(type, content) {
             if (type == 'content') {
+                 // 使用正则表达式移除所有不允许的标签
+ // 1. 移除不允许的标签
+ content = content.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
+
+// 2. 移除所有 style 属性
+content = content.replace(/\s*style="[^"]*"/g, '');
+
+// 3. 将 <strong> 转换为 <b>，<em> 转换为 <i>
+content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
+content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
+
+// 4. 去除多余的空格：替换连续的空格、换行符、制表符等
+content = content.replace(/\s+/g, ' ').trim(); // 将多个空白字符替换为一个空格，并去除前后空白
+
+// 5. 去除标签之间的空格
+content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
+
+// 6. 如果需要，还可以去除 <span> 标签内部的空格
+// content = content.replace(/<span[^>]*>\s*([^<]+)\s*<\/span>/g, '<span>$1</span>'); // 清理 <span> 标签内部的空格
+
                 this.saveContent(content);
             } else if (type == 'table') {
                 this.saveTable(content);

src/components/page/components/Tinymce/index.vue

@@ -268,7 +268,8 @@ export default {
                 selector: `#${this.tinymceId}`,
                 content_css: false, // 禁用默认样式
                 table_resize_bars: true, // 启用拖动调整功能
-                valid_elements: '*[*]', // 允许所有 HTML 标签
+                valid_elements: this.type == 'table' ? '*[*]' : 'img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i', // 允许的标签和属性
+                // valid_elements: '*[*]', // 允许所有 HTML 标签
 
                 height: this.height,
                 paste_preprocess: function (plugin, args) {
@@ -330,24 +331,77 @@ export default {
 
                 content_style: `${tableStyle} table span blue {
                         color: rgb(0, 130, 170) !important;
+                    }blue {
+                        color: rgb(0, 130, 170) !important;
                     }`,
 
                 formats: {
                     bold: { inline: 'b' },
                     italic: { inline: 'i' }
                 },
+             
                 body_class: 'panel-body ',
                 object_resizing: false,
                 toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
                 menubar: false, // 启用菜单栏并保持必要的项目
                 statusbar: false, // 关闭底部状态栏
                 custom_colors: false,
-                color_map: ['000000', 'Black', '0082AA', 'TMR Blue'],
+                color_map: ['0082AA', 'TMR Blue'],
                 plugins: 'forecolor code paste table image', // 启用 forecolor 和 code 插件
                 end_container_on_empty_block: true,
                 content_css: 'default', // 加载 TinyMCE 默认样式表
                 //设置自定义按钮 myCustomToolbarButton
                 setup(ed) {
+                    // ed.on('change', function () {
+
+                    //     var selectedColor = ed.formatter.get('forecolor');
+                    //     console.log('ed.formatter.get at line 355:', ed.formatter)
+                    //     console.log('ed.formatter.get at line 355:', selectedColor)
+
+                    //     // 检查是否选择了蓝色
+                    //     if (selectedColor === '#0082AA') {
+                    //         // 蓝色的 hex 值
+                    //         var selectedText = ed.selection.getContent(); // 获取选中的文本
+                    //         if (selectedText) {
+                    //             var wrappedText = `<blue>${selectedText}</blue>`; // 包裹 <blue> 标签
+                    //             ed.selection.setContent(wrappedText); // 更新内容
+                    //         }
+                    //     }
+                    // });
+
+                    ed.ui.registry.addButton('customBlue', {
+                        text: 'Blue', // 按钮文本
+                        onAction: function () {
+                            // 在选中的文本周围包裹 <blue> 标签
+                            var selectedText = ed.selection.getContent();
+                            var wrappedText = `<blue>${selectedText}</blue>`;
+                            ed.selection.setContent(wrappedText);
+                        },
+                        classes: 'custom-colored-tinymce-button'
+                    });
+                    ed.ui.registry.addButton('removeBlue', {
+                        text: 'Remove Blue', // 按钮文本
+                        onAction: function () {
+                            var selectedContent = ed.selection.getContent(); // 获取选中的文本内容
+
+                            // 如果选中内容中有 <blue> 标签，去除它们
+                            var cleanedContent = selectedContent.replace(/<\/?blue>/g, ''); // 删除所有 <blue> 和 </blue> 标签
+                            ed.selection.setContent(cleanedContent); // 更新内容
+                        },
+                        onPostRender: function (buttonApi) {
+                            // 监听编辑器中内容的变化
+                            ed.on('NodeChange', function () {
+                                var selectedContent = ed.selection.getContent(); // 获取选中的内容
+
+                                // 检查选中的内容是否包含 <blue> 标签
+                                if (selectedContent.includes('<blue>')) {
+                                    buttonApi.setActive(true); // 激活按钮
+                                } else {
+                                    buttonApi.setActive(false); // 禁用按钮
+                                }
+                            });
+                        }
+                    });
                     ed.ui.registry.addButton('uploadWord', {
                         text: 'Word',
                         icon: 'import-word', // 使用自定义图标
@@ -587,4 +641,14 @@ export default {
 .custom-btn:hover {
     background-color: #218838 !important;
 }
+.custom-colored-tinymce-button {
+    background-color: #449d44; /* 绿色背景 */
+    color: white; /* 白色文本 */
+    border: none;
+    padding: 5px 10px;
+    text-align: center;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+}
 </style>

src/components/page/components/table/table.vue

@@ -11,7 +11,7 @@
                 :typesettingType="typesettingType"
                 class="paste-area text-container"
                 :toolbar="`undo redo | formatselect | bold italic ${
-                    identity ? '| forecolor' : ''
+                    identity ? '| customBlue removeBlue' : ''
                 }   |subscript superscript|table tabledelete  ${identity ? '| customDropdown' : ''} | clearButton`"
                 style="
                     /* white-space: pre-line; */

src/components/page/components/table/word.vue

@@ -368,7 +368,9 @@ export default {
 
                 img{
                     max-width:580px;
-                }
+                }blue {
+                        color: rgb(0, 130, 170) !important;
+                    }
                 `,
                 formats: {
                     bold: { inline: 'b' },
@@ -383,53 +385,57 @@ export default {
                 color_map: ['000000', 'Black', '0082AA', 'TMR Blue'],
                 plugins: 'forecolor code paste table image resize',
                 end_container_on_empty_block: true,
-                content_css: 'default',
+                content_css: 'default ',
 
                 setup(ed) {
-                    if (!_this.readonly) {
-                        ed.on('click', function (e) {
-                            // 判断点击的是否是目标元素
-                            const target = e.target;
-                            console.log('target at line 351:', target);
-
-                            if (target.classList.contains('isRemarkIcon')) {
-                                _this.$emit('onComment', target.getAttribute('main-id'));
-                            }
-                        });
-                        // // 添加批注按钮
-                        ed.ui.registry.addButton('addImageButton', {
-                            text: 'Add Figure',
-                            icon: 'comment',
-                            onAction: function () {
-                                _this.$emit('add', img);
-                                // const selection = ed.selection;
-                                // const selectedNode = selection.getNode(); // 获取选中的节点
-                                // console.log('selectedNode at line 333:', selectedNode);
-                                // if (selectedNode) {
-                                //     const comment = prompt('Enter your comment:');
-                                //     if (comment) {
-                                //         const dataId = selectedNode.getAttribute('main-id');
-                                //         _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
-                                //     }
-                                // } else {
-                                //     alert('Please select some text to comment on.');
-                                // }
-                            }
-                        });
-                        ed.on('dragstart', (e) => {
-                            // 阻止拖动事件
-                            e.preventDefault();
-                        });
-                        // 监听焦点变化并高亮当前选中的元素
-                        ed.on('focus', function () {
-                            if (!isDeleting) {
-                                // 处理正常的焦点逻辑
-                                ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
-                                _this.updateCurrentTag(ed);
-                            }
-                        });
-                        // 监听焦点变化并高亮当前选中的元素
-                        ed.on('selectionChange', function () {
+                     ed.ui.registry.addButton('customBlue', {
+      text: 'Blue', // 按钮文本
+      onAction: function() {
+        // 在选中的文本周围包裹 <blue> 标签
+        var selectedText = ed.selection.getContent();
+        var wrappedText = `<blue>${selectedText}</blue>`;
+        ed.selection.setContent(wrappedText);
+      }
+    });
+                    if(!_this.readonly){
+ed.on('click', function (e) {
+                        // 判断点击的是否是目标元素
+                        const target = e.target;
+                        console.log('target at line 351:', target);
+                        
+                        if (target.classList.contains('isRemarkIcon')) {
+                            _this.$emit('onComment', target.getAttribute('main-id'));
+                        }
+                    });
+                    // // 添加批注按钮
+                    ed.ui.registry.addButton('addImageButton', {
+                        text: 'Add Figure',
+                        icon: 'comment',
+                        onAction: function () {
+                            _this.$emit('add', img);
+                            // const selection = ed.selection;
+                            // const selectedNode = selection.getNode(); // 获取选中的节点
+                            // console.log('selectedNode at line 333:', selectedNode);
+                            // if (selectedNode) {
+                            //     const comment = prompt('Enter your comment:');
+                            //     if (comment) {
+                            //         const dataId = selectedNode.getAttribute('main-id');
+                            //         _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
+                            //     }
+                            // } else {
+                            //     alert('Please select some text to comment on.');
+                            // }
+                        }
+                    });
+                    ed.on('dragstart', (e) => {
+                        // 阻止拖动事件
+                        e.preventDefault();
+                    });
+                    // 监听焦点变化并高亮当前选中的元素
+                    ed.on('focus', function () {
+                        if (!isDeleting) {
+                            // 处理正常的焦点逻辑
+                            ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
                             _this.updateCurrentTag(ed);
                         });