CodePress

Awesome!

Undo is pretty essential though. When editing large blocks of text, it's very easy to highlight more than you meant to and you not being able to undo would be a killer.

the // comments regex is incorrect on php....

should be:

/([^:])\/\/(.*?)(<br>|<\/P>)/g,'$1//$2$3'

you aren't properly preusing the white space before the comment! FYI!

ugghh... stole my tag..

/([^:])\/\/(.*?)(<br>|<\/P>)/g,'<i>$1//$2</i>$3', // comments

Extremely cool. Hope you can implement an undo and an edit-paste feature! I hope you keep this up, so that I can steal your code later :-)

this is killer, too bad it took me hours to google it..

Seems like your working on it daily though, keep it up! Can't wait to see the undo w/ history working proper.

I'll definately use it in my app :)

-eidolon
(i cleared my cookies?)

Can't wait to see that working in Opera :)

This is truly lovely! I never would have thought that so much function could be coded in so few lines.

Just a couple of suggestions: ... expand and read the rest

- I would personally love to see the tab key indent lines when text is selected and shift tab reduce the indent in that same case. Keeping the code pretty is so much easier with that feature.

- This is just my preference but I would suggest testing for the presence of objects rather than targeting specific browsers. I.e. who cares if its IE or Netscape? What matters is: Does it have contentEditable or designMode. Test for the existance of those as the code moves along rather than for the browser. The hope is that doing so will keep this code running for a good long time no matter what browsers come and go.

- Integrate googiespell.

- Search and replace?

- preview when editing HTML, execute in browser when editing javascript.

- realtime preview when editing HTML.

- automatic back and forth updates between this editor in HTMLmode and a contentEditable area in WYSIWYG mode. Just like wordperfect's "reveal codes" mode.

One final note: As the host of a few web sites with comment / wiki capabilities, I know that blogspot is one of the major sources of hosting for sites that are wikispammed over the internet. Probably 80 percent of the wikispam I block is pointing to blogspot. That probably accounts for your poor search engine placement.

I would really suggest finding another host. I would be willing to donate unlimited space / bandwidth on my poor little server or even donate some cold hard cash towards you finding a better place than blogger to place this little gem. Hosting this on blogspot is like shoving a diamond up a pigs butt.

I forgot a suggestion:

- Just my thing, but add ctrl-B/U/I/L for Bold, Underline, Italics, and Links in the HTML mode. I just makes typing so much faster. See the little form at the bottom of my site for some simple but slick code to implement that.

I'm not a professional Javascript coder, but I would be willing to help in any way I can on a project this nice.

End your line number gif at 999 and pad left with zero to avoid the messy repeat after 1500 lines... Yeah, I know, who edits a 1500 line document in a browser?

What about javascript highlighting for HTML docs?

I was just reading the source code in the RTSH editor itself. An excellent example.

Looks promising!
But I see that you are using regular expressions the do the parsing. But that way you can't parse correctly because there can be parts of the text that overlap (i.e. try this input for the javascript highlighting:

var test_string = "This is a /* test"; /* Comments */

As you see this one isn't highlighted correctly, because you first check for strings and then for comments. Even if you do it the other way around, you end up with a wrongly parsed text... You have to write a parser that keeps a state of what was scanned.

Is there a way to easily send a string of code from say PHP to CodePress to have it displayed? I noticed the example only showed code already existin, im wondering if maybe there should be some built in functions like SetText() or something to actually pass the code

Hi,
I think the script is excellent, great work. I’m
having a problem with editing HTML using it, when I type any html entities ... expand and read the rest
they are converted to html entities themselves.

Example:
<html>
<body>

<b>Some Text</b>
This is a test &raquo;

</body>
</html>

----------------
Is converted to:
----------------
<html>
<body>

<b>Some Text</b>
This is a test &amp;raquo;

</body>
</html>

As you can see it's converted the '&' into an entity but the '&' is obviously part of an entity statement.

By the way ‘&raquo’ is a '»'

Is there a fix you can give me for this?

Regards

Thanks for the quick fix.

The HTML and PHP examples don't render properly in Safari or other WebKit browsers like the one built into NetNewsWire. It seems to be either parsing the HTML tags literally or making them white.

Good luck with the development of this great tool!

Hey,

This is EXACTLY what I was looking for! Awesome. You should add a method for the top level frame to set the text of the editor on the fly. I was playing with it but it kept giving me odd errors... go figure.

Thanks, I'll play with it.

Hey, version 0.87 does not work in IE but 0.84 does.

Can you provide RSS/Atom feed for CodePress releases? (and maybe comments also) ?

Hey, i just found out it was proxomitron that caused the IE problem.

Anyway, i agree with yoyo. Maybe you should create a development blog or something so we can all keep updated. And feeds are a great way to broadcast right?

Excellent tool! Thanks for sharing it with us. I had a play with it and did noticed that the highlighting in PHP fails occasionally after a // comment block.

I have the suspicion that this may have to do with (single) quote's in comments. The highlighter colors text in quotes, even in comments I noticed. Offcourse a single - single quote isn't unusual in comments and perhaps if the comment contains an uneven number of single quotes the highlighter stops parsing or something??

CodePress is amazing but on v0.88 i seen a bug, if i have "<?" in a PHP string the "<?" and all the end of this string is colored like php insted of string color.

sorry for my poor english ... expand and read the rest

try this code :
<?php
if (!isset($_GET['lst']))
echo "normal color str";
$str = "<?php
echo 'AJAX-Browser ...<br>';
?>";
function DirSort ($rep, $t='all', $Prefixe='')
{
return false;
}
?>

Sehr schön! :)

This script is really what i was searching for. I'm tring to extend the syntax highlighting to support Latex source file.

I see also that the code editor has been used for the Ecco Ide. While the script is very nice, I think that the Ide should use a underlying Widget framework like Dojo. In this case the script should be a Dojo Widget.

Thanks for the script

Excuse me for my bad english ...

To supress/encode single/double quotes, use this => ... expand and read the rest

x = x.replace(/([^:]//.*?<br />)/g, function (t) { t = t.replace(/"/g, '&quot,'); t = t.replace(/'/g, '&#039;'); return t; });

Why you don't highlight 'word by word' with the event 'onkeypress' ?
( with window.getSelection()/window.selection and DOM is possible, and this can optimize your script ^^ )

I was thinking of writing something like this, and then decided to google it first. Thanks for this!

I found this piece through a link on a weblog I can't remember, and just wanted to congratulate you for the clean, straightforward and properly indented piece of art you've released here. Before this I was beginning to struggle with project HELENE 's unreadably-coded syntax highlighter, and find the difference absolutely lovable.

I apologise for my horrid english, and will continue watching this page frequently

Excellen stuff mate. XSL highlighting would be greatly appreciated!

I seem to have some problems selecting small pieces of text with my mouse. For example if I double-click a word with the mouse, it is selected, but then the selection disappears immediately...do you have any idea what may be causing this? (Selecting using the keyboard works fine, it's just the mouse)

Also, when I select a piece of code and paste it into a text editor, all the formatting (tabs etc.) is lost.

Sorry, saw your comment now about highlighting word by word above.

Exellent script! but there is a bug if you want to use the CodePress for editing file online! for example if you edit a file which contains, like in your php script, something like:
$code = preg_replace("/</","&lt;",$code);
$code = preg_replace("/>/","&gt;",$code); ... expand and read the rest
that appear on the codepress as:
$code = preg_replace("/</","<",$code);
$code = preg_replace("/>/",">",$code);
and when you save the content in a file , like using:
$fp = fopen(........., "w");
fputs($fp, .....the content......);
fclose($fp);
the file does not work as well as before any more! because of the lines:
$code = preg_replace("/</","<",$code);
$code = preg_replace("/>/",">",$code);,
which, after, in the codepress area, dont make the difference beetwin original "&lt;" and "<"!!
so I thinks it's an important bug to remove! ;)
(forgive my english Im French...)

Thanks! I'm looking forward to having this version! :)

Hi

Great script. ... expand and read the rest

The linenumbers does not work when you enlarge the text. Everything becomes out of sync.

Is there a way to fix this, or do I have to remove linenumbers?

But thanks again for a great script

This is amazing! I'm going to play around with it for a while. I'll comment if I come across a bug that hasn't already been mentioned. Keep up the great work!

I have some probleme to save file on serveur.
Have you a scripte for me?

have it a french forum to codepress?

Anything I can do to help this project???
I know javascript and php, maybe I can help?

Why this script don't run under KONQUEROR, it is the best web navigator, it is better than FireFox but it is sensitive to javascript ERROR.

I know KONQUEROR, javascript (and php), maybe I can help too?
but i don't speak english very well.

This is probably the best thing in the internet!

the home and the end key do not work, but the rest is nice

The previous version worked very well for me. But in the current updated version the syntax highlight is not taking place.

I have used IFrameObj.CodePress.setCode(language,html) before.

After updating the current version the above method is not highlighting the syntax.

I have updated the js and then the includes for the iframe. What am i missing ?

Your released code package with examples has a lot of bugs to it, i had to manually insert:
<script type="text/javascript" src="scripts.js"></script>
<style type="text/css">@import url(styles.css);</style> ... expand and read the rest

into the index.html, also the highlighting does work, also the scripts.js is not in the zip file ?? also manually downloaded...

I'd like to help you onto making ASP highlightning... currently struggeling with the demo you've provided ;)

heres the code for codepress.asp (same function as codepress.php):
--------------------------------------------------------
<%
' Very simple implementation of server side script
' to open files and send to CodePress interface
function getLanguage(fname)
lang = "text"
ext = lcase(mid(fname , instr(fname,".") ))

if ext = "php" OR ext = "phtml" then lang = "php" end if
if ext = "js" then lang = "javascript" end if
if ext = "java" then lang = "java" end if
if ext = "txt" then lang = "txt" end if
if ext = "html" OR ext = "htm" then lang = "html" end if
if ext = "css" then lang = "php" end if
'if ext = "asp" then lang = "php" end if

getLanguage = lang
end function

if Request.Querystring("file") <> "" then
set fso = Server.CreateObject("Scripting.FileSystemObject")
set f = fso.OpenTextFile(Server.Mappath(Request.Querystring("file")),1,false)
code = f.ReadAll
f.close
code = replace(code, "<", "&lt;")
code = replace(code, ">", "&gt;")
Language = getLanguage(Request.Querystring("file"))
end if
%>
<html>
<head>
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
<link type="text/css" href="languages/codepress-<%= Language %>.css" rel="stylesheet" id="cp-lang-style" />
<script type="text/javascript" src="codepress.js"></script>
<script type="text/javascript">
CodePress.language = '<%= Language %>';
</script>
</head>
<body id="ffedt"><pre id="ieedt"><%= code %></pre></body>
</html>

Soft-tabs would be another great feature for the TODO list. That is, the editor would be configurable to use a certain number of spaces in place of a tab.

Also, in addition to auto-indent, it would be great to be able to hilight a block of code, hit tab (or shift-tab), and it would indent the entire block.

Also, as mentioned above, undo/redo is a must.

I think those additions would make this a fantastic code editor

Feature request: one of the most useful features in FCKeditor is the fullscreen button. Adding the same thing to codepress would be huge since you wouldn't be limited to the size of the textarea. I'm planning on using codepress in our app for editing XML. Looks great. Thanks!

A feature that IS a must, is mixed code-highlighting...

currently the code is formatted/highlighted by a fixed preset, limited to one language... normally you mix PHP, JS, CSS and HTML into one document - however i know you also link to those other documents in order to make the document easy to read.

so what im basically askin for, is a tag-detector that makes it possible to mix code, and have everything nicely highlighted :) - i guess this is possible using simple regexp

Thanks for this tool - its awesome !

Hi, thanks for this great piece of software. I'd like to use it for a web-based file manager. One essential question: Is it possible to send the content of the edit pane in a form to pick it up after submitting the form? (Did you implement the Save-Button in ECCO this way or have you done it somehow different? TIA Andre

The non-ajax version works like a charm. Thanks a lot.

Hey.

First I would like to thank you for this fantastic editor! It's exactly where I was looking for. (I tried to build one completeley in Javascript, but I stopped because it was to slow to use. (It was supposed to render to a <canvas>)) ... expand and read the rest

Finally I have a question; I would like to use this editor in my Application Server written in PHP to edit my scripts and template scripts.

My script files consist of 'ordinary' php statements, but this files don't start with php tags (< ? php) because my script files are restricted to code.

My question is: How can I use your editor to edit my 'php-scripts' without php tags?
Thanks!

I'm sorry I bothered you with this question. I solved it myself.

nice script :)

Hi, excellent piece of kit. Fantastic work.

Syntax highlighting for SQL would be really good!

Replace linenumbers.png by this script :

<?php ... expand and read the rest
putenv('GDFONTPATH=' . realpath('.'));
$font = 'DejaVuSansMono.ttf';

$NumLine = 100+($OverEndLine=30);
// To obtain the same image as linenumbers.png : $sizeFont+$VFontSpace==16
$sizeFont = 7;
$VFontSpace = 9;
$OffsetTop = 16;
$OffsetBottom = 3;
$OffsetLeft = 1;
$OffsetRight = 1;
$ImgH = ($NumLine)*($sizeFont+$VFontSpace)-$VFontSpace+$OffsetTop+$OffsetBottom;
list(,,$widthMax) = imageftbbox($sizeFont, 0, $font, $NumLine);
$ImgW = $widthMax+2+$OffsetLeft+$OffsetRight;
$im = imagecreatetruecolor($ImgW, $ImgH);

$ImgBgColor = imagecolorallocate($im, 240, 240, 240);
$LeftLineColor = imagecolorallocate($im, 222, 222, 222);
$NumColor = imagecolorallocate($im, 128, 128, 128);

imagefilledrectangle($im, 0, 0, $ImgW-1, $ImgH, $ImgBgColor);
imageline($im, $ImgW-1, 0, $ImgW-1, $ImgH, $LeftLineColor);

for($i=1;$i<=$NumLine;$i++)
imagettftext($im, $sizeFont, 0, ($ImgW-1-$OffsetRight)-(strlen($i)*$widthMax/strlen($NumLine)), ($sizeFont+$VFontSpace)*($i)+$OffsetTop-$VFontSpace, $NumColor, $font, $i);

header ("Content-type: image/png");
imagepng($im);
imagepng($im, "CodePress/images/linenumbers (bis).png");

imagedestroy($im);

?>

Hi, im developing an application in asp.net, and how u know u can't use php with asp, and CodePress is a beauty and really need to use it with my project, Do You Thing that there is a way for me that i can use this without a php file?

i make it work in asp.net! great!

great !!

cheers guys!

Nice work! I'm a final year Computer engineering student. I'm also doing an identical project and its only for Java. But the thing is I don't have an idea about how to get the generated error code to the bottom frame in the window. Can you tell how the inter-communication is doing between the editor frame and the bottom frame....

Thanx!

Estou enteressado em ajudar..
Estou pensando uma forma de solucionar o problema do ctrl + v

email/msn -> thales@oficinax.com.br

Great work.... Couple bugs for ya...
1) For my needs this will be in some other iframes.... So I needed to changed the top.document.... to parent.document... not a big deal.
2) When using method #2 IE doesn't do the syntaxHighlighting. Once you have codepress-html.js cached the initialization call in codepress-html.js gets executed before the editor.innerHTML gets set ( you set the script to get reloaded in setCode(), but I don't think IE is reloading it, or possible since it is called before editor.innerHTML it is just a timing issue ) in setCode(). This probably happens with all the languages. I've just been working with HTML.

holy crap this stuff is quite amazing ;-) just what i was looking for, for our php-css editor.

by the way just to let you know, there is a script that can do the same on textarea's but it doesnt support that many languages ;-)

onfortunately i have to get it working on a textarea hehe and im just phper no javascripter but well i guess i just have to combine your script with helene:

http://helene.muze.nl/

reaction on martin kirk: actually if you DO program the NEAT way you dont have multiple languages in one document. :)

Suggestion: Wordwrap.

Hi Fermads,

Well done, love the 'light-weight'ness of the application. ... expand and read the rest

I have a feature-request:
- I'd like to have the ability to have multiple edit boxes on the same page.
- I'd really love to have a function that can insert characters at the carrot and wrap the selection with 2 text strings (ie, with html tags).

Do you accept help with this? I'm integrating your script into my applications and will need to add the above and a couple other things I've already added. I'd like to add the above, fix Rogers bugs and add the full-screen doo-dads, but I'm hesitant as you will update and I'll have to do it over again :(

This is great! I was working on a similar feature for my Firefox extension, Codetch. So I'm wondering, what type of license is this being released under? I would love to tinker with your methods. :-)

Thank you Fernando!!!!!!!!!! I'm going to be using this mainly for like what Andre said, forms & databases. I can write my own wrapper to perhaps create and edit temp files with CodePress, but I'd be curious if there were any plans to integrate with like a CMS.

Thanks again though, this is a huge help.

This could have been very cool if it was less buggy.

For starters. It colours stuff that is commented. Comments should have higher preceedence in colouring. ... expand and read the rest

* When I press "Home" on my keyboard. It gets confused sometimes.

* If I move the cursor downwards with the cursor-keys. It ends up at the end of the line on some lines. (for no good reason)

I think things like the HOME key, and the cursor movement is things that is very important if a person is going to use this tool to something useful.

I have not tried it in other browsers. I am using Firefox 1.5.0.8.

For everybody using non-latin character set, this could be very useful to add into codepress.php:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
otherwise, some browsers(Firefox) are making wrong guess of charset

In javascript when using comments like this:
// comment1
// comment2
// comment3
second comment is parsed incorrectly, rule for one-line comments has to be changed this way(tested in FF only):
/([^:]|^|)//(.*?)(<br>|</P>)/g,'$1<i>//$2</i>$3', // comments

well, very good job. i'm impatient for the next version =)

The auto indentation should be your next goal now, no?

Hey,

I have an issue with the script - getting an error "syntax" undefined: It stops at this point: ... expand and read the rest

for(i=0;i<syntax.length;i++)
x = x.replace(syntax[i],syntax[i+1]);

Any ideas?

I found my problem - no worries. However, shouldn't it be i+=2 in that for loop, instead of i++? I mean you will never match the replacements, but still, it is pointless to loop through them.

Fala, Fernando.
Faltou um link em algum lugar do CodePress dizendo que ele também é usado no ECCO :)

The regex for html attibutes should be:

/=("[^"\]*(\.[^"\]*)*")/g,'=<s>$1</s>', // atributes double quote

Or, for example, the following fails:

<input type="text" value="test "string"">

Fernando - thanks for fixing the bug. One more issue that I can't seem to get around is horizontal scrolling in IE, as well as pasting text into the box. I tried onpaste event, but that didn't seem to do much for me.

Seems like horizontal scrolling gets into some sort of race condition because the insert of the &shy; triggers another horizontal scroll.

CodePress.setCode() crashes in FF with a NS_ERROR_INVALID_POINTER

The following in syntaxHighlight() fixed it for me:

if(!arguments[0]) CodePress.findString();

Would be even nicer using valid/semantic HTML and future-proof Javascript.
* <s>, <b>, <i>, <u>, <big> will disappear and can not be used in strict documents
* <em>, <strong>, <cite> have some semantic meaning
* JS should not use innerHtml if possible to correctly support XML. DOM is the preferred way (minor problem, in comparision)
* the only element you use like it is intended is <var>

Just my 2 cents

Hi, great work!
1. Is it possible to use this JavaScript with Java AppServer? I don't know PHP so what is purpose of codepress.php file and can that be changed with some JSP?
2. Is there some tutorial on creating new highlightings, for example I start work on creating web editor for FreeMarker (Java template framework for html)?
Thanks!

In codepress-html.js file I replaced line
/=(".*?")/g,'=<s>$1</s>'
with
/=(x20*)(".*?")/g,'=$1<s>$2</s>'
but this still doesn't work for "attribute= value" (one space char is added after '=').
Why?

Just to add:
it works when I do that in codepress.js.
Thanks!

@Uros

Try the following, this fixes your spaces and double quotes inside double quotes ("test \"string\"", me hopes backslash works now):

/=([s]*"[^"]*(.[^"]*)*")/g,'=<s>$1</s>', // atributes double quote

Damnit, here's another post with the hope that backslashes works

/=([\s]*"[^"\\]*(\\.[^"\\]*)*")/g,'=<s>$1</s>', // atributes double quote

The code is really awesome. Any plans to add support for Opera. It works in Opera if it is identified as FireFox but has a problem with the the line breaks. Hope you can fix this one, it does not seem that big of a problem.

Nicely done!

Problem with IE is that if you keep typing to the end of the line it seems to erase all the source as assoon as a scroll happens horizontally. Any idea why?

little bug with

echo "this is "my string ";

:)

Hi,
is it possible to add more than one codepress-iframe on one site?

Thanks,
Lorenz

Perfect!! Thank you very very much

I have a couple of questions:

a) is there some kind of code repository? like svn or cvs? if not, I suggest you set one up, e.g. on freshmeat / berlios / sourceforge or similar. ... expand and read the rest

b) you use some unvalid markup, which is not necessary! E.g. don't use lang="php" for the textarea, but something like that:

<textarea class="codepress lang-php">...</textarea>

Now loop all textareas [via getElementByName()] and automagically set the lang accordingly.

c) Why not pushing the "on demand" thing to a nother level:
insert the iframe automatically via js: createElement(), appendChild() should help


I would love to get involved, so if you have some svn / cvs repo I could send you some patches.

So long!

Feature suggestion:

Add the ability to get the current line number and set the line number for the editor. This would allow code that sets up the editor to save the last position in the file and set it again when the file is reloaded later.

Awesome, awesome tool.

One question: have you thought about implementing the YUI Resizable component to allow real-time, dynamic resizing of the text editor window?

http://www.jackslocum.com/blog/2006/11/24/resizable-reloaded/

It looks like it might take about five minutes to implement, and would be SO hugely worth it...

I've uploaded a slightly modified version of CorePress in combination with a modified WCAG/ATAG WYSIWYG.

Try it out at http://moocms.com and see what you can achieve with Fernando's code.

P.S. Original WYSIWYG is from http://www.peej.co.uk/projects/wysiwyg.html

If something like YUI is incorporated in codepress, I hope it is an extra module that can be downloaded separately and not start to bloat what is right now a minimally wonderfully little app.

For editor size, I believe most people would want it to be the maximum size of their browser window, automatically. And if they want to resize it, all they should have to do is resize their browser window. That's why I'm not a big fan of stuff like the YUI Resizable component. ... expand and read the rest

Here's how to mimic an expandable editor using css/javascript:

You can use css to set the width of the editor to be 100% of the page. And when the user extends their browser horizontally, the editor will expand. So width is not a problem.

For height, it's a different story. If you set height in css to 100%, it will freeze the element to the height of the browser window. This is a problem if you have any stuff above the editor element (like a site header or nav menu), as it will cause the editor to expand below the bottom of the browser window. You can get around this by using some javascript for the document's OnResize event, where you set the editor height equal to the browser window height minus the height of any elements that are above it.

This is how I'm currently using textareas (and codepress... when the IE big bug is fixed!) in my apps and it works well on firefox/IE.

I want to second Mike, keep it as simple as possible.

I for one prefer jQuery and would than need both - jquery *and* YUI. Someone might prefer prototype etc. so I think you get my point.

As for resizing: I prefer using this:
http://themaninblue.com/writing/perspective/2006/08/25/

hi, there is this bug with the "&shy;" spawning on ENTER key press...

Can confirm the Bug:

Go in the PHP example to line 57 (after the ?>) and press enter. You'll see a flickering something. Enter &shy; in a newline and press enter - another bug. Using Firefox 2.0 btw.

A second bug depends on the way you show those line numbers. If you increase text size, the line numbers wont get any bigger.

When I add certain characters, such as , ' and ", the Perl syntax highlighting has an irritating tendency to escape these characters with a backslash. Is this a known issue?

Andrew Garrett
firstname at epstone dot net

You're all going to hate me for this, but, PLEASE make a VB Script highlighter for this! It would significantly make me a lot more mobile in my day-to-day work

Hi fermads,

All I need to do to reproduce the problem is use perl or PHP (those are the two that I tried) syntax highlighting, and insert somewhere in my code, the " or ' characters. The characters seem to be escaped with a backslash. I can't reproduce this on the codepress index.html page, so this may be an issue with the way I've integrated it (admittedly "by the book" - exactly as you've described it). ... expand and read the rest

Some diagnostic work reveals that the getCode routine is returning the correct code; and the part at fault is, in fact, my PHP code. When I retrieve the code from $_POST, I find these characters escaped.

So in summary, the problem's not on your end. Thanks for being willing to help me out here,

Andrew Garrett
firstname at epstone dot net

Just a follow-up, the last issue was caused by having magic quotes turned on in my php.ini

Andrew Garrett
firstname at epstone dot net

Good Job Fermads i like this script keep up the good work!

Are you planning to create a forum for codepress?

Could I suggest a way to provide for a very light, fast program and still allow people to expand it and provide you with modules that expand its abilities? If you add some stub routines that can be over-ridden by user supplied expanded versions...

I would really like to add hot key support. But I know a lot of people would not want it and I don't want to miss out on your code updates and fixes. If you allow us to pass a list of keypress codes and our own routines to handle them?

The same would be true for new syntax highlighting languages.

How do you get this into a form? It's impossible to just do it because clicking submit opens a new blank window and does nothing at all related to submitting a form in FF2.0.1 mac.

Wicked stuff man!! You're a genius!!

There is a firefox error when using design mode. This occurs when the codepress iframe is initially created with display:none .

Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMNSHTMLDocument.designMode]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: codepress.js :: anonymous :: line 27" data: no]

A quick google search shows that this is a known firefox bug. Not sure if/how you want to workaround this.

I like this script, suggest two features to add:

One: Patch the script for use without need of iframe (i like standards :D).
Two: Make this funcionality in form of plugin for CMS like WordPress or Movable Type.

I was also getting the same error as Dustin. I got around it by adding a few hacks in the codepress.js file. What I essentially do is check the parent iframe and do a recursive search in it and its parents to see if it is visible. if not, then i add an onclick event handler that will make the element editable when it is run. This is the extra code in the CodePress initialize function, in the section where it checks for firefox:

var chkHideElement = parent.document.getElementById('codepress'); ... expand and read the rest
var vis = true;
do {
if (chkHideElement.style.display == 'none') vis = false;
chkHideElement = chkHideElement.parentNode;
}
while (chkHideElement.tagName != 'BODY');

if (vis == false)
document.addEventListener('click', this.onClickHandler, true);
else
document.designMode = 'on';

And this is the code for the click handler:

onClickHandler : function (evt) {
if (document.designMode != 'on') {
document.designMode = 'on';
this.findString();
}
},

Ok - you are definitely the man! This bug in IE was bugging me so much (pun intended) and I was trying to figure out what's up with it. Thanks so much for taking are of it!

i tried this in Konqueror 3.5.5 and i got a popup saying "your browser is not supported" so i changed the browser identification to Firefox 1.5.0.4 and it works.
so you might want to add Konqueror to the list of supported browsers.
and even the preview for the comment box works.
:)

Hi. I was hoping to use CodePress to mimic the syntax highlighting seen in Eclipse. But I notice that if I take code from eclipse and move it into CodePress, there are differences between the two. Changing the colors used seems straight forward enough via codepress-java.css, but I'm wondering if anything can be done about the other differences between the syntax highlighting? The differences include some things getting highlighted in one and not the other, and vice-versa.

Any ideas on how to go about setting up a version of CodePress that does syntax highlighting exactly like Eclipse does? Would you just have to write a really comprehensive codepress-java.js that accounted for everything somehow?

DEFECT:

Seems like if you do a Paste in IE, the strings in JavaScript source are intially shown as strike-out text. As soon as I press Enter, they change back to normal.

This defect does not manifest itself in FireFox

Hi again!

I am also doing a project as identical to the ECCO project. But there is a feature to select a JVM installed in the server from a set of JVMs. Could you suggest a method to how should I do it....

Thanx

DEFECT:

Seems that spacebar no longer works on IE. It does not cause highlighting to occur.

For PHP (and most likely others) are there any plans on having functions and reserved words also highlighted?

e.g. ... expand and read the rest
file_exists
file_get_contents
preg_replace
dirname
basename

...etc

I feel sorta stupid but can someone tell me how and where they use Codepress?

Hey Fernando, Have you noticed that in IE6 (possibly IE7, too) CodePress.getCode() will leave a
at the very first line of the returned text? This is present in the latest version (and 0.8.12). However, Firefox (2.0) does not exhibit this behavior. A workaround would be to ignore the first character (the newline), CodePress.getCode().charAt(0) (charCode 10) if it's a new-line, (this could, of course, be built into the getCode() function itself, however this solution is not as clean as it could be since it does not solve the problem, just fixes it after the fact. I haven't had time to look into fixing the problem, especially since the work-day is over, but I figured I would let you know in case you had any thoughts up front. IE is probably just doing something retarded with code.replace() in getCode();

Cheers,
Marco

hey, this it's the real list of numbers, take the code... :P

8px of separation ;) ... expand and read the rest

<?
header("Content-type: image/png");
$i=imagecreate(26,50000);
$bg = imagecolorallocate($i, 17, 9, 119);
$letra = imagecolorallocate($i, 255, 255, 255);
imagestring($i,2,1,13,"1",$letra);
$numero=1;
$y1=13;
while ($numero<2940){
$numero++;
$y1=$y1+16;
imagestring($i,2,1,$y1,$numero,$letra);
}
imagepng($i,"images/linenumbers.png");
?>

=) use it

Hello,

first: sorry for my bad english.

In IE7, you must click exactly the beginning of the first line. In Firefox, I can click somewhere in the iframe.
It the behaviour of ie in firefox possible?

any1, knows, how i can put the codepress in TinyMCE?, please, if any1 knows, tell me :P

is it somehow known when then asp syntax highlight version will be availble.
grazie

Here is something else for the TODO - What about code folding? Perhaps a span tag added to the first bracket that will fold to a closing bracket span tag... not sure if I'm making sense... but anyway...

A newsletter could be very nice, just to be informed about new version :)

@fermads, I know they are PHP functions--a few I simply pulled from your example. Did you feel like you needed to correct me, or are you saying you'd like me to provide examples of PHP's reserved words? Also, yes, it WOULD be easy to implement, which is why I am curious (per my first post) "are there any plans on having functions AND reserved words also highlighted?"

Hi Femads - kudos to you, fantastic! Any thoughts or suggestions on how to use in ASP.NET? Thanks.

hello. very nice work. thank you!

is it possible to use more than one language at the same time? ie. html, css and jscript in same file.

Hi, again for ASP... tell me how to implement regexp for vbscript comment, and I'll do on my own to make it work on asp pages.
it's a real great thing

Things aren't working for me. :(

Files: public_html/codepress ... expand and read the rest
Editor: public_html/codepress/editor.html
Files to edit: public_html/new/index.html
Source of editor.html:
===
<iframe id="codepress" src="codepress.php?action=edit&file=[../new/index.html]" width="100%" height="400"></iframe>
===
Edited part of codepress.php:
===
$path['files'] = "../new"; // directory of files to edit
===

Thanks.
-MMJ
:)

flames 2007-01-11: is it possible to use more than one language at the same time? ie. html, css and jscript in same file.

I had that same problem so i've rewrote fermads idea but then with multiple support and the code is split into two parts: highlighter and editor that way i can highlight page content without editor.

Hey,

You should definitely create a sourceforge project for Codepress, might help you with support -- since it provides forums and such. Also, it would be easier for you to allow others to work on it too so its not just you. :)

what about comment or text highlighting ?

$var = "string // is not a comment";

I am from a Google Web Toolkit (GWT) background, I think the editor can be packaged into a GWT class and gain some publicity because of that.

First thanks for a great tool!
I would really need to have multiple codepress windows on one page. I've read that this will be a feature in the upcoming version. Is there an approximate release date for that.
If it is too far in the future, I would add that functionlaity myself. Maybe you have some advice for that.

I created a fix that lets you have multi codepress windows on one page (requested by Matt). I also changed the php highlighting a bit, it supports highlighting of all php functions (requested by pixelchutes). I also fixed the highlighting issue with escaped quotes within a quoted string.

Along with that, I have a second version of codepress that you can use, if you want to fix the bug with Mozilla where it will cause an error if you load the page with an invisible iframe. The only slight problem with this fix is that you have to click on a codepress window twice before you see the cursor.

Go to the page below (or click my name above) to see an example and to download my changes: http://ciole.net/codepressfix/

fermads, if you go and download crimsoneditor (www.crimsoneditor.com), in the directory that contains all the syntax highlightings you will find a file with all the php functions in it. that's what I used.

Yeah, the way it's set up it's going to get ugly with very large regex patterns. I don't know how you'll get around this problem in general without converting your system over to a more efficient state machine... which, I know, is a BIG undertaking :)

Also, I haven't figured out why you make reference to the top document in the onload function, rather than the parent document. I have to change this to parent document, since the page I run Codepress from is within a frame. Is there any situation where reference to parent document wouldn't work and you'd need to use top?

Wonderful! Thanks for the quick response.

This editor is perfect for simple html/css editing. I especially like the simplicity of the script, this makes it easy to edit.

A few additions for the CSS regexes:
/(;)/g,'<b>;</b>',
/(:)/g,'<b>:</b>', /((#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?)|(***color names suppressed***))/g,'<s>$1</s>',

Congratulations! CodePress seems to be really great. Nice job! :)
EQ / HH

Any chance of making a Wikimedia syntax highlighting? That would be very useful!

Ok people, after experimenting, editing, reading ideas here and some things that I needed, I have taken fermads idea to the next level and put it online.

A resizable CodePress with seperate syntaxHighlighter and a wysiwyg mode.

To fermads: you definatly need a cvs or forum so we can contribute our code snippets because i would gladly help you.
Here's the example http://moocms.com/

@fermads: forgot to add direct links to the needed sources ;)
http://cvs.moocms.com/moo/inc/js/codepress.js?v
http://cvs.moocms.com/moo/tpl/default/css/codepress.css.inc?v
http://cvs.moocms.com/moo/inc/js/syntaxhighlight.js?v
http://cvs.moocms.com/moo/tpl/default/css/syntaxhighlight.css?v

I found that when use SetCode() funtion, the syntax highlighting don't work in the moment with the code that was pushed. If you make a call to CodePress.syntaxHighlight('generic');
in the end of the SetCode function then this lite problem is solved.(in v 0.8.15)
Thanks for this incredible script.

Sorry, but this pice of software is not usable in real applications it has to many bugs. Don't use it! You waste your time.

Hi there,

Just thought I'd show you somewhere I'm using this (another Web-Based IDE), and loving it. One bug, though, is that occasionally when I try to type something, the cursor jumps to the top of the textarea/iframe/thing and where my cursor was, &shy; appears. I don't know if you're aware of this. ... expand and read the rest

Although, I have to say that it's overall a very impressive tool (lack of Opera support is irritating, although I'm willing to work with you on a solution)

Andrew Garrett
DevAnywhere
(http://www.devanywhere.com)

Thanks for your compliments fermads.

Yeah i had rewrite a lot of your code to get it all working.
Your base work was great to start with.

Codepress v.0.8.15 doesn't work under IE7 ?

Is that a browser? I thought IE7 was somesort of shorthand for Interfering Enforcement version 7

Hi all,

Has anyone thought about having multiple CodePress editors in one browser window? ... expand and read the rest

I ask this because my intention is (as this projects source) to create an online kind of (WEB) IDE. I've started on working on a layout system, which now has a window and panels (Based on Eclipse's panels). Two most important features that my IDE should have is tabs... which I've achieved, the different tabs could all use one editor (busy with that). But another is split-screen editing, which should be done in separate panels and thus requesting multiple editors in one browser window.

Anyone ideas?, as IMHO it isn't possible at the moment without modifing the code. I will in the same time think about it and try myself, but perhaps others have great ideas. I'll let you now about my results.

Pim

I now see that I should have worked my way down the Comments a little bit earlier. My project looks a lot like Andrews, although I'm working more on a kind of Eclipse clone concerning layout. Perhaps we could mail (click name :)) and exchange ideas?

Any idea when the multi editor fix will turn up in the coodepress development?

Keep up on the good work.

Pim (http://echo.pimvullers.nl/)

I noticed this solution somewhere else (I can't remember where), but if you replace the image with a real text, you can get rid of the resize problem, as well as ensuring that the line number and line are always properly aligned. I've never messed around with it, but putting the line numbers in a separate div should probably ensure that they aren't selected by a common text select.

I think you should add this in php JS :

/([^:])#(.*?)(<br|</P)/g,'$1<i>#$2</i>$3', // php comments #

Hallo,

code-press is very beautiful...

i'm working for insert all php functions, C++ language, C# language, Delphi and Pascal language, Ruby language, Pyton languadge and many others.......

Just one small point. CodePress requires short open tags for the PHP file to work.

I've got this option disabled as it generates warnings with XHTML files as they start with <?xml which becomes interpretetd by PHP with short_open_tag set to On.

Hi, I started working on Ruby support. Will send you email if it gets anywhere!

Hello,

support for C++, C#, Ruby, Delphi and Pascal, Pyton......is ARRIVED !!!

Will send you for e-mail !!!

Bye

this version is fabulous :D thank you very much for what you do

I use Firefox 2 with SUSE Linux 10.2 with all default font settings, but string number images and actual text do not match, looks like text is 1 pixel higher. Does anybody else has this issue? Maybe it's because I use XGL?

What about line wrapping, like Zend or PHPed, or and good IDE?
And function name highlighting?

This new version is really nice. Good job on the software!

Is there still a way to do something similar to this: ... expand and read the rest

<iframe id="codepress" src="/codepress/codepress.php" width="100%" height="400"></iframe>
<textarea id="codepress-ondemand" lang="[language]">/*your code here*/</textarea>

I edit code that's stored in a database so I have no need to work with flat files, but it seems like all the new methods of implementing codepress uses flat files.

Please advise : - )

Steven,

Keep in mind that this is not an IDE but an editor, but wrapping would be nice to have. Function name highlighting has been mentioned before. The trouble is that it blows up the size of the JS files, and besides it makes the parsing/highlighting slower. It has been done by Mike for PHP (http://ciole.net/codepressfix/), so if you like you could do it yourself.

@Fermads: Yeah I saw the IDE you're workin on. The name also amazed me. And yes this way there will come a lot of online IDE's this way, but I think the purposes are a bit different. I guessed that ECCO's intention is more towards Java, and also uses Java in it's interface. My intention is towards Web Development (PHP, JS, CSS, (X)(HT)ML) and I'm trying to use only JS and PHP. But I keep an eye at your projects.

Hi Fermads,

I found another (little) bug when trying to integrate the 0.9 version into my page. This page is fully generated by JS DOM, this way the HTML file only contains a bunch of <script> and <link> tags for the JS and CSS. When trying to add CodePress (after figuring out that the (CSS) files did not have the right permissions) it removes everything, when debugging using FF DOM Inspector, I found out that the document.write command used for getting the theme CSS file clears the complete document structure. So CodePress does not work well with DOM generated pages at the moment. Trying to fix it, will inform you about that.

Good stuff! I will try to implement this on my blog

how can i get the source code from PHP? please tell me, it's an emergency

Joaquin, to get CodePress source, just donwload it ;)

CodePress website is available in french on http://codepress.free.fr

Pretty amazing.

I wanted to incorporate your code on my librarey, JsWebGets, for a tool I'm developing called JsDesigner. You may check an old version on-line on the website http://www.jswebgets.com.br. ... expand and read the rest

Since your library is LGPL as mine, I think there will be no problem, right? Justa wanted to ask your express permission before doing so. I will have to change it a bit to my standards (setValue and getValue, setWidth, setHeight and some other methods, plus all objects inherit from JsWidget so... ;-)).

Well, if I find any bugs or change some code for optmizing, I send it back, but I think there will be no need to. Your code seems pretty clean and correct.

Cya!

Pablo

OMG! I loaded a 2636 code, and when it reached the 1500 it started all over again! :-D hehehe. This was funny...

Well... except for the highlighting code, I won't be able to use your code: It's not very OO... I can't have more than one? Oh god... :-/

Check my JsRichTextEditor code... maybe you get some ideas on how to make an OO editor, that can be used more than one time. Just a thought...

I had to modifi my JsRichTextEditor in some other pieces, so I could use your code...

I figured out why your code will never be capable of using more than one editor. You're using JSON sintax on your code, which doesn't allow you to create objects that inherits from others... ... expand and read the rest

Also, you use a lot of document.getElementById in your code, which is the major reason for this problem. Some of the options you may have are: you can pass the ids of the objects you're going to use as editor as parameters for a method; you can pass only the id of the editor, and work with the childNodes, or you can do it all OO using the var self OO style I use.

Implementing an OO widget is easy, try this:

Codepress = function()
{
var self = document.createElement("code");

self.iframe = document.createElement("iframe");

self.appendChild(self.iframe);

self.exampleMethod = function()
{
alert(1);
}

return self;
}

This is just an idea... You can do a lot more...

no, i want to get the code from php, i want to aply the code in to a variable like $code=***;

What about to improve an auto indent feature?
It seem to be very usefull...

Nice job, man!

Regards

Joaquim,

You make no sense on your message. You want to load the code from PHP, or you want to load the code TO PHP (which would be better describe as submit the code from the editor to PHP to save it)?

THANK YOU!!! That is what I need!

Jolly good editor youg chap.

Bravo, Bravo!

the editor rocks!

we are planning to use it inhouse in our company for quick elearning. ... expand and read the rest

btw, any idea when ecco will be ready for download?

will surely appreciate an approximate timeline.

thanks again for the lovely work!
reggie

joaqin,

for getting the code into a PHP variable on server-side: ... expand and read the rest
see message above on AJAX (2006-11-16)

"I used CodePress.getCode() to get the source from the codepress window and used AJAX to post to server and save it.
But you can do it with forms as well. Something like
document.formname.textareaname.value = CodePress.getCode();
document.formname.submit();"

so if the form submits to a php page, you can get the POSTed code into a php variable there.

Any chance of having Verilog and VHDL support?

Someone said "support for ..., Python,... has arrived" a few weeks ago, but its not there. Any idea on when?

I had some problems with IE while trying to paste from textarea to codepress-frame. Problem was that linebrakes disappeared...

I fixed it by adding o = o.replace(/<BR>/g,' ... expand and read the rest
'); to msie.js

Also the fullscreen mode seems to be broken on IE. Has anyone fix for it?

Very Nice, I'm very impressed with this editor. I've been looking all over trying to find something like this. Thanks so much!

this is excellent ......

In the Undo function, you should use the Array.shift() function instead...

while( history.length > 21 )
history.shift();

this way you have a tidy array of 21 elements

Hi,

I've been using your codepress code as the basis for my uni project (an online java ide basically). ... expand and read the rest

I've managed to get dynamic line numbering working. It uses a div outside the iframe of the editor that counts the number of line breaks in the editor and then adds (or removes) that many numbers to the line numbers. There's also a scroll event handler to scroll the div as the editor is scrolled.

This also has the advantage of making the lines nos and the code of the same size and font, so when you increase/decrease font size they still line up.

I'd be happy to pass this onto you to develop in your own way.

Great work!
Iain

Very nice job. I really needed this. Good luck and keep up the good work.

wonderful. very2 useful. Thank you so much. but is there's a support for coldfusion? I think i need this... I'll try to make some changes anyway.

Can paste just everything into the code editor (any arbitary html). You can select the line of buttons just above editor, copy them to clipboard and paste into editor. Test it, it is funny!

thank you for this great editor!

Hi,
I am trying to integrate your editor into our application, but found a bug related to Firefox, that source code longer than 4096 chars gets corrupted. This is due to a bug in the setContent method, where only the firstChild of the "codepress" node get copied into the editor. In firefox you need to loop over all children, because firefox breaks cdata into multiple nodes, if the content exceeds 4096 chars.
This happens only, if the code is taken from the loading page and not from the php site.

Python syntax highlighting and indentation would be nice... has anyone worked this out yet?

Looks great! Maybe it just needs a smart tabs function... but, anyway, good job!

Hi,
The editor is great work. At the moment I am trying to integrate it into my file-manager.
On Firefox its working well, but with IE (6 and 7) I have some Problems. The first time, when its displayed by the IE, everything is ok. But, when I refresh the site(for example, when I mark the URL in the Adressline and press Enter), I can only see a white area. When I empty the Cache, everything is ok again.
I hope this description can help you to fix the problem.

greets,
André

IE Problem with reaload:
Include codepress to page with timestamp:
<script type="text/javascript" src="....codepress/codepress.js?timestamp=123123123" id="cp-script" lang="en-us"> </script> ... expand and read the rest

And replace in codepress.js code:
var cpPath = $('cp-script').src.replace('/codepress.js[.]*/','');
By:
var cpPath = $('cp-script').src.substr(0,$('cp-script').src.search('codepress.js'));

Fullscreen problem in IE: Fix it by replace code in codepress.js:

toggleLineNumbers : function() { ... expand and read the rest
cpBody.document.getElementsByTagName('body')[0].className = ($('cp-linenumbers').checked) ? 'show-line-numbers' : 'hide-line-numbers';
this.hideAllMenu();
},

pageWidth : function()
{
return self.innerWidth?
self.innerWidth :
window.innerWidth != null?
window.innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth :
document.body != null ?
document.body.clientWidth :
null;
},
pageHeight : function()
{
return self.innerHeight?
self.innerHeight :
window.innerHeight != null?
window.innerHeight :
document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight :
document.body != null?
document.body.clientHeight :
null;
},

resizeFullScreen : function() {
if($('cp-fullscreen').checked) {

// Browser Window Size and Position
// copyright Stephen Chapman, 3rd Jan 2005, 8th Dec 2005
// you may copy these functions but please keep the copyright notice as well
// cH = self.innerHeight ? self.innerHeight : document.documentElement.clientHeight;
// cW = self.innerWidth ? self.innerWidth : document.documentElement.clientWidth;
cH = this.pageHeight();
cW = this.pageWidth();
cpEditor.style.height = cH-22 + 'px';
cpWindow.style.height = cH-2 + 'px';
cpWindow.style.width = cW-2 + 'px';
if(cpWindow.offsetParent.offsetTop!=0||cpWindow.offsetParent.offsetLeft!=0) {
cpWindow.style.top = - cpWindow.offsetParent.offsetTop-3 +'px';
cpWindow.style.left = - cpWindow.offsetParent.offsetLeft-3 +'px';
}

}
},

I also had issues with IE once CodePress has been cached. It would load fine on refresh but not when retrieved from cache - also happens on codepress.org.

Problem was located at: if (this.readyState == "loaded") ... expand and read the rest
This would be correct when the page refreshes but from cache it simply comes up as "complete" so I changed the line to: if (this.readyState == "loaded" || this.readyState == "complete") { callback.call(this);}

This would then load the file editor in at only 16px in height - not sure why - so I removed the style on the iframe further down from pixels to 100% - so it would be max size of the container it is in.

Works fine now thank you.

This is a wonderful thing.

Wish: ... expand and read the rest

Code completion for objects/classes.

I would love to have a drop-down with options when I type an object name with a list of the functions within the class.

Also, how about auto-variable completion? Type a variable name gives you an auto-complete list of variable names starting with the strings thus far.

Hello, I'm having issues with the new version. You seem to have changed the markup for using it in projects, but I can't figure out how to load code from a TEXTAREA or javascript into the editor itself. A hand would be much appreciated.

Yo dude...
Some nice job...
Do ECCO this thing through the world... hehehe

;-)

[]s

gracias (thank).

hey this is great!!! but it isent working on my site?? when i download the file and go to change the veriables like you say to do and i cant find them to edit and i get confused beacuse it says this

... expand and read the rest
/* * * * * * * * * * * * * *

* no need to change below *

* * * * * * * * * * * * * */
so im confused to what i have to change please help my email is frowsh.talk@gmail.com

Really nice and its great ! thanks for this good work.

Very nice indeed!
I'll download it at once!

Thanks for this fantastic tool. CodePress has been integrated into KFM (http://kfm.verens.com/) for a while, and while there are some minor bugs, overall everything is very impressive! Great work, and hope it continues to improve!

Great tool! Can you add an option to lock the pane so it can just be used as a code display tool?

I'm considering adding a parser to this for CFML (Cold Fusion). In CFML an SQL query is written directly and contained between cfquery tags: <cfquery></cfquery>. It is also used to create HTML, similar to PHP. How can I mix the SQL, HTML and CFML parsing engines to handle these cases?

Thanks much. I just ported the codepress.php file to CFML for people (like me) that use Cold Fusion. I'll probably mess around with syntax highlighting for CFML in a bit but for now I'll send you the codepress.cfm and codepress.js files for inclusion into the codebase if that's ok.

My goal, btw is to use this as a syntax highlighter on blogger - a code display tool only. I need to figure out how to embed this without having to upload any files - should be interesting ;)

had a slight problem with $() - if I already have $() defined, your version overwrites it. As the version I have works like a superset of yours (gives the results you would expect with one parameter, but can be used with more than one or with arrays), the easy solution was to put "if(!$)" in front of your $() definition in codepress.js

Hello, very good editor. Now I'm trying to use it and found the two bugs. The first one I defined yesterday: when you have ten empty lines and some text after them. set cursor to the first line and by pressing the 'delete' button try to shift the text to the first line. you will note, that editor can't remove '<BR>' statements correctly and it's behavior will be like 'Enter' button. The second bug: type something at the screen with text anought for scrolling. after that try to click and hold left mouse button and scroll down - the selected content will be removed. If I find the solution, I will let you know.

Not usable!
Copy and paste does not work and and and
Don't waste you time with this Software.

Hello. I have some problems pasting text (Ctrl+V) in IE 6. Empty space appears until you press any key. Also Scrolling does not work. But i've found a solution. Insert this into Key-Down Handler:
if((charCode==34||charCode==33)&&browser.ie&&!evt.shiftKey) {
window.scrollBy(0, (charCode==34) ? 350 : -350); ... expand and read the rest
cursorPos = document.selection.createRange().duplicate();
clickx = cursorPos.getBoundingClientRect().left;
clicky = cursorPos.getBoundingClientRect().top;
if (charCode==34) m = 14; else m = -14;
try {
cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx , clicky+ (25*m));
cursorPos.select();
} catch (e) { }
evt.returnValue = false;
return false;
}

No word on Ruby support?

Here's a start:

http://code.whytheluckystiff.net/sandbox/browser/trunk/examples/tippytippytepee/static/languages/codepress-ruby.js

Very nice.
Keep up the good work.

Tac

Found some bug with '$' signs. '$$' is replaced by '$'. Made a fix but don't know if it is the right way.

FIX: ... expand and read the rest

syntaxHighlight : function(flag) {
...
o = o.replace(/\$/g,'$$$$'); // replace $ with $$
...
}

I think the problem of replacing $$ with $ is in the line:
editor.innerHTML = this.actions.history[this.actions.next()] = (flag=='scroll') ? x : o.replace(z,x);

I just can't get this editor working. I'm copying example 1 exactly(other than changing paths) but it's just echoing the contents of the file onto the page, rather than creating a codepress textarea.

I know this isn't really the place for support, but this isn't really a bug so didn't want to report it there. Any help appreciated!

Very cool editor! However is does not perform well with a 3000 line large XML file in MSIE 7. That being said it's still the best I've come across. Well done.

A quick and dirty adaptation for ASP.NET. ... expand and read the rest

ASPX:
======================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="codepress.aspx.cs" Inherits="codepress_modules_codepress" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>

<% Response.Write("<link type=\"text/css\" href=\"../themes/default/codepress.css?timestamp="+time+"\" rel=\"stylesheet\" />"); %>
<% Response.Write("<link type=\"text/css\" href=\"../languages/"+ language + ".css?timestamp="+time+"\" rel=\"stylesheet\" />"); %>
<script type="text/javascript" src="../engines/msie.js?timestamp=<% Response.Write(time); %>"></script>
<script type="text/javascript" src="../languages/<% Response.Write(language); %>.js?timestamp=<% Response.Write(time); %>"></script>
</head>
<%
if (engine == "gecko") {
Response.Write("<body id='code'>"+code+"</body>");
} else if(engine == "msie") {
Response.Write("<body><pre id='code'>" + code + "</pre></body>");
}
%>
</html>

Code Behind:
======================
public partial class codepress_modules_codepress : System.Web.UI.Page
{
protected string language;
protected string engine;
protected string code = string.Empty;
protected string time = DateTime.Now.ToFileTime().ToString();
protected void Page_Load(object sender, EventArgs e)
{
if(!string.IsNullOrEmpty(Request.QueryString["file"])) {
language = string.IsNullOrEmpty(Request.QueryString["language"]) ? "generic" : Request.QueryString["language"];
engine = Request.QueryString["engine"];
string file = Request.QueryString["file"];
string filePath = Server.MapPath(string.Format("../examples/{0}", file));

if(File.Exists(filePath)) {
using(StreamReader reader = new StreamReader(filePath)) {
code = HttpUtility.HtmlEncode(reader.ReadToEnd());
}
}
}
}
}
}

codepress.js line 59:
======================
cpEditor.src = cpPath+'modules/codepress.aspx?action=edit&file='+filename+'&language='+language+'&engine='+cpEngine

Good work,
I'll use it in my code library.
It seems great.

Great job guys I was looking for something like this, even i tried by my own and got some functionality, but this is great

Great job!!! Very nice work!

Excellent script...Anyone have some code how to specify the language ie css when the page loads? A simple example would be best. I can not get the highlighting to be anything but the default. Thanks!

Hi,
tried the newer version. Really great to integrate now. Works great for Firefox, but for IE7 after editing some text, then scrolling IE takes up 100% CPU. Any idea, why that is happening?

Hi,

I've juste upload a patch to handle SPIP shortcuts.

Now, could the text area stay on the page (invisible) and be updated acccording to codepress edition so that existing forms could works like if codepress was'nt above ?

Please take a look at the ruby and rhtml syntax highlighting on the email I sent you on feb 27th and today. It worked nicely on firefox but I am having some problems with it on IE.

Thanks in advance,

Shairon

Fernando,
Does the API have any internal knowledge of line numbers? What I want to know is if it's possible to write my own "go to line NN & column NN" statement to the API and have a block cursor go right to that spot. We are planning a system that will compile code and generate error messages - and on clicking on that error message, we'd like it to deliver the cursor to the start of that line or codeblock. Can your API be customized?
GVD

Hey, I improved the setCode function to allow you to change the language, similar to the v0.8.x series. A patchset was submitted at sourceforge: https://sourceforge.net/tracker/index.php?func=detail&aid=1691049&group_id=186981&atid=919469

Hi,

Codepress is a well written and has nice functionality. ... expand and read the rest
I've uploaded a patch so that C# can join the CodePress language family: syntax highlighting for C# (including example).

I began with the Java example, but adopted it quite a bit.

Keep up the good work!

> textarea_id.toogleEditor()

What does "toogle" mean ? :)

Great Tool! Keep up the good work!

We just improved autocomplete for IE and Gecko. When you type 'Hello World', it will recognize and overwrite the ending ('). The old behavior would have written 'Hello World'''.


A patchset was submitted at sourceforge:
https://sourceforge.net/tracker/index.php?func=detail&aid=1693760&group_id=186981&atid=919469

I am having problems including CodePress inside of a xhtml document. The editor shows up but the data that should be in the editor is missing. Any ideas? Has anyone included codepress in a xhtml document?

Hi Chris, I have included codepress into xml document, but I had to put it inside html iframe

This is a very usefull tool indeed - it's a fav'!

Hi, I installed codepress just like it said, fairly simple. And then I tried viewing it and only things inside "" marks gets highlighted blue.

I am using the html class on an html page. Nothing is being highlighted except for quotes. I get the linenumbers. Just no highlighting. ... expand and read the rest

<textarea id="FileContents" name="FileContents" rows="50" class="codepress html linenumbers-on">
<html>
<head></head>
<body>
somecontents
</body>
</html>

</textarea>

I installed codepress on another part of my website, and now the textarea disapears completely.

<textarea id="BUpdates_SQL_Statement" name="BUpdates_SQL_Statement" cols="75" rows="4" class="codepress sql linenumbers-on>select * from customers</textarea>

<textarea id="BUpdates_SQL_Statement" name="BUpdates_SQL_Statement" cols="75" rows="4" class="codepress sql linenumbers-on">select * from customers</textarea>

I got codepress working in an xhtml document. I discovered that in my case I needed to surround the data to be edited by [!CDATA[ ]] tags. I did notice that the codepress webpage is actually an xhtml doc ... I am curious that it did not seem necessary to put the CDATA tags in. I am curious as to why this works on this web page but not the one I was working on.

Great work! But, the latest version dropped the setLanguage method? Do you plan to add this back in, or is there another way to do this! I think new versions should be back compatible?

I am trying to get tabs working correctly so when you select multiple lines and press tab, it indents all the lines. But to get this to work, I had to change how whitespace is handled in IE.
Is there a reason for removing all &nbsp; characters. I hope not, because instead of something like:
... expand and read the rest
o = o.replace(/&nbsp;/g,'');
I have
o = o.replace(/&nbsp;/g,' ');


Also, I've got PASTE working in IE. If anyone needs it right away, send me an email at justin AT jupiterit D0T C0M. Otherwise, I will submit a patch once I've got a few other enhancements working.

Hm... To work readonly-on property in IE correctly, change in file msie.js line:
editor.contentEditable = (arguments[0]) ? 'true' : 'false';
to line:
editor.contentEditable = (arguments[0]) ? 'false' : 'true';
;-)

Is it possible (and how) to use Codepress with PHP?

That is, editor.php -> editor.html, with CodePress as a replacement for a textarea form object, inside a HTML form having process.php as its action -> process.php, where the text written with CodePress is processed.

Perfect Tool!

The best tool on the way you are the best!!! =)=)


pedro quaresma, yes, view in the how to replace a textarea... ¬¬

Hi there,

I've submitted a support ticket (strangely the first it would seem!) to the sourceforge page. Any chance someone could have a look at it for me as it's just sat there atm.

Many thanks

When copying and pasting text using IE, linebreaks are stripped. Could you let me know if a fix for this will be part of the next build? Thanks.

First --> great tool =)
..but I have a problem with the editor.

It works good, but then i open the editor in a "tab" (where no reloading of the hole site is, let's say ajax) the editor don't his code from the <textarea...> so it don't work in this case!

Does there a solution exists?!

If the textarea ID has characters such as '.' in it, then codepress can fail. The way I've gotten around this is, in the CodePress.run() function, after the line:
if(t[i].className.match('codepress')) {
, replace the line "id = t[i].id;" with this:
id=t[i].id.replace(/[^a-zA-Z0-9]/g,'_');

Not a perfect solution, but it's working so far.

Great work! I am a little new to the whole js thing but how do I go about saving the text inputted in the code window through a form? When I hit "Submit" on the master document I do not get the submission from the iFrame as well... Any direction would be appreciated!

Thanks

Great work!!!
I was looking to make something like ECCO myself, with a C/CGI backend for live compiling and javascript-based execution, but I lacked a syntax editing component. You're a life saver!

A question: why didn't you use numbered lists (<ol>) for line numbers? See a (viewer only, not editor) sample in http://users.sch.gr/alkisg/tosteki/index.php?topic=900.0 (sorry, Greek language used), it works fine. And if a OnBeforePaste() function converts the clipboard data to text only, I don't think line breaks etc will be a problem...

Keep up the good work,
Alkis

awesome work.

however I cannot use it because another JS-Lib uses the 'class' attribute of <textarea>.
Is there any way to make this work..?

Cheers,
Tom.

one more thing:

is there a way to move the JS code from 'codepress.html' to somewhere else..?

After you press enter, it's natural to have the new line be indented the same amount. To do this in IE, add the add

if(charCode==13){ ... expand and read the rest
CodePress.indent()
}

to keyHandler and the following function

indent : function() {
//find preceding spaces
var range = document.selection.createRange();
var element = this.getLineElement(range);
var characters = CodePress.first_non_whitespace_character( element.innerHTML);
var content='$0'
for(var i = 0; i < characters/6; i++)
content = '&nbsp;'+content

var pattern = new RegExp('\\'+cc);
var content = content.replace(/\$0/g,cc);
setTimeout(function () { CodePress.syntaxHighlight('complete',pattern,content)},0);
}

by Jupiter! :p

it seems as if first_non_whitespace_character() needs to be implemented ?

Fermads, I send the fix that I did in highlighting in ctrl-v, I'm not shure that it is the best but work for me. But I don't recive response, may be the e-mail was lose or my work ir really bad.

I get another problem with the code snippets ; in IE sometimes it don't work.

I use the textarea in a tab in my solution but have a problem:the text doesn't color.Why?

I use the textarea in a tab in my solution but have a problem:the text doesn't color,why?

hello,

first of all, very nice tool, ... expand and read the rest
i only have 1 problem, that is that the line numbers show up twice
1 time on the left side over the full length of the page, and one time in the textarea itself,
so how do i remove the line numbers that show up over the full length of the page?

thanks, Alexander "leipepo" Meesters

sorry it is fixed already, i was including the style sheet, but that is done automatically, sorry again

I've implemented codepress into my CMS system, i have no problems loading source-codes into codepress.

however when i start editing and/or scrolling through a large source code, the window starts using high ressources (heavy cpu load) the window freezes for 5+ seconds, then resume

also - sometimes the line-counter vanishes, a previous suggestion about using a styled list instead of pictures seems to sound more reasonable then pictures. i haven't figured how the lines are displayd, but ill try implementing a list, once i do :)

ps. Codepress is awesome ! especially with the Jupiter addon

following words should be highlighted:

PROCEDURE, GO, @parameters, (others?) ... expand and read the rest

also SQL types like int, string, uniqueidentifier and likewise should be added...

i'll try doing it myself once i have time

ill also make the missing ASP highlighter script/css

I use the class property to store non-html data and other javascript settings. The current codepress implementation does not allow me to have any data in the class property other than the classes used by codepress.

On line 40 of codepress.js: ... expand and read the rest
self.language = language ? language : self.options.replace(/ ?codepress ?| ?readonly-on ?| ?autocomplete-off ?| ?linenumbers-off ?/g,'');

I'd like to suggest this flexible version, allows other classes to be used:
self.language = language ? language : (self.options.match(/html|css|php|java|javascript|perl|ruby|sql|text/gi) || ['generic'])[0];

This is in reply to ThaDafinser's Ajax issue. At the end of the Ajax page, call CodePress.run().

here's the first_non_whitespace_character function
first_non_whitespace_character : function(text) {
var char_pos = 0;
while( ( text.substring(char_pos, char_pos+6) == '&nbsp;')&& char_pos < text.length) { char_pos= char_pos+6; }
return char_pos;
}
-put in msie.js

Does anyone have problems with backspace not working until after you write text in FF?

well i cant seem to reproduce your problem,
i am using firefox 2.0.0.3 on ubuntu 7.04,

greeting Alex

<textarea id="codepress2" class="codepress javascript linenumbers-off" style="width:700px;height:200px;" wrap="off">
==> you can place the wrap in the css file like this :

textarea {
white-space: pre;
}

When will you code a generic.js javascript file for both of msie & gecko engines ? It will be a very nice thing I think.

Great tool !

oh you should create a forum ^^

Anyone tried codepress with RubyOnRails yet?
I can't get it to work.
Just including "<%= javascript_include_tag 'codepress' %>" ... expand and read the rest
inside default layout doesn't work...

Especially line 42 in codepress.js seems to be a problem:

"self.src = CodePress.path+'codepress.html?engine='+CodePress.engine+'&language='+self.language+'&ts='+(new Date).getTime();"

Where do I need to place "codepress.html"?
In the same dir where my <textarea>-file is located?
Cheers

A lot of text editors highlight which line you are working on. Here's a dirty way of doing that for IE.

1. Add the following function: ... expand and read the rest

mouseClickHandler : function(evt) {
if(CodePress.selected_line)
CodePress.selected_line.className =''
var range = document.selection.createRange();
if( range.compareEndPoints('EndToEnd',range)==0 && range.compareEndPoints('StartToStart',range)==0 )
{
CodePress.selected_line = CodePress.getLineElement(range);
if(CodePress.selected_line)
CodePress.selected_line.className = 'selected'
}else
CodePress.selected_line = null;
}

2. In syntaxHighlight change
o = o.replace(/<P>/g,'\n');
to
o = o.replace(/<P\b[^>]*>/g,'\n');

3. At the end of syntaxHighlight add

this.mouseClickHandler();


Grabbing code by the 00's
~Jupiter ITS


p.s. I will contribute all this stuff back once I've got it in a semi-stable state. Shoot me an email if you need it now (moc TOD retipuj TA nitsuj)

Oh, I forgot to add to change your css to:
p.selected {background-color: #e1f2f9;}

I just got tabs, indent, control S working in MZ if anyone needs it.

I also have a different version of setLanguage because I was having problems with the patch in Mozilla letting me delete characters without typing something first.

The only thing I think it could do with is formatting so that string etc are still highlighted when they goto a new line

I just put up a demo page for our implementation of codepress. Check it out!

http://scaffold.jupiterit.com/html/codepress_demo/index.html

Hi,

I still can't figure out how to submit from the textarea along with the rest of the form. I raised a support request on the sourceforge page but noone's looked at it so.... ... expand and read the rest

This is briefly my current implementation that isn't working.

[CODE]
<form name="edit_template" action="save.php" method="POST">

<textarea id="myCpWindow" name="code" class="codepress php
linenumbers-on">
<?=$code?>
</textarea><br /><br />

<a href="javascript: submitform()">Save Changes</a><br /><br />

</form>

<SCRIPT language="JavaScript">
function submitform()
{
document.edit_template.code.value = myCpWindow.getCode();
document.edit_template.submit();
}
</SCRIPT>
[/CODE]

Any help greatly appreciated

Why loading code only from other textarea? Where is setcode function? I think there should be a function to load code from string.

ASP-VB syntax is allmost done...

take a look @ www.mdk-photo.com/Codepress

need help on some issues...

ASP comments and strings (same problem). in ASP comments are made with a single-quote ' so right now, they are messing up all the text :(

Okies... my ASP highlighter is 'done' except for ASP-Comments which isnt working yet...

I have a rather weird experience with Internet Explorer.
If you place the marker just after the very first line <%@Language="vbscript" codepage="1323"%>_<-- and press enter. the two brackets dissapear: < and >

it only happens in IE. FF works fine though ?

Sorry for spamming...

ASP vbScript is now fully highlighted...(ncluding comments) im continuing on the language snippets, to make this really awesome :) ... expand and read the rest

im hoping for some more language support in the future, maybe some kind of Array indexed Methods and Properties available ?? im having some ideas about this - i know how to code the stuff behind, but the "API" doesn't support advanced snippets yet... ill try implementing something myself unless someone beats me to it :)

for the idea:

Methods[0] = {"Response","Request"...}

Properties["Response"] = {
"Cookies($0) = ",
"Write($0)",
"Expires = $0",
...
}

or something alike... then it would be possible to lookup certain Methods, and after pressing '.' youll get the assosiated Properties - i hope something like NetBeans or Eclipse or Dreamweaver is possible...

I'd like to finish ASP with these language features !

Checkout my console at www.mdk-photo.com/Console it has some nice stuff you may copy: like Tab Completion and CTRL-move and more :)

its okay :) - write my name somewhere :D

i know the Console is bugged, my new key-catcher isn't working as it should. ... expand and read the rest

I've added a bunch of nice ASP vbScript Snippets:

//Conditional
'if','ifelse','case'

//Response
'rw','resc'

//Request
'reqc', 'rq', 'rf'

//FSO
'fso', 'setfo', 'setfi', 'twr', 'tre',

//Server
'mapp',

//Loops
'foreach', 'for', 'do', 'untilrs',

//ADO
'adorec', 'adocon', 'adostr',

//Http Request
'xmlhttp', 'xmldoc'

//Functions
'func', 'sub',

lol... sorry for all my posting, the snippet "engine" isn't working very good (IE6), very often i need to delete and reposition the caret before it recognize the snippet

purhaps another kindof look-behind would work? currently the "engine" is rarther heavy - while a simple while() loop might do better ? - ill try implementing a new way to detect snippets...

update: ive added a few more snippets to the Response object: 'resb','resend' & 'resflu'

getLastWord : function() {
var rangeAndCaret = CodePress.getRangeAndCaret();
words = rangeAndCaret[0].substring(rangeAndCaret[1]-40,rangeAndCaret[1]); ... expand and read the rest
words = words.replace(/[\s\n\r\);\W]/g,'\n').split('\n');
return words[words.length-1].replace(/[\W]/gi,'').toLowerCase();
},

This little update will make a world of a difference !!

SQL:
I've added another flavor to SQL, also added a few highlight words...
... expand and read the rest
ASP:
Strings are now green, while maintaining blue Tag-Attributes

Engine (msie, gecko):
Added the ending-char detector, available at Sourceforge

Not usable, to much bugs. "Copy and Paste" does not work. Sometimes linefeeds are deleted without any reason. Currently this Product is not usable for production environments. Maybe in one or two years.

What's with this guy (Tom)? This project is very usable and on the cusp of being production ready.

/One CSS to rule them all
One RegExp to find them
One Script to bring them all and in the browser bind them/gi ... expand and read the rest

We Really ought to make ONE css-file with all the different styles, then use different tags for elerything.

Then in RegEx find the strings individually instead of inharit upper tags.

OR - make parsers for each language... With parsers, we could also introduce onkeypress indention ! - weee

http://www.kevinroth.com/rte/demo.htm

This Cross Browser Rich WYSIWYG editor has it... copy and paste... after paste, it even style everything up again...

go go gadget 'copy source code'

Hallo Jupiter ITS. The Codebase-Editor is NOT useabe in productive envionments. The tool has to much bugs. We try it and give it up. I am not sure if it is a good idea that to offer clients this product. Codepress is not bad and maybe in future better to use, but for now it is not usabe in real life applications.

Hallo "Copy - Paste": We need a textarea WITH linenumers. Do you have an idea? The "FCK-Editor" (www.fckedior.net) is much better when "http://www.kevinroth.com/rte/demo.htm"

The KevinRoth editor uses a XHTML parser, to finish up the backend source of the editor. im going to find out how on earth they do it...

As far as i know, they use a textarea using designmode... so i guess Codepress should do the same? or at least treat paste events in another fashion... ill try if i can implement the same functionallity...

I've added support for Function Scope and Function highlighting. Functions are also added to the snippet detector:

try writing "function test_2_func(){}" ... expand and read the rest
then write "test_" and press tab

this works for Javascript only (Gecko + MSIE) atm.

Each [Language].js needs to be updated with a 'Functions : []' method, otherwise the whole codepress will fail...

hehe... now the scope thingy also works in ASP

Actually, if you examine the source code, you'll notice that CodePress turns design mode on. :)

to start out, i think codepress is awsome, i do alot of php editing from remote locations. but i am trying to intergrate this with my php file manager, but i cant pass the data to save it. what is the name of the textbox so i can call it in php?

Hey john...

You need to use Javascript to collect the data for saving - Create an Ajax function, that sends the textfile to a php script, that then writes the data to the file. The Ajax could also be used to read files

use the two methods: Codepress.getCode() and Codepress.setCode()

Thanks Martin,
I figured out my own way. it is a little slow but i gets the job doen, i made this function
... expand and read the rest
function submitform()
{
data.toggleEditor();
document.dataform.submit();
}

and made the save button call that then the php can call the regular textbox.

i decided to change the snippet detector a bit (my upgraded function scope one)

if a pre-defined language snippet reacts to "func" and a function named funcTastic() exists, then youll need to write either "fun" or "funct" to trigger the scoped' one where "func" will trigger the snippet

i did this by swapping the two loops within the snippets() function

Your comment