SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    htmlarea 3 use custom tags rather than html?

    hi all

    i haven't had a chance to look at htmlarea yet
    so i just wanted to find out from someone who has
    if it's possible to use customised tags, eg. [i] for
    the markup rather than the html that is printed out
    because on my web site i'm using customised tags to
    display data from a mysql db, and would prefer not
    to have any html markup in there, especially <p>, <br /> tags, etc.

    also, when editing records in the database, i have forms
    that load the content from the db into textareas
    is it possible for htmlarea to display data from a database
    in the textarea, and also, have it marked up using the custom tags

    thanks in advance

  2. #2
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Yeah it is, PM this guy, I know he's done it

  3. #3
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, there's basically 2 ways to look at this, submitting the HTML to a server script, and parsing it into BB-Code there, or parsing it to BB-Code before submitting to the server.

    I've chosen to do it the second way, as I find it a lot easier to impliment, because of the way browsers can handle HTMLElements on the client side via their browser DOM.

    In your second question you asked about showing the converted BB-Code as correct formatting while editing the same text afterwards. Again you have two options, do it server-side, or do it client side. For this I chose to do it server-side, because that is what normally parses the BB-Code into HTML for the actual content posting, so you are likely to get much more consistant results.

    Mozilla and IE differ signifigantly in the way they generate code within a WYSIWYG editor, so you must take into account styles on elements within the text, (such as <span style="font-weight:bold">), as well as presentational markup tags, (such as <b>).

    The easiest way I have come up with to do this is the following:

    Code:
    String.prototype.trim = function()
    {
    	return this.replace(/^\s*(.*?)\s*$/, '$1');
    };
    
    HTMLArea.prototype.filterOutput = function()
    {
    	var iframe = this._iframe;
    	var htmlElements = iframe.contentWindow.document.body.getElementsByTagName('*');
    	var contents = HTMLArea.getHTML(iframe.contentWindow.document.body).replace(/\r\n/g, " ").replace(/\r/g, " ").replace(/\n/g, " ");
    	times = htmlElements.length;
    	for (var i = 0; i < times; i++)
    	{
    		var element = htmlElements[i];
    		var tagType = element.tagName.toLowerCase();
    		var inner = HTMLArea.getHTML(element).trim();
    		var outer = HTMLArea.getHTML(element, true);
    		if (HTMLArea.is_gecko) {
    			element.innerText = inner.replace(/<[^>]+>/g, '');
    			inner = inner.replace(/(.*)<br[^>]*>\s*$/i, '$1');
    		}
    		var startTag = '';
    		var endTag = '';
    		if (element.innerText && element.innerText.trim().length!=0)
    		{
    			if (tagType=='b' || tagType=='strong' || tagType=='i' || tagType=='em' || tagType=='u' ||
    					 tagType=='a')
    			{
    				if (tagType=='a' && element.getAttribute('href'))
    				{
    					if (element.getAttribute('href').substr(0, 7).toLowerCase()=='mailto:') {
    						startTag = '' + startTag;
    						endTag   = endTag + '';
    					} else {
    						startTag = '' + startTag;
    						endTag   = endTag + '';
    					}
    				}
    				if (element.style.fontStyle=='italic' || tagType=='i' || tagType=='em') {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				if (element.style.fontWeight=='bold' || element.style.fontWeight=='bolder' || tagType=='b' || tagType=='strong') {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				if (element.style.textDecoration=='underline' || tagType=='u') {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				if (element.style.color) {
    					startTag = '[color=' + HTMLArea._colorToRgb(element.style.color) + ']' + startTag;
    					endTag   = endTag + '[/color]';
    				}
    				if (element.style.fontSize) {
    					startTag = '[size=' + element.style.fontSize + ']' + startTag;
    					endTag   = endTag + '[/size]';
    				}
    				if (element.style.fontFamily) {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				contents = contents.replace(outer, startTag + inner + endTag);
    			}
    			else if (tagType=='span' || tagType=='font')
    			{
    				if (element.style.fontStyle=='italic') {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				if (element.style.fontWeight=='bold' || element.style.fontWeight=='bolder') {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				if (element.style.textDecoration=='underline') {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				if (element.style.color) {
    					startTag = '[color=' + HTMLArea._colorToRgb(element.style.color) + ']' + startTag;
    					endTag   = endTag + '[/color]';
    				}
    				if (element.style.fontSize) {
    					startTag = '[size=' + element.style.fontSize + ']' + startTag;
    					endTag   = endTag + '[/size]';
    				}
    				if (element.style.fontFamily) {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				if (element.color && !element.style.color) {
    					startTag = '[color=' + element.color + ']' + startTag;
    					endTag   = endTag + '[/color]';
    				}
    				if (element.size && !element.style.fontSize) {
    					var size = element.size;
    					size = (size == 1 ? "xx-small" : size);
    					size = (size == 2 ? "x-small"  : size);
    					size = (size == 3 ? "small"    : size);
    					size = (size == 4 ? "medium"   : size);
    					size = (size == 5 ? "large"    : size);
    					size = (size == 6 ? "x-large"  : size);
    					size = (size == 7 ? "xx-large" : size);
    					startTag = '[size=' + size + ']' + startTag;
    					endTag   = endTag + '[/size]';
    				}
    				if (element.face && !element.style.fontFamily) {
    					startTag = '' + startTag;
    					endTag   = endTag + '';
    				}
    				contents = contents.replace(outer, startTag + inner + endTag);
    			}
    			else if (tagType=='li')
    			{
    				contents = contents.replace(outer, '[item]' + inner + '[/item]');
    			}
    		}
    		if (tagType=='p' || tagType=='div')
    		{
    			if (element.style.textAlign=='center' || element.style.textAlign=='right' ||
    				element.style.textAlign=='justify')
    			{
    				startTag = '[align=' + element.style.textAlign + ']' + startTag;
    				endTag = endTag + '[/align]';
    			}
    			else if (element.align=='center' || element.align=='right' || element.align=='justify')
    			{
    				startTag = '[align=' + element.align + ']' + startTag;
    				endTag = endTag + '[/align]';
    			}
    			if (inner)
    			{
    				contents = contents.replace(outer, startTag + inner + endTag + "\n");
    			}
    		}
    		else if (tagType=='center')
    		{
    			contents = contents.replace(outer, '[align=center]' + inner + "[/align]\n");
    		}
    		else if (tagType=='img')
    		{
    			if (element.getAttribute('tag')) {
    				contents = contents.replace(outer, element.getAttribute('tag'));
    			}
    			else if (element.src) {
    				contents = contents.replace(outer, '[img]' + element.src + '[/img]');
    			}
    		}
    		else if (tagType=='hr')
    		{
    			contents = contents.replace(outer, '');
    		}
    		else if (tagType=='ol')
    		{
    			contents = contents.replace(outer, '[' + tagType + ']' + inner + '[/' + tagType + ']');
    		}
    		else if (tagType=='ul')
    		{
    			contents = contents.replace(outer, '
    • ' + inner + '
    '); } else if (tagType=='br') { contents = contents.replace(outer, "\n"); } } contents = contents.replace(/\[hr\]\[\/hr\]\s*/gi, ''); contents = contents.replace(/<!--.*?-->/gi, ''); contents = contents.replace(/&nbsp;/gi, ' '); contents = contents.replace(/&quot;/gi, '"'); contents = contents.replace(/&amp;/gi, '&'); contents = contents.replace(/<[^>]+>/g, ''); contents = contents.replace(/&lt;/gi, '<'); contents = contents.replace(/&gt;/gi, '>'); return contents.trim(); }
    I suppose you can modify that code to exactly the way you want to parse your data.

    Another thing that has to be mentioned is the fact that you'll want only the BB-Code style text to show in the textarea, but when an HTMLArea is initiated, you'll want to be using parsed HTML code, so you'll probably want to setup a hidden input containing the HTML content and modify the HTMLArea code to load the text from that element instead of the textarea.

    I hope that made sense to you, lol. Just trying to help


    Edit:

    You'll have to quote this post in order to see the correct code (make sure you have WYSIWYG turned off on this forum in order to see it all correctly)
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool thanks
    i haven't had a chance to have a look at htmlarea yet
    but when i do, i'll make sure to give this a whirl too
    thanks again

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll probably have to make a few modifications to the code, but hopefully you'll figure it out.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, cos i probably won't allow images, colours, alignment, styling, etc.
    don't want to ruin my layout and my nice, neat code


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
  •