提交
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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; */
|
||||
|
||||
@@ -368,6 +368,8 @@ export default {
|
||||
|
||||
img{
|
||||
max-width:580px;
|
||||
}blue {
|
||||
color: rgb(0, 130, 170) !important;
|
||||
}
|
||||
`,
|
||||
formats: {
|
||||
@@ -386,6 +388,15 @@ export 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) {
|
||||
// 判断点击的是否是目标元素
|
||||
|
||||
Reference in New Issue
Block a user