Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

CK Editor 3.6 custom styles

Can't seem to get a drop down for custom styles working.  I am looking to do this http://docs.cksource.com/CKEditor_3.x/Users_Guide/Styling/Styles where I can have the wysiwyg apply a specific class in my stylesheet to text.  I have the class already set up in the css.   I only want to use my custom classes in the selector.

Below is the js I am using.

	CKEDITOR.replace('ShortDesc', {
			    width: '800px',
			    height: '200px',
			    extraPlugins: 'charcount',
			    charcount_limit: '2000',
			    charcount_limitReachedUIColor: '#FF0000',
			    toolbar: [
			        ['Source', '-', 'Save', 'Preview'],
			        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
			        ['SpecialChar', 'Styles'],
			        ['Bold', 'Italic', 'Underline', 'Strike'],
			        ['FontSize'],
			        ['NumberedList', 'BulletedList'],
			        ['TextColor', 'BGColor'],
			        ['Link', 'Unlink', 'Anchor']
			    ],
			    on: {
			        instanceReady: function (ev) {
			            this.dataProcessor.writer.setRules('p', {
			                indent: false,
			                breakBeforeOpen: true,
			                breakAfterOpen: false,
			                breakBeforeClose: false,
			                breakAfterClose: true
			            });
			        }
			    }
			});

Open in new window

0
Scott Fell,  EE MVE
Asked:
Scott Fell,  EE MVE
  • 6
  • 4
1 Solution
 
Roopesh ReddyIT AnalystCommented:
Hi,

Check the solution in this thread - http://stackoverflow.com/questions/2102797/adding-custom-styles-to-ckeditor

Hope it helps u...
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
yea, I googled that too.   Can you get ti to work with the code I provided.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
here is a sample  to play with http://jsbin.com/utupol/1/edit
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Roopesh ReddyIT AnalystCommented:
Hi,

Did you had a look at this - http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

Moreover, where is the StyleSheet file for your code?

Hope it helps u...
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
yea seen all that.  Maybe too many times.  

If I have a custom style sheet with classes like .red or .blue, I want those styles to show up in the drop down.  I just couldn't seem to get it to work.

.red {
     color:red;
}
.blue {
     color:blue;
}
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

I tried that, and i can see now -

http://jsbin.com/utupol/2/

I modified the code in the JS Bin, check it!

Hope it helps u...
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

Let me put the JavaScript Code -

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
 
    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);	

CKEDITOR.replace('ShortDesc', {
  width: '400px',
  height: '200px',
  stylesSet: 'my_styles',
 
  toolbar: [
    ['Source', '-', 'Save', 'Preview'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
    ['SpecialChar', 'Styles'],
    ['Bold', 'Italic', 'Underline', 'Strike'],
    ['FontSize'],
    ['NumberedList', 'BulletedList'],
    ['TextColor', 'BGColor'],
    ['Link', 'Unlink', 'Anchor']
    ],
      on: {
        instanceReady: function (ev) {
        this.dataProcessor.writer.setRules('p', {
        indent: false,
        breakBeforeOpen: true,
        breakAfterOpen: false,
        breakBeforeClose: false,
        breakAfterClose: true
          });
        }
      }
  });

Open in new window


Proof here -
Working...
Hope it helps u...
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
Thank you.  Getting closer. http://jsbin.com/utupol/3/edit

I need to just add a class to a selected text.  The reason is some of the classes are css3 buttons with a lot of code and if want to use what is in an external style sheet that can be used on the cms and live.

If the text is

blah blah blah

and I want to add a class to that so I end up with

<span class="abc">blah blah blah</span>

I am wondering if the ckeditor just applies all the styles associated inline.  Maybe I will just do this server side and have them enter something like

<<abc>>blah blah blah<</abc>>
and just let my server side code replace it.

If we can figure out to just add the class, that would be best.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
I in part answered by own question...  The class i want to add is going to be on a link.  And the pop up for links in ckeditor allows you to type in  a class.  If you can figure out how do do that  by a drop down, that would be great.  But for now, I am going the easy route and just have them hand type in the class and provide a list of options on the page.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for padas's comment #a38796484
Assisted answer: 166 points for roopeshreddy's comment #a38796348
Assisted answer: 167 points for roopeshreddy's comment #a38796426
Assisted answer: 167 points for roopeshreddy's comment #a38796464

for the following reason:

I just realized the main class I need is on a link. &nbsp; And the pop up for links in ckeditor allows you to type in &nbsp;a class. &nbsp;If you can figure out how do do that &nbsp;by a drop down, that would be great. &nbsp;But for now, I am going the easy route and just have them hand type in the class and provide a list of options on the page.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now