Tinymce：如图所示在编辑器外创建自定义工具栏

Question

Please click on the link to view the UX I am trying to achieve

我需要一些关于如何实现上述目标的指导。这个想法是在光标旁边显示加号图标，用户可以轻松点击它并插入他们选择的项目。我觉得这是一个很棒的用户体验！

非常感谢任何帮助！

Answer 1

您可以使用 .setContent() 方法以编程方式向编辑器添加内容： https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#setcontent https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent

这是一个微型 Fiddle 演示： http://fiddle.tinymce.com/5vhaab

在 Fiddle 中，我还通过将 menubar 和 toolbar 设置为 false 来禁用它们。 https://www.tiny.cloud/docs/configure/editor-appearance/#menubar https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar

此外，您可以使用 .execCommand() 方法以编程方式从编辑器外部触发其他编辑器命令： https://www.tiny.cloud/docs/api/tinymce/tinymce.editorcommands/#execcommand

以下是可用命令的列表： https://www.tiny.cloud/docs/advanced/editor-command-identifiers/