CKeditor將類添加到img標記

我想添加一個類到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

如何添加一個類到通過編輯器添加的任何img標籤？

來源

2014-10-03 David Smith

我沒有使用CKEDITOR，但問題可能在於，stylesSet沒有在CKEDITOR調用上聲明，因爲它稍後定義。嘗試在editorConfig之前移動CKEDITOR.stylesSet.add。

或者把你的風格爲第一碼塊：

CKEDITOR.editorConfig = function(config) { 

    ... 
    ... 

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

}; 
</script>

也有一些使用方法的更多文檔http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet

來源

2014-10-06 09:20:46 Markus

CKeditor將類添加到img標記

回答

相關問題