创建一个Tinymce插件：如何使元素可选且可编辑

Question

我正在尝试为„ bootstrap卡“ 基本上基本上是”只是一个div元素。一旦用户单击我的新插件按钮，我该如何使已插入的卡可选卡当然可以编辑？奖励问题：;-)是否有任何关于Tinymce插件撰写的全面教程的建议？

Answer 1

首先要回答奖励问题，在Tinymce博客上有一篇文章浏览创建自己的Tinymce插件，示例是

本文中降低转换的HTML，在“将插件添加到编辑器”标题下，Shahed Nasser写下了将自定义插件按钮添加到中的步骤工具栏。在该标题下检查有关获取自定义工具栏图标启动和运行的更多信息。

对于Bootstrap卡项目问题 - 因此，听起来您的用户选择卡片时，您需要以下内容：

1. 专注于文档中的现有卡，
2. 使能够编辑，调整或修改卡片以获取他们想要在卡中写或表达的内容。

第一步是识别卡项。 Tinymce.html.domparser API具有一种方法，该方法将过滤编辑器中的特定节点，并允许您在匹配过滤器的任何节点上运行一个函数。您可以在此处找到API文档 -

这正达到我对做什么的知识的限制为了使您的自定义插件运行。

Answer 2

我正在开发与您所描述的类似的东西，并且发现此示例代码及其readme.md文件有用

使一个元素可选：

只需添加可满足的属性设置为false，这将使元素成为元素，并且它的内容是不可编辑的，因此您可以t在Tinymce编辑器中单击它的内部，然后编辑内容，但仅选择整个Div。

在选择元素时将插件按钮“ active”：

要定义插件按钮时使用“ statelector”：

import Dialog from './Dialog';

const plugin = (editor) => {
  editor.addButton("profCard", {
    text: "Profile Card",
    icon: false,
    stateSelector: ['div[data-prof-card]'],
    onclick: e => Dialog.open(e, editor)
  });
};

export default plugin;

政治主管是您在按钮应何时配置的选项
通过将其与CSS选择器一起提供一系列字符串，从而“活动”。
如果选择在编辑器中的元素上，与其中一个
数组中的选择器按钮将显示活跃。

我强烈建议在继续之前阅读整个读数文件。