提交

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>

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,9 +385,18 @@ 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) {
+                     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) {
                         // 判断点击的是否是目标元素