Solved

CK Editor 3.6 custom styles

Posted on 2013-01-18
10
265 Views
Last Modified: 2013-01-19
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
Comment
Question by:Scott Fell,  EE MVE
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38796348
Hi,

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

Hope it helps u...
0
 
LVL 53

Author Comment

by:Scott Fell, EE MVE
ID: 38796406
yea, I googled that too.   Can you get ti to work with the code I provided.
0
 
LVL 53

Author Comment

by:Scott Fell, EE MVE
ID: 38796417
here is a sample  to play with http://jsbin.com/utupol/1/edit
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38796426
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
 
LVL 53

Author Comment

by:Scott Fell, EE MVE
ID: 38796437
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
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38796458
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
 
LVL 23

Accepted Solution

by:
Roopesh Reddy earned 500 total points
ID: 38796464
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
 
LVL 53

Author Comment

by:Scott Fell, EE MVE
ID: 38796473
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
 
LVL 53

Author Comment

by:Scott Fell, EE MVE
ID: 38796484
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
 
LVL 53

Author Comment

by:Scott Fell, EE MVE
ID: 38796491
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

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Help with mod_substitute 18 77
Angular2 remove duplicates 11 24
NOT having JQuery DataTable Columns Sort 7 35
Pass a js value to an html form 5 42
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question