Create your own advanced WYSIWYG editor [Part 4]
This is the fourth of the six-part tutorial explaining how to [b]create your own advanced WYSIWYG editor. In this chapter we will go into explaining how to handle problems with different browsers like disablig CSS and we will make a new color pallet ; in addition, we will also add smiles,font size and increase-decrease iframe height to our editor.
Let's Begin :
we want to make our editor cross-brwoser in HTML ,so that we get the same output in BBCODE but how ?!
we can disable css - to use for example <b></b> instead of <span></span> which is used mainly in Gecko browsers - we can do try catch to disable css and sure we will add this TRY in onload function

Code: Select all

		// disable CSS in Geko ,IE and opera  
		try {
			// Try new Gecko method
			Editor.execCommand("styleWithCSS", 0, false);
		} catch (e) {
			// Use old method
			try {Editor.execCommand("useCSS", 0, true);} catch (e) {}
		}

as you see we disabled CSS with Gecko and IE and opera browsers but NOT safari ,chrome as this command doesn't work for them

now this is our onload function

Code: Select all

window.onload=function(){
Editor=document.getElementById('box').contentWindow.document;
Editor.designMode="on";
//disableCSSinGeko,IEandopera
try{
//TrynewGeckomethod
Editor.execCommand("styleWithCSS",0,false);
}catch(e){
//Useoldmethod
try{Editor.execCommand("useCSS",0,true);}catch(e){}
}
} 

Smiles Feature : i think the most simple way is using InsertImage as discussed before with a parameter [the path of the smiley ].
i think it's very simple
// add smiley through path

Code: Select all

functionAddSmileyIcon(imagePath){
Editor.execCommand('InsertImage',false,imagePath);
} 

Cross-browser color pallet Feature :
this function quoted from phpBB3 ,and it'll create a table with all web-safe colours
just copy it as i think it's self-descriptive

Code: Select all

//printcolourpaletteinatable
functioncolorPalette(dir,width,height)
{
varr=0,g=0,b=0;
varnumberList=newArray(6);
varcolor='';
numberList[0]='00';
numberList[1]='40';
numberList[2]='80';
numberList[3]='BF';
numberList[4]='FF';
document.writeln('<tablecellspacing=1"cellpadding=0"border=0">');
for(r=0;r<5;r++)
{
if(dir=='h')
{
document.writeln('<tr>');
}

for(g=0;g<5;g++)
{
if(dir=='v')
{
document.writeln('<tr>');
}
for(b=0;b<5;b++)
{
color=String(numberList[r])+String(numberList[g])+String(numberList[b]);
document.write('<tdbgcolor=#'+color+'"style=width:'+width+'px;height:'+height+'px;">');
document.write('<ahref=#"onClick=Colour(\'#'+color+'\');returnfalse;"><imgsrc=images/spacer.gif"width=+width+'"height=+height+'"alt=#'+color+'"title=#'+color+'"/></a>');
document.writeln('</td>');
}
if(dir=='v')
{
document.writeln('</tr>');
}
}
if(dir=='h')
{
document.writeln('</tr>');
}
}
document.writeln('</table>');
} 

and to use it add anywhere in the HTML body

Code: Select all

<scriptlanguage=JavaScript">
colorPalette('h',15,10);
</script>

and the table will appear and will work cross-browser on all browsers
Font Size Feature :

Code: Select all

function Select(selectname)
{
  var cursel=document.getElementById(selectname).selectedIndex;
  if (cursel != 0) {
    var selected=document.getElementById(selectname).options[cursel].value;
    Editor.execCommand(selectname, false, selected);
    document.getElementById(selectname).selectedIndex=0;
  }
  document.getElementById("box").contentWindow.focus();
}

and this is our select menu

Code: Select all

<select unselectable=on" onchange=Select(this.id);">
  <option value=Size">Size</option>
  <option value=1">Tiny</option>
  <option value=2">Small</option>
  <option value=3">Normal</option>
  <option value=5">Large</option>
  <option value=7">Huge</option>  
</select>

Increase/decrease iframe height Feature :
it's a simple function that gets the height of the iframe and increase or decrease it [cross-browser]

Code: Select all

//increaseanddecreasesizeoftheiframe
functiontextbox_resize(pix)
{
varbox=document.getElementById('box');
varnew_height=(parseInt(box.style.height)?parseInt(box.style.height):300)+pix;

if(new_height>0)
{
box.style.height=new_height+'px';
}

returnfalse;
} 

and to use it add this att to the link or image
to decrease

Code: Select all

onClick=textbox_resize(-100);

to increase

Code: Select all

onClick=textbox_resize(100);

Stay Tuned for part 5
waiting for your questions

[/b][/b]Support spread the tutorial :

Digg it
http://digg.com/programming/Create_your ... G_editor_2

---

Stumble it
http://almsamim.stumbleupon.com/

---

http://delicious.com/almsamim

I think this is a great tutorial. Question.... ^ v Why is the linebreak so vast in IE but not in FF?

Everytime I hit enter there seems to be a gap??

I am rage wrote:I think this is a great tutorial. Question.... ^ v Why is the linebreak so vast in IE but not in FF?

Everytime I hit enter there seems to be a gap??

linebreak is replaced by

Code: Select all

< p>&nbsp;< /p> 

in IE so it's so vast you can solve it by replaceing

Code: Select all

< p>&nbsp;< /p> 

with

Code: Select all

< br/> 

I´m sorry but I am at loss here... I have tried a number of ways to replace the p tag to the br tag without succes. I hav alwso learned that yo could use shift-enter to achieve this, but the users on the site I try to build don´t understand these commands. I will not quit until I make it, but a hint in the right direction would be awsome.

no problem man try this simple way in onload function

Code: Select all

		Editor = document.getElementById('box').contentWindow.document;
		//writing iframe content
		var iframeContent;
		iframeContent  = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" xml:lang="en-gb">\n';
		iframeContent += '<head><style type="text/css">body {background: #F8F8FF;margin:0;padding:0;}p {margin:0;padding:0;min-height: 1em; } *+html p { min-height: auto; }div {margin:0;padding:0;}</style></head><body>';	
		iframeContent += '</body>';
		iframeContent += '</html>';
		Editor.open();
		Editor.write(iframeContent);
		Editor.close();

this way add css to iframe content making margin and padding of the content 0
and tested by me and worked fine

I am impressed. Are you omnipotent?

Thanks a lot.

I am rage wrote:I am impressed. Are you omnipotent?

Thanks a lot.

i hope you sloved the problem and also improved it . to use CSS in your iframe to stylish links, lists.. etc

sure it's possible
that is the css of the iframe content

Code: Select all

 iframeContent += '<head><style type="text/css">body {background: #F8F8FF;margin:0;padding:0;}p {margin:0;padding:0;min-height: 1em; } *+html p { min-height: auto; }div {margin:0;padding:0;}</style></head><body>'; 

you can add for example
img {border: 1px solid;}
it will add a border around all images
and you can stylish ul,ol also by the same way

I think I didn't explain my question properly.

In one of the versions you had up on the site of your WYSIWYG editor you had Editor.execCommand('InsertImage', false, imagePath)

This would add an image.
You had a series of smiles that would quickly be added. A list of them at the bottom.

When they were clicked it would add img src="images/smile/cry.gif"

What I was wondering if I could alter it so it could also add class="smiles" so that I could do some additional formating using css outside of the editor?

Also:
Or instead of normal html markup if it could generate spans that could be defined in css?