CKeditor 添加类到 img 标签

我正在尝试向 CKeditor 中任何插入的 img 标签添加一个类。我尝试了各种方法，但似乎无法弄清楚这个插件的设置是如何工作的。虽然文档很多，但只提到需要添加代码，但没有提到应该添加到哪里，文件很多。

我尝试将其添加到 config.js 的底部

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
    config.extraPlugins = 'confighelper';   

    config.stylesSet = 'my_styles';

};

CKEDITOR.stylesSet.add( 'my_styles', [

    { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);

那不起作用

所以我尝试将它添加到实际的html页面中

<script>
CKEDITOR.stylesSet.add( 'my_styles', [

    { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);
</script>

那也没用

阅读他们的文档我无法理解http://docs.ckeditor.com/#!/guide/dev_howtos_styles http://docs.ckeditor.com/#!/guide/dev_howtos_styles

如何向通过编辑器添加的任何 img 标签添加类？

我没有使用 CKEDITOR，但问题可能是，stylesSet 没有在 CKEDITOR 调用上声明，因为它是稍后定义的。 尝试移动CKEDITOR.stylesSet.add在 editorConfig 之前。

或者将您的样式放入第一个代码块中：

CKEDITOR.editorConfig = function( config ) {

   ...
   ...

   config.stylesSet = [
      { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
   ];

};
</script>

还有一些有关用法的更多文档http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet