JS/HTML troubles in WebGadget / RTF troubles in EditorGadget

tinman · Post by **tinman** » Fri Oct 26, 2007 5:01 pm

var RegText = new RegExp(formInput,"gi")

Should make it insensitive. The line breaks are probably removed because they only exist in the source, not the HTML text.

Edit: oops, I just noticed that even though the search is case insensitive, the replace is case sensitive. You'd probably have to iterate through the text until there was no more matches (remove the "g" for non-global matching), replacing the sought after element with itself enclosed in the span tags.

Seymour Clufley · Post by **Seymour Clufley** » Fri Oct 26, 2007 7:32 pm

Thanks, Tinman. I shall find a JavaScript forum and pursue this "line of inquiry" there. I don't like asking non-PB questions on this forum.

However, one thing has occurred to me. I found this thread which shows how to execute JavaScript functions from PB code. What about the other way round? Is there a way for a JavaScript function to execute a PB procedure?

JElliott · Post by **JElliott** » Fri Oct 26, 2007 8:47 pm

Don't have a lot of time right know but this might point you in the right direction - you seemed anxious. You can edit the text but then you must change focus for onChange to fire - for example click outside the text area

Jeff

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Highlight test</title>
<script language="JavaScript" type="text/javascript">
function HighlightText() {
   var formInput = "th";
   var BodyHtml = document.getElementById("bodytext").innerText;
   document.getElementById("bodytext").innerHTML = BodyHtml;
   var RegText = new RegExp(formInput,"g")
   var StyledText = "<span class='highlighter'>" + formInput + "</span>";
   BodyHtml = BodyHtml.replace(RegText,StyledText);
   document.getElementById("bodytext").innerHTML = BodyHtml
}
function parseText()
{
var myText = returnSpaceForCR(document.getElementById("myId").value)
alert(myText)
document.getElementById("myId").value = myText
}
function returnSpaceForCR(dataStr) 
{
return dataStr.replace(/(\r\n|[\r\n])/g, "");
}

</script>
<style>
.highlighter {
  color: #cc00FF;
  background-color: #ffffff
}
</style>
</head>
<body>

<input type="button" name="go" value="Go" onclick="HighlightText();">

<p>&nbsp;</p>


<textarea id = "myId" rows = "30" cols = "50"  wrap = "on" onchange ="parseText()">
	PureBasic is a programming language based on
  established BASIC rules. The key features of PureBasic are
  portability (Windows, AmigaOS and Linux are currently fully supported),
  the production of very fast and highly optimized executables and, of
  course, the very simple BASIC syntax. PureBasic has been created for
  the beginner and expert alike. We have put a lot of effort into its
  realization to produce a fast, reliable and system friendly language.	
</textarea>

<div id="bodyText" contenteditable=true onchange ="parseText()">
	PureBasic is a programming language based on
  established BASIC rules. The key features of PureBasic are
  portability (Windows, AmigaOS and Linux are currently fully supported),
  the production of very fast and highly optimized executables and, of
  course, the very simple BASIC syntax. PureBasic has been created for
  the beginner and expert alike. We have put a lot of effort into its
  realization to produce a fast, reliable and system friendly language.
</div> 


</body>
</html> :)

Seymour Clufley · Post by **Seymour Clufley** » Sat Oct 27, 2007 7:50 pm

Thanks, JElliott.

I'm not sure onChange is necessary anymore. Using Freak's code for executing JavaScript functions in the webgadget, I can call the function intermittently from PB.

But nevertheless, can you tell me why the focus has to be changed for onChange to fire? (At this stage, I'm obviously still researching the options.)

Somebody else has suggested using VBScript for this. Since it's only going to be using IE (no other browsers), I'll be looking into this aswell and will report if I find a better alternative to the JavaScript method.

Seymour Clufley · Post by **Seymour Clufley** » Sun Oct 28, 2007 5:19 pm

Okay, I've been working on the syntax highlighting (or "keyword colouring", more accurately) using the code linked above as a basis.

Here's a sample HTML page complete with the current JavaScript. Since I haven't yet figured out a way to call the function automatically, there's a button to call it:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>TED</title>
<script language="JavaScript" type="text/javascript">

function Syntaxify() { 
  var BodyHtml = document.getElementById("mainbody").innerText; 
  document.getElementById("mainbody").innerHTML = BodyHtml; 
  
  var curKeyw;
  var curHex;
  var keywords = ["only", "in"];
  var keyHexes = ["ffff00", "ff00ff"];

for(i = 0; i <=1; i++)
    {
    curKeyw = keywords[i];
    curHex = keyHexes[i];
    var RegText = new RegExp(curKeyw,"gi");
    var StyledText = "<font style=color:#"+curHex+">" + curKeyw + "</font>";
    BodyHtml = BodyHtml.replace(RegText,StyledText); 
    }
  document.getElementById("mainbody").innerHTML = BodyHtml 
}


</SCRIPT>

<STYLE type=text/css>.canexpand { font-family: Courier New; font-weight:bold; text-align:center; color: #007FFF; }
.canexpand A:link { font-family: Courier New; color: #006AEC; }
.canexpand A:visited { font-family: Courier New; color: #006AEC; }
.canexpand A:hover { font-family: Courier New; color: #D8A6FF; }
.cancollapse { font-family: Courier New; font-weight:bold; text-align:center; color: #FFFFFF;}
.cancollapse A:link { font-family: Courier New; color: #FFFFFF; }
.cancollapse A:visited { font-family: Courier New; color: #FFFFFF; }
.cancollapse A:hover { font-family: Courier New; color: #D8A6FF; }
.main { font-family: Courier New;  font-size: 15px; color: #FFFFFF; background: #000000 }
.box { font-family: Courier New; font-size:15px; color:#FFFFFF; background: #003652; border: 1px solid #00A8FF; }
.generaltext { font-family: Courier New; font-weight:bold; color: #FFFFFF; background: #000000; border: 1px solid #00527c;}
.generaltext A:link { font-family: Courier New; color: #FFFFFF; }
.generaltext A:visited { font-family: Courier New; color: #FFFFFF; }
.generaltext A:hover { font-family: Courier New; color: #D8A6FF; }
</STYLE>
</HEAD>

<BODY class=main>

<TABLE width="99%" align=center>
<div id="mainbody" contentEditable=true>
<P>Initial thoughts about "t09a"...
<P><!--COL-->
<P align=center><SPAN class=canexpand contentEditable=false>-> <A href="">LINK: Second note</A> <-</SPAN><!--ENDCOL-->
<P>PureBasic is a programming language based on established BASIC rules. The key features of PureBasic are portability (Windows, AmigaOS and Linux are 

currently fully supported), the production of very fast and highly optimized executables and, of course, the very simple BASIC syntax.

<P>PureBasic has been created for the beginner and expert alike. We have put a lot of effort into its realization to produce a fast, reliable and system 

friendly language.

<P>

</div>
</TABLE>
<input type="button" value="Highlight" onclick="Syntaxify()" />

</BODY></HTML>

There are two problems with the JavaScript as it is:

1. It resets the caret position to the end of the document (I'm working on this)
2. It has to be triggered manually (I'm working on this)
3. It removes any HTML formatting internal to the text. (I can't work on this because I'm totally lost.)

For a start, linebreaks vanish. But so does the hyperlink styling. It seems that anything inside <> tags will be ignored, meaning the revised text has only the formatting applied to it by the JS function. The function takes the text as plain text and works from that.

I can see that this is good in that it prevents the same keywords from being perpetually wrapped in duplicate tags. However, as I say, it also means that all other HTML tagging is lost.

Can anyone think of a way to change the JavaScript such that it would fulfil both requirements (ie retain all HTML tags, except for previous coloring tags because they may be obsolete)?

I can think of one way, which would be to grab the HTML instead of the plain text (if that's possible), and then replace all instances of the color formatting tags with nothing, before doing the scan to reapply the tags where they are now needed. Seems a bit clumsy. I'll give it a go, see if it's possible.

Thanks for reading,
Seymour.

Seymour Clufley · Post by **Seymour Clufley** » Mon Oct 29, 2007 6:13 pm

Just a quick update (assuming anyone's interested) to say that I have, against expectation, conquered the problem of retaining HTML formatting. Linebreaks, as well as any additional HTML formatting, are retained each time the syntax colouring is performed. Only the tags relating to the syntax operation are erased and/or reinstated.

The remaining stumbling blocks are:

1. The process still isn't triggered automatically (I'm working on this)
2. The replace isn't case sensitive (I have an idea how to combat this, but it's clumsy)
3. The process resets the caret position to the beginning of the document.

The last one is the biggie now. I spent a few hours last night trying to solve it. There are JavaScripts on the internet for getting and setting the caret position (which presumably will need to be done at either end of the syntax procedure) but unfortunately I can't get any of them to work.

The problem seems to rest on the element ID. Now, the caret can only ever be inside a div textbox so I don't understand what the problem is, but I keep getting "ElementIDUnknown" error.

I'll be asking about this on a JS forum. Anyway, once these stumbling blocks are all conquered, I'll post full code here so that if anyone else wants to make an HTML-based text editor in the future, they can refer to it.

JElliott · Post by **JElliott** » Tue Oct 30, 2007 11:29 am

Seymour,

Another source - Pick up a copy of 'The Javascript Anthology' ISBN 0-9752402-6-9 in chapter 18 they give a a very detailed description and sample code for creating editable elements. After a quick read it appears to address most of your points and then some.

Jeff

Seymour Clufley · Post by **Seymour Clufley** » Tue Oct 30, 2007 3:25 pm

When I can afford to spend £15, I'll have a look at it! Thanks for the heads up.

Do you happen to know if it is necessary to have Java Runtime Environment installed in order for JavaScript to work on webpages?

Thalius · Post by **Thalius** » Tue Oct 30, 2007 3:34 pm

Seymour Clufley wrote: Do you happen to know if it is necessary to have Java Runtime Environment installed in order for JavaScript to work on webpages?

java and javascript are 2 Different Things. In short: No

Thalius

PureBasic Forums - English

JS/HTML troubles in WebGadget / RTF troubles in EditorGadget

Concentrating on the JavaScript...