Hello,
In addition to strong and em, my site uses i and b tags. I need ot create these in CKeditor, alongside the existing strong and em buttons.
I see that there plugins to either drop in an HTML snippet, as with the timestamp plugin. There are also plugins like abbr, which pop up a dialog and then fill in the results.
However, I want my buttons to handle just like the strong and em ones. You can either select some text and click it, which wraps the text in the tags, or you can click it, start typing and then unclick it, or, you can focus on some text which is already wrapped, in which case the button depresses itself, and then if you click it again, it removes the formatting.
If I could find even one plugin that uses this kind of functionality, I could tailor it to fit my needs. Does anyone have any ideas?
Thanks!
Solved!
I realized I could download the Basic Styles plugin, even though it's bundled by default, change all instances of basicstyles, in the file and folder name, to something like newstyles, and replace the tags in there with your own tags.
I added these lines to my main config file:
config.coreStyles_bold = { element: 'b' };
config.coreStyles_italic = { element: 'i' };
I also have these lines in the same file:
config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag
config.protectedSource.push( /<b[\s\S]*?\>/g ); //allows beginning <b> tag
config.protectedSource.push( /<\/b[\s\S]*?\>/g ); //allows ending </b> tag
Notice that b is not set to override strong and i preserves em. Then I defined these in my plugin, and now I have two buttons for I and B, and two for strong and em.
Awesome. Thanks for show us
Awesome. Thanks for show us how you did it!
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
No problem. At the risk of
No problem. At the risk of cross-posting, I should point out that while this does work, switching to source edit and then back to rich text is going to generate the CKE_PROTECTED issue mentioned elsewhere. This means the content will show in the editor, but the tags themselves will be commented out.
If anyone knows how to fix this, please let me know.
thank for your article
thank for your article
No problem. I have figured
No problem. I have figured out that you don't actually need the config.protectedSource.push lines at all. If you configure the core styles to use i and b, they will work fine on their own. Since we aren't specifically overriding em and strong, this means those tags will work fine, as well, and you can create new buttons for them. Now you can have all four.
I use em for small caps, and strong for big text. When you take out the protectedSource lines, the CKE_PROTECTED problem goes away.