如何在 tinymce 中使用自定义工具栏？答案

【问题标题】：How to use customized tool bar in tiny mce?如何在 tinymce 中使用自定义工具栏？
【发布时间】：2010-10-15 05:49:24
【问题描述】：

我在我的一个项目中使用了 tiny mce，而客户不想使用 tiny mce 的水平工具栏。他想要一个集中的自定义工具栏，用户可以在其中控制所有属性，如文本颜色、文本类型、大小、背景以及使用模板设计网页时需要做的所有事情。我在没有默认工具栏的情况下配置了 mce 实例，并从自定义工具栏控制了属性。并且这些属性作为一个整体应用于微小的 mce 实例。但是现在提出了要求，文本编辑应该是MS office风格。也就是说，如果用户将光标放在一个地方并改变颜色，则不会有任何影响，但是如果他从光标位置开始输入文本应该具有最近设置的颜色。我尝试使用外部工具栏选项。但是，我的工作区和自定义工具栏处于不同的 z 索引级别。因此，定位工具栏失败。如果我将工具栏附加到我的自定义工具栏，它是不可点击的。那么，如何使用自定义工具栏调用tiny mce的核心功能呢？

或者，请建议，我应该更换编辑器吗？那么，我应该去哪一个？

编辑根据建议，我正在编写函数保存属性样式并将跨度插入插入符号位置。但是我遇到了一些问题，花了一整天都做不到。我可以使用以下代码在插入符号位置添加跨度。

 marker = ed.selection.getBookmark();
 ed.selection.moveToBookmark(marker);
 tinyMCE.execCommand('mceInsertContent',false,'<span id="mytitle"></span>');

但是，我仍然未能在新跨度内输入。另外，我不知道如何将样式设置为此跨度。

【问题讨论】：

标签： tinymce

【解决方案1】：

如果您的目标是让您的 tinymce 表现得像 MS Office，您应该编写一个自己的插件来解决这个问题。我建议如果用户将光标放在一个位置并更改颜色，则将此颜色保存为您的 tinymce 实例的设置，例如：ed.color = 'choosencolor';

当用户现在开始输入时，您可以在第一次击键时插入一个跨度，并将颜色设置为这个跨度的 css 类或样式属性。

【讨论】：

这是否意味着，我可以编写一个插件来调用 tiny mce 的核心功能？或者您建议的流程将由插件处理？我是编程新手，已经阅读了插件文档，但不太了解。你能提供另一个链接/文档吗？
是的，这是可能的，如果代码功能不是您想要的，您可以创建自己的或扩展核心功能。嗯，我没有其他链接，但是如果您仔细查看插件目录中已经存在的插件，它会很有帮助。这就是我开始开发插件的方式。
嗨 Thariama，我正在尝试设置为“ed.font-family=propertyValue”，但这会产生错误，而“ed.color=propertyValue”可以正常工作。知道为什么会这样吗？
这里的问题是'-'被当作减号，你不能在javasscript的变量名中使用'-'。