loopindex / ckeditor-track-changes

Track changes plugin for CKEditor, based on ICE (track changes for TinyMCE).
www.loopindex.com
Other
51 stars 55 forks source link

Toolbar control #10

Closed dbuerer closed 10 years ago

dbuerer commented 11 years ago

I have a custom specific tool bar configuration for CKEDitor. I am trying to setup my configuration so that TOGGLE_SHOW is the only icon in the toolbar for normal users, and, for the moderator they get TOGGLE_SHOW, ACCEPT_ALL, ACCEPT_ONE, REJECT_ALL, REJECT_ONE

I may be doing something wrong if so my apologies i am still very new to CKEDitor but learning rapidly...however...., I expect that i can define the toolbar like this: toolbar: [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'savebtn', 'Preview', 'Print', '-', 'Templates' ] }, ..... .....

    { name: 'liteTB', groups: ['lite'], items: ['TOGGLE_SHOW']}
]

and that doesn't work, in fact none of the buttons show up at all. I've tried also listing the commands in config.lite.commands and that doesn't seem to work.

Suggestions?

imdfl commented 11 years ago

Hi,

You have two standard ways to accomplish this configuration:

  1. If the user and the moderator use separate config files,just add the following to each config file, with the appropriate modifications to the value of lite.commands:
    var lite = config.lite || {};
    config.lite = lite;
    lite.commands = ["lite.ToggleShow", "lite.AcceptAll"]; 
/* you may use here the symbolic constants LITE.Commands.TOGGLE_SHOW, 
LITE.Commands.ACCEPT_ALL etc. if you know that lite_interface.js file has been loaded. 
If not, just copy the values of the constants you want from lite_interface.js or directly 
from plugin.js */
  1. If you're using only one config.js file, you can set the value of lite.commands in the callback of the "configLoaded" event:
    editor.on('configLoaded', function() {
        var conf = editor.config;
        var lt = conf.lite = conf.lite || {};
        lt.commands = ["lite.ToggleShow", "lite.RejectOne"]; 
/* again, you may use the symbolic constants from lite_interface.js
 if you know that it's loaded. */
    });

Please let me know if this has worked for you.
dbuerer commented 11 years ago

Thankyou. I was trying to pass the lite.config in using the config.lite object when I was creating the instances. This works really good for username and userid but evidently doesn’t work at all for the toolbar. This is working perfectly now. Thankyou.

dbuerer commented 11 years ago

I'm sorry I take it back it's not working when i pass a custom toolbar config into the instance when I initialize it, it only work when i use the standard toolbar config.....Here's how i am initiating the eidtor in compelte code. None of the lite toolbar objects show up at all.

$('#myDoc').ckeditor({ customConfig:'', disableNativeSpellChecker:false, filebrowserImageUploadUrl:'docEditUpload.php', toolbarCanCollapse:true, extraPlugins: 'savebtn,lite', saveSubmitURL: '', height:browserHeight, lite:{ userName:userName, userId:userId }, toolbar: [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'savebtn', 'Preview', 'Print', '-', 'Templates' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }, { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks','Source' ] }, { name: 'others', items: [ '-' ] }, { name: 'about', items: [ 'About' ] }//, //'/', //{ name: 'leviton', items: ['requirementPriority']} ] });

var editor = $('#myDoc').ckeditor().editor; editor.on('configLoaded', function() { var conf = editor.config; var lt = conf.lite = conf.lite || {}; lt.commands = ["lite.ToggleShow", "lite.RejectOne"]; });

imdfl commented 11 years ago

Hi,

I haven't used the jquery adapter for ckeditor so I can't tell you offhand why adding the commands object to the lite field in the options passed to $('#myDoc').ckeditor() doesn't work. What I do see is that you're not creating a "lite" group in the toolbar. LITE tries to create its own toolbar group, but as the documentation states:

This method won't modify toolbar groups set explicitly by CKEDITOR.config.toolbarGroups. 
It will extend only default setting

Thus, since you're explicitly setting the toolbar, you should add a group called "lite" to your toolbar configuration. Once this works, pls check again whether or not you can configure LITE thru the lite object passed to $('#myDoc').ckeditor() .

dbuerer commented 11 years ago

ironically enough, that was the first think that i tried: toolbar: [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'savebtn', 'Preview', 'Print', '-', 'Templates' ] }, ... '/', { name: 'lite', groups: [ 'lite' ]} ] });

I also tried a {name:'lite',groups:'[lite'],items:['TOGGLE_SHOW']} and that didn't work either. However the toolbar definition works great with all of the out-of-the box plugins. Unfortunatley i'm very new to CKEditor and advanced javascript so it's way too much trial and error.....in this case mostly error.

imdfl commented 11 years ago

Please try without the groups, i.e.

{ name: 'lite' }
dbuerer commented 11 years ago

Unfortunately same result

imdfl commented 11 years ago

I looked again at your code and noticed that you were setting the "toolbar" property in your initial editor configuration, while our code examples and the code I've written here refer to "toolbarGroups". I missed that before and gave you advice based on the appropriate setting for the latter. The toolbar property contains the entire toolbar configuration. Thus you must specify which lite buttons should be present. The catch is that you're not listing commands, rather you are listing button names as they are set by the plugin. The LITE button names are the command names with '.' replaced by '_'. Thus, you should try something like:

toolbar: [...,
{ name: "lite", items: ["lite_ToggleTracking", "lite_ToggleShow"] },
...
]
dbuerer commented 11 years ago

Perfect!!!! I tried this once but had the wrong name for the buttons. This is working well now. Thank you. Passsing the items in in the toolbars object at initiation is no problem either.

David

gsinha commented 5 years ago

This worked for me: {name: "lite", items: ['lite-toggletracking', 'lite-toggleshow', 'lite-acceptall', 'lite-rejectall', 'lite-acceptone','lite-rejectone'] }

Maybe someone gets benefit from this.