I am working on admin back-end for my personal project and I need a script similar to WYSIWYG editor. I have looked at many ready-to use scripts but all of them are incredibly bloated, trying to completely mimic real word processors not to mention they use old tags like <b> for bold or <br> for line breaks and sometimes they even break the web page style.


All I need is 7 buttons that apply to any <textarea> with some given ID. The buttons I need are:


“B” for wrapping highlighted text in <strong> </strong> tags
“I” for wrapping highlighted text in <i> </i> tags
“U” for wrapping highlighted text in <u> </u> tags
“SUB” for wrapping highlighted text in  tags
“SUP” for wrapping highlighted text in  tags
and
“Link” button, which when clicked shows a small popup window where I can type the desired URL and then it wraps the selected text into <a href=”URL as typed” class=”tlink”> </a>. The "tlink" class is my personal style that I will use once the site is up and running, so I need it there.
Also, the “Enter” key stroke should result in <br /> being added to the end of the line and then move down.


If possible I'd also like a colour picker with either a grid of 8 or 16 basic colours. The ideal functionality would be a “COL” button, which when clicked shows a small popup window where I can choose the desired colour and wraps the highlighted text in <span style=”color: #HEXcolorcode;”> </span> tags.


I do not need those tags to be hidden from writers view. They can be visible as soon as I hit the appropriate button. Like I said, this is for admin back-end use, so it doesn't have to behave like those big time WYSIWYG scripts.


I don't know how easy or difficult this is to do for anyone who knows JS, but except for “Link”, “COL” and “ENTER” key functionality it seems like a lot of repetitive code, which makes me hopeful that I'll find somebody willing to do this. I don't want any <p> tags or font types, font sizes, image insertions, undo, redo, bulletpoint, unlink, smilies etc, etc.


I have already made the buttons, but I am no good with JavaScript so I want to ask you guys for help. Can someone please write that script for me?

In the attachment you'll find my buttons

This is not something that can just be thrown together. You need a team.
There are so many good options already. I've never had problems with the tinyMCE, it can be configured to be as simple as you like, and it uses <strong></strong> not <b></b>.

Taken from my very own WYSIWYG editor. Inserts BBCode style tags into the text

m_sSelText is the container for the selected text if you are using a "Highlight & Format" style editor.

var m_asTagsFormat = new Array("b","i","u","s","strong","em","lcase","c","ucase","o","sup","sub");
var m_asTitleFormat = new Array("bold","italic","underline","strikethough","strong","emphasis","lowercase","capitalise","uppercase","overline","superscript","subscript");
var m_sHelpFormat = "The ~ tag displays the enclosed text as ~ ";
var m_sUseFormat = " \n\n USE: [#]This is some ~ text[/#]"; 
var m_sPromptFormat = "Text to be shown as ~.";


	function setFormat(p_sTag) {
		if (m_bHelpOn) {
		alert( setPrompt(m_sHelpFormat, m_asTitleFormat,m_asTagsFormat, p_sTag ) + setPrompt(m_sUseFormat, m_asTitleFormat,m_asTagsFormat, p_sTag ) );
		}
		if (m_sSelText == "") {
			m_sSelText=prompt(setPrompt(m_sPromptFormat, m_asTitleFormat,m_asTagsFormat, p_sTag ),"Text");
		}
		if (m_sSelText!=null) {
			l_sText="[" + p_sTag +"]" + m_sSelText + "[/" + p_sTag +"]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.format.selectedIndex = 0;
	}

	function setPrompt(p_sStr, p_TitleArray, p_TagArray, p_sTag ) {
		if (p_TitleArray) {
			p_sStr = p_sStr.replace( /~/g, p_TitleArray[p_TagArray.indexOf(p_sTag)] )
		}
		return p_sStr.replace( /#/g, p_sTag );
	}

Drop down selector;

<select tabIndex="-1" onchange="setFormat(this.options[this.selectedIndex].value)" name="format" id="format">
<option value="" selected="selected">Select Format</option>
<option style="font-weight:bold;" value="b">Bold text</option>
<option style="font-style:italic;" value="i">Italic text</option>
<option style="text-decoration:underline;" value="u">Underlined text</option>
<option style="text-decoration:line-through;" value="s">Strikethrough text</option>
<option style="font-weight:bold;" value="strong">Strong text</option>
<option style="font-weight:bold;font-style:italic;" value="em">Emphasised text</option>
<option style="text-transform:lowercase;" value="lcase">Lowercase text</option>
<option style="text-transform:capitalize;" value="c">Propercase text</option>
<option style="text-transform:uppercase;" value="ucase">Uppercase text</option>
<option style="vertical-align:super;" value="sup">Superscript text</option>
<option style="vertical-align:sub;" value="sub">Subscript text</option>
<option style="text-decoration:overline;" value="o">Overline text</option>
</select>

buttons; obviously use your images to match your layout

<img id="bold_btn" title="Set Bold Text" alt="Set Bold Text" src="/common_files/admin/images/format/icon_editor_bold.gif" height="23" width="23" onmouseover="this.className='hover';" onmouseout="this.className='out';" onclick="setFormat('b');" >
<img id="italic_btn" title="Set Italic Text" alt="Set Italic Text" src="/common_files/admin/images/format/icon_editor_italicise.gif" height="23" width="23" onmouseover="this.className='hover';" onmouseout="this.className='out';" onclick="setFormat('i');" >
<img id="uline_btn" title="Set Underline Text" alt="Set Underline Text" src="/common_files/admin/images/format/icon_editor_underline.gif" height="23" width="23" onmouseover="this.className='hover';" onmouseout="this.className='out';" onclick="setFormat('u');" >

The insert text routines are in http://www.webmaster-talk.com/javasc...rite-text.html

I can PM a demo user and password if you want to see it working.

Originally Posted by chrishirst

I can PM a demo user and password if you want to see it working.

Thank you chris! I'll have look at it as soon as I recover from this weekend and I'll let you know how it went

I've found almost exactly what I was looking for here: http://www.youtipgaming.com/trial/bbcode/bbcode.htm


There is a little error in the JavaScript code in two lines of the addvaluetag function. If you don't correct it, Internet Explorer will have a problem. The select menus that are used for choosing the size or colour of the selected text will wrap text in erroneous tags.

Instead of eg: [size=12]Some text[/size] you'll get ["+tag+"=12]Some text[/"+tag+"]

Here is the corrected function:

function addvaluetag(sValue,tag) {
     if(sValue=="") {
         return;
     }
     var txt = document.getElementById('atext');
     if(document.selection) {
         txt.focus();
         sel = document.selection.createRange();
         sel.text = "["+tag+"=" + sValue + "]" + sel.text + "[/"+tag+"]";
     } else if(txt.selectionStart || txt.selectionStart == '0') {    
         txt.value = (txt.value).substring(0, txt.selectionStart) + "["+tag+"="+sValue+"]" + (txt.value).substring(txt.selectionStart, txt.selectionEnd) + "[/"+tag+"]" + (txt.value).substring(txt.selectionEnd, txt.textLength);
     } else {
         txt.value = "";
     }
     return;
 }

Now I just want to ask if somebody could add a function that would make the Enter key leave behind a [br /] tag. I've created a button for this purpose, but hitting Enter is just far more natural and definitely more preferable.

I can't believe I've done it! Little research on the internet and here is my own “Enter” key function that goes with this BBcode:

function onEnter(evt) {
     var txt = document.getElementById('yourtextareaID');
         var keyCode = null;
         if( evt.which ) {
  keyCode = evt.which;
  } else if ( evt.keyCode ) {
  keyCode = evt.keyCode;
  }
  if ( keyCode == 13 ) {
         txt.value = (txt.value).substring(0, txt.selectionStart) + "<br />";
  return;
  }
  }

Now I've got my WYSIWYG exactly the way I wanted it! Consider this thread closed.