Toggle Classes for Buttons in Rich Text Editor

[N1CK3RS0N]

I got my WYSIWYG text editor working pretty good. I'm trying to figure out how I should make the buttons classes toggle.

 

Heres the demo.

 

http://www.cigarcompendium.com/WYSIWYG/index.html

 

I want it so when bold is currently enabled on the text you are typing then the bold button class will change to active. Just not sure how to check if that effect is currently enabled in the editor.

[BillyBoB]

You are first going to have to name the items in the toolbar and change the javascript function button up a lil

so for bold do

<div onclick="button('bold')" class="button" id="boldBtn"><img title="Bold" alt="Bold" src="images/bold.png" class="image"></div>

 

function button(a) {
if(!document.getElementById(a+'Btn').style.backgroundColor) { document.getElementById(a+'Btn').style.backgroundColor = "#D5DDE5"; }else{ document.getElementById(a+'Btn').style.backgroundColor = null; }
document.getElementById('editor').contentWindow.document.execCommand(a, false, null);
document.getElementById('editor').contentWindow.focus();
} 

 

that should work for you.

 

Good luck! Have fun

[N1CK3RS0N]

You are first going to have to name the items in the toolbar and change the javascript function button up a lil

so for bold do

<div onclick="button('bold')" class="button" id="boldBtn"><img title="Bold" alt="Bold" src="images/bold.png" class="image"></div>

 

function button(a) {
if(!document.getElementById(a+'Btn').style.backgroundColor) { document.getElementById(a+'Btn').style.backgroundColor = "#D5DDE5"; }else{ document.getElementById(a+'Btn').style.backgroundColor = null; }
document.getElementById('editor').contentWindow.document.execCommand(a, false, null);
document.getElementById('editor').contentWindow.focus();
} 

 

that should work for you.

 

Good luck! Have fun

 

Exactly what I did and here is the problem.

 

You click bold, now the bold button class is shown as active. Now when you click into an area with not-bold text, it still shows as active.

 

So the real way to do this would be to find what effects are currently applied to what you are typing, and then change the class based on that.

 

Only problem is I don't know how to find what effects are applied to the current text. Find how to do that and we got ourselves an answer.

[N1CK3RS0N]

Any ideas?