Swap the Ckeditor Toolbar

Asked

Viewed 601 times

2

I’m using Ckeditor on a PHP site using Composer to install Ckeditor. I’ve set up several types of Toolbar in the archive config.js of it. When I change the Toolbar that I want on file config.js he exchanges on the site, but there are pages that I would like it to be a Toolbar different from the one I chose in config.js.

How do I exchange it directly on the page I want?

php commiserate ckeditor

2 answers

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']
] ;

your page.html

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

More details on http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Toolbar .

0

I also needed to one day work with a smaller Toolbar and another default, create a class in Javascript this way:

<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>

As an example a textarea by the name of Text

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

Calling the class that way:

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

All settings you want to create a new one Toolbar is in the Docs ckeditor, where is the class Editorhtml the configuration toolbar_Custom, you make the appropriate changes, then having a default type and another configured with your style.

References

Browser other questions tagged php commiserate ckeditor

You are not signed in. Login or sign up in order to post.