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?