[SOLVED] Basic VERY basic WYSIWYG Editor for smileys

[TheFilmGod]

I would like to add smileys to my blog - but keep it basic basic very basic. Pretty much a simple textarea with the option to add a smiley here and a smiley there. Trick is, I would like the smileys to be added at the cursor's location and even replace text if it's highlighted. - Just like it's done on phpfreaks, but I don't want all the other fancy tags (bold, italics, pictures, font size or face, etc)...

 

Maybe someone knows of a good tutorial or someone can lead me to the right direction. Google hasn't been very helpful.

[Adam]

Perhaps this could be helpful to you:

 

http://www.almsamim.com/create-your-own-advanced-wysiwyg-editor-part-1-t10.html

 

I've not read it myself but the comments seem positive. I dare say in order to create your own custom 'basic' editor, you're probably going to have to learn some of the advanced stuff as well.

[Philip]

Take a look at (it should get you started... even though it is an older entry):

http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript

[Adam]

That wouldn't work with WYSIWYG editors though, would it?

[Philip]

Why wouldn't it? OP stated he didn't need formatting, just inserting smilies, yes?

 

And take a look at the demo (again, I know it's older but it still works) http://alexking.org/projects/js-quicktags/demo/index.html

[Adam]

I though he meant like this...

 

[attachment deleted by admin]

[Daniel0]

Hmm... I didn't know we had a WYSIWYG editor.

[TheFilmGod]

I finally got it to work. I just needed some javascript to add "text" smileys at the cursor point.

 

	// Add symbol to textarea
		// Cache textarea
		textarea = document.getElementById('textboxer');

		// IE support
		if (document.selection) {
			textarea.focus();
			sel = document.selection.createRange();
			sel.text = symbol;
		}
		//MOZILLA/NETSCAPE support
		else if (textarea.selectionStart || textarea.selectionStart == '0') {
			textarea.focus();
			var startPos = textarea.selectionStart;
			var endPos = textarea.selectionEnd;
			textarea.value = textarea.value.substring(0, startPos) + symbol + textarea.value.substring(endPos, textarea.value.length);
		}
		// Default to appending the smiley at the end
		else {
			textarea.value += symbol;
		}

[Philip]

Hmm... I didn't know we had a WYSIWYG editor.

Yeah it's under Profile -> Look and Layout -> [X] Show WYSIWYG editor on post page by default?

[Adam]

There's a button to toggle between them above the editor as well, little red 'A' on right.

[TheFilmGod]

Edit: I didn't we had a WYSIWYG editor either! So I tried adding in a smiley and stretching it out but it doesn't post the image changes?