2

Estou usando o CKEditor em um site meu em PHP usando o Composer para instalar o CKEditor. E configurei vários tipos de toolbar no arquivo config.js dele. Quando eu altero a toolbar que eu quero no arquivo config.js ele troca no site, mas tem páginas que eu gostaria que fosse uma toolbar diferente da que eu escolhi no config.js.

Como faço para trocá-la diretamente na página que eu quero?

2 Respostas 2

2

Use ToolbarSets.

config.js

config.ToolbarSets = new Object() ;
config.ToolbarSets["MinhaToolbar"] = [
['EditSource','-','Cut','Copy','Paste','PasteText','PasteWord','-','Find','-','Undo','Redo','-','SelectAll','RemoveFormat','-','Link','RemoveLink','-','Table','Rule','SpecialChar'] ,
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','InsertOrderedList','InsertUnorderedList','-','Outdent','Indent','-','ShowTableBorders','ShowDetails'] ,
['FontStyle','-','FontFormat','-','Font','-','FontSize','-','TextColor','BGColor']
] ;

sua-pagina.html

var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.ToolbarSet = 'MinhaToolbar' ;
oFCKeditor.Create() ;

Mais detalhes em http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Toolbar .

0

Eu também precisei um dia trabalhar com um toolbar mais reduzido e outro default, crie um class no Javascript dessa maneira:

<script type="text/javascript"> 
    var EditorHtml = function () {
        var name;
        var editorsmall;
        EditorHtml.prototype.Name = function (value) {
            this.name = value;
        };
        EditorHtml.prototype.EditorSmall = function (value) {
            if (value == true || value == false) {
                this.editorsmall = value;
            } else {
                this.editorsmall = false;
            }
        }
        EditorHtml.prototype.Render = function (value) {
            if (value != undefined) {
                this.name = value;
            }
            if (this.editorsmall == true) {
                var editor = CKEDITOR.replace(this.name, {
                    toolbar: 'Custom',
                    toolbar_Custom: [
                        { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
                        { name: 'styles', items: ['Styles', 'Format'] },
                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat'] },
                        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Blockquote', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'] },                    
                        { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
                        { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },
                        { name: 'tools', items: ['Maximize', '-', 'About'] }
                    ]
                });
            } else {
                var editor = CKEDITOR.replace(this.name);
            }
            CKFinder.setupCKEditor(editor, '/Content/ckeditor/ckfinder/');
        };
    }
</script>

Como exemplo um textarea com o nome de Texto

<textarea name="Texto" id="Texto"></textarea>

Chamando a classe dessa forma:

<script type="text/javascript"> 
   var editor = new EditorHtml();
   editor.EditorSmall(true);
   editor.Render("Texto");
</script>

Todas as configurações que deseja criar um novo toolbar está no docs ckeditor, aonde está na class EditorHtml a configuração toolbar_Custom, você faças as devidas alterações, tendo então um tipo default e outro configurado com o seu estilo.

Referências

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .