I'm using CKEditor on a PHP site using Composer to install CKEditor. And I set up various types of toolbar in the file config.js of it. When I change the toolbar I want in the file config.js it changes on the site, but it has pages that I would like to have a toolbar other than the one I chose in config.js .
How do I change it directly on the page I want?
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 link .
I also needed one day to work with a smaller toolbar and another default, create a Javascript class in 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 textarea with the name of Text strong>
<textarea name="Texto" id="Texto"></textarea>
Calling the class this way:
<script type="text/javascript">
var editor = new EditorHtml();
editor.EditorSmall(true);
editor.Render("Texto");
</script>
All settings you want to create a new toolbar are in docs ckeditor , where it is in% w / o EditorHtml the class configuration, you make the changes, having then a default type and another type configured with your style.
References