SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <!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>
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Do you perhaps have a test page somewhere to look at?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

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

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    <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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  10. #10
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •