New ckEditor Toolbar Configuration

If you have questions about using mojoPortal, you can post them here.

You may want to first review our site administration documentation to see if your question is answered there.

This thread is closed to new posts. You must sign in to post in the forums.
3/22/2013 4:06:44 PM
Gravatar
Total Posts 2253

New ckEditor Toolbar Configuration

Hi Joe,

The ckEditor toolbar configuration in 2.3.9.6 leaves out some rather common items:

  • 'Outdent', 'Indent' (used to set the depth of lists or to indent a paragraph)
  • ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
  • 'Subscript', 'Superscript'

One that I think would be useful but we haven't included in the past is 'ShowBlocks'. It outlines all of the block elements (p, div).

I know we can setup our own config for these toolbars but I hoping you would see the value of the above items and add them back to the default.

Thanks,
Joe

3/22/2013 4:12:02 PM
Gravatar
Total Posts 2253

Re: New ckEditor Toolbar Configuration

Also, I just noticed that there is an extra comma on the last line for the config.toolbar_Full and config.toolbar_FullWithTemplates.

Thanks,
Joe D.

3/24/2013 12:45:26 PM
Gravatar
Total Posts 18439

Re: New ckEditor Toolbar Configuration

Hey Joe,

I could put those back or you can override them but do we really want those things or should they come from CSS?

ie do we really want to do things like this in the editor content:

<p style="text-align: justify;">

or indent:

<p style="padding-left: 30px;">

?

I feel kind of the same way about those as the fonts and colors and why they are removed from the editor because hard coded style goes against skinnable design where everything should be controlled by CSS.

Thanks for the heads up about the extra commas, I'll fix that.

Best,

Joe

3/26/2013 4:49:33 PM
Gravatar
Total Posts 18439

Re: New ckEditor Toolbar Configuration

I'm thinking the best solution for this would be to add some system styles for a few things like indented and justified then add the corresponding default styles in the common styles css file. Then it would be cleaner and allow adjusting by css overrides in custom css files.

It would be perfect if we could find a way to override the functionality of those toolbar items to add the corresponding classes instead of the hard coded style. I'll at least investigate if that is feasible. 

How does that sound to you?

Thanks,

Joe

3/26/2013 5:27:22 PM
Gravatar
Total Posts 2253

Re: New ckEditor Toolbar Configuration

Hi Joe,

I didn't see your response from the 24th. I agree with your points there.

Including these in a common CSS file and then overriding the buttons sounds like a great idea to me.

I just tried using the config.justifyClasses option and it works well.

I'll look into the Indent and Superscript/Subscript.

Thanks,
Joe D.

3/26/2013 5:40:31 PM
Gravatar
Total Posts 2253

Re: New ckEditor Toolbar Configuration

Hi Joe,

This was actually very simple. I was able to assign classes for all the items I listed.

I'm not sure that we need to do that for Subscript and Superscript because they're actual elements.

Anyway, I emailed the ckeditor-mojoconfig.js file to you.

Thanks,
Joe

3/27/2013 2:08:08 PM
Gravatar
Total Posts 18439

Re: New ckEditor Toolbar Configuration

Thanks for the help with this. The source code repository has been updated with the latest version of CKeditor as well as the css classes and config changes to support indents and justify from css.

Unfortunately there doesn't seem to be corresponding config options for TinyMCE so it still uses hard coded styles.

Best,

Joe

3/31/2013 10:59:45 PM
Gravatar
Total Posts 18

Re: New ckEditor Toolbar Configuration

Hi Guys,

I downloaded the latest source, version 2.3.9.6, and saw where the CKEditor added the indent classes (in the source view), but the wysiwyg editor doesn't use the style to indent the text while editing the content.

I was using an old skin, the i7media-2horizontalmenus, but switched to one of the Artisteer 4.1 skins and it still had the same problem.

Any ideas?

4/1/2013 9:52:37 AM
Gravatar
Total Posts 18439

Re: New ckEditor Toolbar Configuration

What steps did you use to get the source code? The only correct way to get the source code is with TortoiseHG.

Are you sure you are using source code not the pre-compiled official release

Are you sure you applied the changesets to your working copy?

Did you rebuild the solution and visit /Setup/Default.aspx?

Does the style.config file in your skin include the common css?

<file cssvpath="/Data/style/common/style.css" imagebasevpath="/Data/style/common/">none</file>

 

4/1/2013 10:45:05 AM
Gravatar
Total Posts 18

Re: New ckEditor Toolbar Configuration

Hi Joe,

Yes, I use TortoiseHG to pull down latest source. I typically do that every week or two. I also cleaned the solution and did a full rebuild. I'm currently on revision 5122 of the source. After pulling down updates from TortoiseHG and building, I always visit the setup/default.aspx page.

My old skin, the i7media-2horizontalmenus, didn't have the entry for the common.css which is odd since most of the others did, so I added it. This allowed the content to be properly indented when viewing in the blog, just not the CKEditor. I also noticed that the tabs in the blog editor no longer appeared (Content, Excerpt, Page Media Data, etc.) so I figured some other style changes had been made with this latest version. I then copied the skins folder in web/data/skins to my skins folder and selected the art41-darkgears skin which does have the entry for common.css. I made a backup of my skins folder before copying in the new skins. The tabs do appear in the edit blog page with the new skin so I guess something in my old skin needs to be updated to work with this version of the code.

I tried to duplicate this issue in the Demo site, but it currently does not have the indent/un-indent buttons.

Does this work for you?

4/1/2013 10:50:05 AM
Gravatar
Total Posts 18439

Re: New ckEditor Toolbar Configuration

The demo site is not yet updated with these changes.

See Important Skin Changes for notes about updating your skin. 

You may need to reset your skin guid and do a hard refresh to make things look right in the editor after making changes to skin such as style.config

Hope that helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.