CKeditor将类添加到img标签中 [英] CKeditor adding class to img tag

问题描述

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

I am trying to add a class to any inserted img tag in CKeditor. I have tried various ways but can't seem to figure out how the setting of this plugin works. Whilst there are tonnes of documents, it only mentions that a code needs to be added, but not where it should be added, there are loads of files.

我尝试添加它在config.js底部

I tried adding it to the bottom on 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页面

So I tried adding it to the actual html page

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

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

这不起作用

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

Reading their docs I can't make any sense of it http://docs.ckeditor.com/#!/guide/dev_howtos_styles

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

How does one add a class to any img tags added through the editor?

推荐答案

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

I'm not using CKEDITOR, but the problem could be, that the stylesSet is not declared on CKEDITOR call, since its defined later. Try moving CKEDITOR.stylesSet.add prior to editorConfig.

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

Alternatively put your styles into the first code block:

CKEDITOR.editorConfig = function( config ) {

   ...
   ...

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

};
</script>

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

There are also some more Docs about the usage http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet

这篇关于CKeditor将类添加到img标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！