JS/Jquery soloution for adding html tags?

Hi all,

I am putting the finishing touches to a custom written (pHp) article editor to allow users to publish content on a website.

I have basically finished the project, and I am putting the finishing touches in with jquery widgets, such as a word counter. I would also like people to be able to highlight a section of text, then have some custom tags wrap the text (much like on this forum when you highlight a word in the message box and hit the wrap button).

I would like my own custom tags to be used, such as <span class=‘someclass’>some entered text</span> rather than predefined ones.

Would someone be kind enought to recommend a lightweight soloution to this problem?

Kind regards and thanks.

I opted to initalize the code via a function and pass in the values - works well. Maintence isnt much of a problem because im using pHp to process the page!

Im sure ill be back later on to pester you some more when I come to add some icons!:blush:

You could probably put the initialisation code in a function and pass in the ID of the <select> and the <textarea> (That would be the simplest, though little bit maintenance-heavy, solution).

The other way to do it would be do have a markup structure like this:


<div class="editArea">
  <select>
  ...
  </select>
  <textarea>...</textarea>
</div>

You could then write some JS that loops through all "editArea"s and calls the initialization function and passes in the elements.

Something along those lines anyway :wink:

Thankyou for the info kind sir. What is the best way to adapt this code to work with several text areas? I have about 8 in total.

Ah yep, that would have happened because my defauly jQuery include snippet uses a protocol agnostic reference.

<script type=“text/javascript” src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

The “//” at the start will request the file with the protocol currently being used. Handy if you ever need to include things like the CDN version of jQuery on a site that uses both http and https. Of course when viewed locally without a webserver to host it (i.e. via the file:// protocol) it will fail because it try to use the “file” protocol to request jQuery.

Hi John, ive just uploaded your code to my server and it works online! I tested it local initially and it didnt work for some reason :slight_smile:

Im going to have a bash at creating some icons for this code…

Many thanks for your input John. Your solution is good, and the wymeditor looks just what I was after so ill think ill use it! :slight_smile:

If you’re after an editor, try WYMEditor or something similar. It allows for customisation of quite a few things.

A custom solution wouldn’t be too hard either.

This is a little crude but then again it only took 10 minutes and it’s super basic. But will get you started at any rate.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<style type="text/css">
		textarea { width:500px; height:100px; }
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
		
			$("#classes").bind("change", function(){
				//get the selected item selector
				sel = $(this).val();
				
				$txtArea = $("#txt");
				val = $txtArea.val()
				if (val == '') {
					return;
				}
				domTxt = $("#txt")[0];
				InternetExplorerTextAreaHelper(domTxt);
				start = domTxt.selectionStart;
				end = domTxt.selectionEnd
				s = val.substring(0, start);
				m = wrap(sel, val.substring(start, end));
				e = val.substring(end)
				
				newVal = s + m + e;
				$txtArea.val(newVal)
				
			}) 
		
		});
		function wrap(html, content) {
			// I've chosen to use the vertical bar as my indicator for
			// where to place the content
			return html.replace("|", content);
		}
		
		//make sure IE has the new selection properties set.
		function InternetExplorerTextAreaHelper(textArea) {
			if (document.selection) { //IE
				var bm = document.selection.createRange().getBookmark();
				var sel = textArea.createTextRange();
				sel.moveToBookmark(bm);
		  
				var sleft = textArea.createTextRange();
				sleft.collapse(true);
				sleft.setEndPoint("EndToStart", sel);
				textArea.selectionStart = sleft.text.length
				textArea.selectionEnd = sleft.text.length + sel.text.length;
				textArea.selectedText = sel.text;
			}
		}

	</script>
</head>
<body>
	<select id="classes">
		
		<option value=''>Please select </option>
		<option value='<span class="test">|</span>'>span.test</option>
		<option value='<p class="hello">|</p>'>p.hello</option>
	</select> 
	<div id="content">
		<textarea id="txt">This is sample text</textarea>
	</div>
</body>

</html>

Do you perhaps have a test page somewhere to look at?

Hello again,

After some consideration I have decided that an editor is not restrictive enough for my needs and I really only want a few custom tags to be available.

So John’s solution seems ideal, only I just copied and pasted the code into a document at nothing seems to be happening when i select an option from the menu :slight_smile: