diff --git a/src/components/page/GenerateCharts.vue b/src/components/page/GenerateCharts.vue
index 181583f..447ed53 100644
--- a/src/components/page/GenerateCharts.vue
+++ b/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=""
>
@@ -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=""
>
diff --git a/src/components/page/components/Tinymce/index.vue b/src/components/page/components/Tinymce/index.vue
index 902428c..293b5b1 100644
--- a/src/components/page/components/Tinymce/index.vue
+++ b/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 = `${selectedText}`; // 包裹 标签
+ // ed.selection.setContent(wrappedText); // 更新内容
+ // }
+ // }
+ // });
+
+ ed.ui.registry.addButton('customBlue', {
+ text: 'Blue', // 按钮文本
+ onAction: function () {
+ // 在选中的文本周围包裹 标签
+ var selectedText = ed.selection.getContent();
+ var wrappedText = `${selectedText}`;
+ ed.selection.setContent(wrappedText);
+ },
+ classes: 'custom-colored-tinymce-button'
+ });
+ ed.ui.registry.addButton('removeBlue', {
+ text: 'Remove Blue', // 按钮文本
+ onAction: function () {
+ var selectedContent = ed.selection.getContent(); // 获取选中的文本内容
+
+ // 如果选中内容中有 标签，去除它们
+ var cleanedContent = selectedContent.replace(/<\/?blue>/g, ''); // 删除所有 和 标签
+ ed.selection.setContent(cleanedContent); // 更新内容
+ },
+ onPostRender: function (buttonApi) {
+ // 监听编辑器中内容的变化
+ ed.on('NodeChange', function () {
+ var selectedContent = ed.selection.getContent(); // 获取选中的内容
+
+ // 检查选中的内容是否包含 标签
+ if (selectedContent.includes('')) {
+ 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;
+}
diff --git a/src/components/page/components/table/table.vue b/src/components/page/components/table/table.vue
index 2437ac6..eef8d28 100644
--- a/src/components/page/components/table/table.vue
+++ b/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; */
diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue
index b7796d7..b7d9adc 100644
--- a/src/components/page/components/table/word.vue
+++ b/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() {
+ // 在选中的文本周围包裹 标签
+ var selectedText = ed.selection.getContent();
+ var wrappedText = `${selectedText}`;
+ ed.selection.setContent(wrappedText);
+ }
+ });
if(!_this.readonly){
ed.on('click', function (e) {
// 判断点击的是否是目标元素