Editor Toolbar
Table of contents
- 1. Introduction
- 1.1. Intended Audience
- 1.2. Additional information
- 1.2.1.1. Style dropdown
- 1.2.1.2. Templates
- 1.2.1.3. Adding content
- 1.2.1.4. Editor Reference
- 1.2.1.5. DekiScript Tools
- 1.2.1.5.1. Start scripting
- 1.2.1.5.2. Extensions
- 1.2.1.5.3. Transformations
- 1.2.1.5.4. Quick Reference
- 1.2.1.5.5. Line & column numbers
- 1.3. References
- 2. Status
- 3. Functional Specification
- 3.1. Non-goals
- 4. Technical Specification
- 4.1. UI requirements
- 4.1.1. Default editor skin: Office 2003
- 4.1.2. Customizable dropdown menus
- 4.1.3. View toolbar
- 4.1.3.1. View menu
- 4.1.4. Insert toolbar
- 4.1.4.1. Insert menu
- 4.1.5. Heading toolbar
- 4.1.5.1. Heading menu
- 4.1.6. Styles dropdown
- 4.1.7. Content transformations button
- 4.1.8. DekiScript bar
- 4.1. UI requirements
Introduction
MindTouch has gone through many iterations of the editing experience. Different codebases, various functionality, new features, etc. In order to add some consistency and maintain a smooth editing experience, this spec aims to outline the requirements for the default CKEditor toolbar set or the "MindTouch Toolbar". The criteria to outline are: Button sets, button placement, & button icons.
Intended Audience
This should serve as a reference guide for core users who are interested in determining what each button actually does and what functionality can be expected in each toolbar set.
Additional information
Here are some feature ideas.
Style dropdown
When using the style dropdown it's not clear when something is selected and that multiple styles can be selected. Presenting the styles with a checkbox appearance would be more intuitive to the end users.\
Templates
Add text label to templates in the toolbar. These are an important feature and should be highlighted more.
Adding content
Marking new content tools as insert will help focus the user's attention. Insert images, flash, video, templates?
Editor Reference
Provide a link in the toolbar for additional editor tips. Optionally, overload the button tooltips to display the editor shortcuts to the user.
DekiScript Tools
Start scripting
Move dekiscript from the styles dropdown and make a button on the dekiscript toolbar.
Extensions
Put extensions on the dekiscript toolbar.
Transformations
Group transformations with the other DekiScript tools.
Quick Reference
Provide a link in the toolbar for help. Url should be configurable via Editor JS configuration. The default url should just link to: http://developer.mindtouch.com/en/docs/DekiScript/Reference
The link could either open a thickbox popup or open a new window.
Line & column numbers
When creating DekiScript blocks and encountering errors, it's challenging to find the correct line number. Providing line/col information in the toolbar will facilitate rapid DekiScript app development.
Status
Finalizing scoping by Guerric
Functional Specification
Non-goals
This feature will not reinvent the CKEditor toolbar. It aims to provide a better user experience within the framework provided by CKEditor.
Technical Specification
UI requirements
Below are the new changes required to the editor toolbar. Additional button reordering is required and can be determined from the toolbar mockup.
Default editor skin: Office 2003
The CKEditor "Kama" skin uses border-radius which is not supported by IE browers. Additionally, it has extra padding and doesn't use the toolbar space efficently. The "Office 2003" skin doesn't suffer from these problems however the toolbar colors may need to be fine tuned.
Customizable dropdown menus
New user definable menus are needed to consolidate additional functionality 2-clicks away. Each reference to "menu" below is a user customizable menu. The listed options are the defaults.
View toolbar
When a view state is selected, it should remain highlighted until the user unselects the view state.
View menu
- Show blocks
- Source
Insert toolbar
Buttons: Link, Unlink, Table, Image, Template, Video
Insert menu
- Extension
- Flash
- Comment
- Page break
Heading toolbar
Instead of hiding the heading styles under the paragraph format dropdown, this functionality will be exposed as buttons on the toolbar.
The buttons should highlight according to the style that the cursor is located on. For each heading, the corresponding heading button would show up as being selected.
Buttons: Normal, H1, H2, H3, Heading Menu
Heading menu
- H4
- H5
Styles dropdown
The style dropdown should employ radio & checkbox styles to better communicate to the user what styles are currently being applied. Since block styles can only be applied one at a time, these should be selected via radio buttons. Inline styles should be selected via checkbox since multiple inline styles could be applied.
Below are the default styles that the toolbar will ship with.
- Block styles
- DekiScript
- Formatted
- Block Quote
- Inline styles
- Plaintext (nowiki)
Content transformations button
Instead of taking up a large portion of the toolbar realestate, the transformations dropdown should be located behind a single button click.
DekiScript bar
The DekiScript bar should float off to the right and provide Line/Col information when the user is editing a DekiScript block. In the future, this may contain additional DekiScript specific functionality.
- Tag page
- What links here
Files 3
| File | Version | Size | Modified | |
|---|---|---|---|---|
| ||||
| ||||
| ||||
| Images 2 | ||
|---|---|---|
 Stock CKEditor Office2003 skinckeditor-skin-office2003.png |  Finalizingeditor-toolbar-mockups.png | |
Copyright © 2011 MindTouch, Inc. Powered by
This all looks like a *gigantic* improvement. I will look through to nitpick specifics, but at first glance it looks absolutely wonderful. I like the idea of the DekiScript bar, and look forward to seeing a mockup.
Great work. I've used it in the developer site for the first time today and it's really a huge improvement!
Obviously not for this release, but might dekiscript syntax highlighting be implemented at some point?rberinger contributed syntax definition files for Crimson Editor: http://developer.mindtouch.com/DekiScript/Tutorials/DekiScript_Syntax_Highlighting
Also, some sort of autosave would be a real bonus - I currently use a text editor with autosave, and copy / paste to CKEditor periodically when coding / doing anything taking more than 2 minutes, but users can't be told to do that in my experience!