ckeditor - CKEditor 如何处理自定义语义标记?

标签 ckeditor semantic-markup

我需要一个所见即所得的编辑器,可以针对任意语义标记进行定制——目前以 XML 语法表示。我知道 CKEditor 是可定制的,但我的语义在 HTML 中没有对应关系。

例如:

<地点 Id='place-id'>地点引用

我希望能够将与此类似的语义附加到任意文本位,并使用一组可配置的样式来显示它们——每种样式对应一个样式。例如,本示例中的地点引用可能以特定字体、绿色和斜体显示(此处建议仅用于说明)。

我简要地了解了 markdown 插件,但它的功能仍然与 HTML 的功能相匹配。

我希望找到一个非常简单的示例来演示编辑器对纯自定义语义的适用性,并且不假设它们在 HTML/XHTML 中具有对应关系。

这可能吗?

最佳答案

每个自定义标记都具有语义方面(上面示例中的位置引用和 ID)和表示方面(我希望如何查看所描述的标记引用)。如果自定义标记被替换为特定类的

,那么它可以代表这两个方面,并且应该可以被 CKEditor 等 HTML 编辑器接受——目前尚未得到证实。

例如,考虑具有多个属性值的自定义 XML 标记的另一个示例:

<Anom Mode='Intralinear' Posn='T' Ref='^'> some text </Anom>

可以按如下方式进行转换,以便编辑器可以接受(其中“xx”是一些唯一的专有名称,以避免名称冲突):

<span class="xx-anom" data-xx-mode="Intralinear" data-xx-posn="T" data-xx-ref="^"> some text </span>

除了捕获属性值之外,我相信这应该允许编辑器根据不同的样式显示不同的标记文本,使用一些具有选择器(例如span.xx-anom)的CSS。

CKeditor 已经拥有用于 markdown 和 BBCode 的第三方插件,这些插件演示了如何使用 HTML 作为临时表示来编辑其语法。对于自定义 XML 标记也应该可以执行相同的操作。

关于ckeditor - CKEditor 如何处理自定义语义标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34556630/

相关文章:

angularjs - 使用 AngularJS 实现 CKEditor(pasteState 事件)

css - 如何在 CMS 的所见即所得内容生成器/编辑器中向非技术客户提供向内容添加 css 类/ID 的选项?

html - 我可以在导航元素中使用 Logo 图像吗?

css - 3 个固定列(页眉和页脚)使用 DIV,没有绝对 DIV,IE 友好,所有列均等拉伸(stretch)

css - 我们什么时候应该使用 <dl> 而不是 <ul>?

javascript - 在 ng-ckeditor 中添加插件

jquery - 如何使用 jQuery 禁用 CKeditor

html - 根据规范,标题(书籍、电影等)的正确语义 HTML 标记是什么?它是 <em> 标签还是其他什么?

javascript - 在 IE10 中使用 CKEditor 内联编辑 TD

firefox - 源代码未在Firefox的CKEditor中包装