有没有办法为 CK Editor 创建自定义插件来支持内联 SVG？

Question

我想创建一个插件，让用户插入带有 SVG 图标和一些文本的小部件。我创建了允许用户添加文本的小部件，但是当我尝试添加 SVG 时，它会删除我的所有属性。有没有办法允许编辑器内内嵌 SVG。我找不到任何有关 SVG 支持的文档。

schema.register('actionIcon', {
      allowWhere: '$text',
      isInline: true
      allowAttributes: ['name', 'class']
    })

schema.register('actionCircle', {
      allowWhere: '$text',
      isInline: true,
      allowAttributes: ['name', 'class', 'cx', 'cy', 'r', 'stroke', 'fill']
    })

// ...

conversion.elementToElement({
      model: 'actionIcon',
      view: {
        name: 'svg',
        classes: 'action-icon'
      }
})

conversion.elementToElement({
      model: 'actionCircle',
      view: {
        name: 'circle',
        classes: 'action-circle',
        ['cx']: '50',
        ['cy']: '50',
        ['r']: '40',
        ['stroke']: 'green',
        ['fill']: 'yellow'
      }
})


Result:

<p>
    <svg class="action-icon">
        <circle class="action-circle">&nbsp;</circle>
    </svg>
    <span class="placeholder ck-widget" contenteditable="false">
        Item
    </span>
</p>

我希望为 svg 创建一个方案和转换器，并将其插入到小部件中，但 ck 编辑器删除了我详细定义的所有属性。

Answer 1

我知道这已经很旧了，但是...

您需要禁用高级内容过滤器。出于安全考虑，它将删除 SVG。

CKEDITOR.config.allowedContent = true;