如何按类名将配置应用于textareas?

时间:2014-12-11 08:22:07

标签: javascript ckeditor

我有以下文件,我正在尝试用类名和给定配置替换textarea:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1" class="js-ckeditor"></textarea>
        <script>
            CKEDITOR.replaceAll( 'js-ckeditor', {
                removeButtons: 'Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Table,HorizontalRule,Smiley,SpecialChar,Maximize,Source,Indent,Blockquote,Styles,Format,About,SpellChecker',
                toolbar: [
                    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'RemoveFormat' ] },
                    { name: 'resources', items: [ 'Link', 'Image' ] },
                    { name: 'list', items: [ 'NumberedList', 'BulletedList' ] }
                ],
                toolbarGroups: [
                    { name: 'group1', groups: [ 'basicstyles' ] },
                    { name: 'group2', groups: [ 'resources' ] },
                    { name: 'group3', groups: [ 'list' ] }
                ],
                removePlugins: 'resize,elementspath',
                removeDialogTabs: 'link:advanced;image:Link;image:advanced',
            } );
        </script>
    </body>
</html>

..问题是它用CKEditor实例替换textarea,但它不适用于配置。

但是,如果我CKEDITOR.replace( 'editor1', {,它会替换textarea并应用配置。但在我的情况下,我需要替换类名。我可以使用replaceAll或其他方法将配置应用于元素吗?

2 个答案:

答案 0 :(得分:1)

请参阅documentation of CKEDITOR.replaceAll。使用回调函数选择正确的textareas子集并设置配置:

CKEDITOR.replaceAll( function( textarea, config ) {
    if ( new CKEDITOR.dom.element( textarea ).hasClass( 'js-ckeditor' ) ) {
        CKEDITOR.tools.extend( config, {
            removeButtons: 'Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Table,HorizontalRule,Smiley,SpecialChar,Maximize,Source,Indent,Blockquote,Styles,Format,About,SpellChecker',
            toolbar: [
                { name: 'basicstyles', items: [ 'Bold', 'Italic', 'RemoveFormat' ] },
                { name: 'resources', items: [ 'Link', 'Image' ] },
                { name: 'list', items: [ 'NumberedList', 'BulletedList' ] }
            ],
            toolbarGroups: [
                { name: 'group1', groups: [ 'basicstyles' ] },
                { name: 'group2', groups: [ 'resources' ] },
                { name: 'group3', groups: [ 'list' ] }
            ],
            removePlugins: 'resize,elementspath',
            removeDialogTabs: 'link:advanced;image:Link;image:advanced',
        } );

        return true;
    } 

    return false;
} );

答案 1 :(得分:1)

您可以使用jquery $ .each函数:

jQuery(document).ready(function() {

    $( ".ckeditor" ).each(function( index ) {
        CKEDITOR.replace($( this ).attr("id"),{
            //your configurations
        });
    });
});