HTML Tags script
This question/request pertains to this thread and the script written by jscheuer1.
I recently updated my old version of Opera to 10.51 and while the script still works great I notice that when I hit the button to make the text bold or whatnot all of the content after the highlighted content becomes highlighted instead. What needs to be changed in order to keep the highlighted text highlighted after a button is clicked?
If this post should remain part of the original thread in order to avoid multiple threads on this topic please move it to where it should be. I want to nominate this script be added to the DD scripts library. It really is quite useful.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /* editText Script ©2009 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use */ var editText = { init: function(){return;} }; (function(){ if(!document.getElementById){ return; } editText = { saveCurRng: (function(){return document.selection? function(el){this.el = el; el.focus(); this.curRng = document.selection.createRange();}: function(el){this.el = el, this.curRng = typeof el.selectionStart === 'number'? el.value.substring(el.selectionStart, el.selectionEnd) : null;} })(), insert: (function(){return document.selection? function(btag, etag){ this.el.focus(); if(!window.opera){ document.selection.empty(); } this.curRng.text = btag + this.curRng.text + etag; this.el.blur(); this.el.focus(); }:function(btag, etag){ if (typeof this.el.selectionStart === 'number'){ var el = this.el, startPos = el.selectionStart, endPos = el.selectionEnd, l = [btag, this.curRng, etag].join('').length; el.focus(); el.value = [el.value.substring(0, startPos), btag, this.curRng, etag, el.value.substring(endPos, el.value.length)].join(''); el.selectionStart = el.selectionEnd = startPos + l; } }; })(), controlsFront: function(el, cfg, area){ var t = el[cfg.controlInfo].split(cfg.controlDelimit); if(window.opera && t.length === 1 && !/^<.*>$/.test(t[0])){ t = el.value.split(cfg.controlDelimit); } if(cfg.controlDelimit === '><' && t.length === 2){ t[0] += '>'; t[1] = '<' + t[1]; } else if(t.length === 1){ t.unshift(''); } this.saveCurRng(area); this.insert(t[0], t[1]); }, addEvent: (function(){return window.addEventListener? function(el, ev, f){ el.addEventListener(ev, f, false); }:window.attachEvent? function(el, ev, f){ el.attachEvent('on' + ev, f); }:function(){return;}; })(), init: function(cfg){ this.addEvent(window, 'load', function(){ var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0, area = document.getElementById(cfg.el); editText.addEvent(area, 'change', function(){editText.saveCurRng(area);}); for(i; i < ctrls.length; ++i){ (function(el){ editText.addEvent(el, 'click', function(e){ editText.controlsFront(el, cfg, area); if(e && e.preventDefault){ e.preventDefault(); } return false; }); })(ctrls[i]); } }); } }; })(); editText.init({ el: 'myArea', controls: 'myControls', controlTag: 'input', controlInfo: 'title', controlDelimit: '><' }); </script> </head> <body> <form action="#"> <div> <textarea id="myArea" rows=5 cols=40>The Slow Pink Fox Jumped Over the Quick Green Dog.</textarea><br> <input type="reset" value="Reset"> </div> </form> <div id="myControls"> <input type="button" title="<b></b>" value="B"> <input type="button" title="<i></i>" value="I"> <input type="button" title="<br>" value="BR"> <input type="button" title=" :)" value=" :)"> </div> </body> </html>
CSS Codes
Reply With Quote
Bookmarks