It looks very promising, Whats browser support like? I had a bit of problem with caret alignment, but im sure thats easily fixed.
Whats the basic principle of how it works? Do you "draw" everything inside the div? I like the line numbers, This was/is a big problem with designMode setup. Id love to know more.
Mikey
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I've just started implementing highlighting, which has completely messed up the backspace/delete/movecursor functions... it works great without highlighting, but it's getting there.
tested only on Firefox so far.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
What i think he means, is try not to change what the users have typed. Only display it differently. So try not to replace TABS with spaces, Try and keep what the user originally typed.
MikeyB
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
You dont need to block different browsers... but you need to handle the key-events properly for each browser... make an if-then-else that registers the different event handlers
Well after a little more work, I've implemented line numbers, with the ability to toggle them on/off, and the highlighting is working better, with an on/off toggle too, and a start at language auto detection, and the framework is there to have a user control for selecting the language as well.
Although I've managed to completely mess up the cursor positioning and text selection with the mouse in the process.
re: keyup/keypress/keydown, a little testing has shown it currently works in Firefox, IE, Opera, and Konqueror. Although it's a little more buggy in the last 2, line breaks disappearing being the main problem, as it is in codepress. So I'm rather hesitant to change something that works, even if it is technically better. Having a single method for key capturing is much simpler than differant functions depending on the browser. Plus there's always a chance that someone will have a browser set to appear as something else, which would mess the whole thing up completely.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi everyone! Just thought I'd show my face and say that I am alive and will be working on CodePress again very soon! Been very busy lately setting up a new company and as such have been swamped! Heh...
------ The DIV idea ------
I think this could make an excellent branch as long as we all work together well! Would it be a good idea to split the project up into different elements of code? Something like:
* "Cursor" movements and modifications (Keyboard and selection)
* Rendering Code
* Line Numbers
Then the final task would be to amalgamate the lot into a stable project!
------ RE: Mikey: Cursor elements ------
Hey Mikey, loving the concept of using CSS to render the caret, decided to have a tinker and I've come up with something a lot more useful. Using clever CSS you can render an animated GIF (I used a single blinking pixel) without breaking the page box-model, also it means that you DONT have to encapsulate every character in a tag, and that you dont have to use a timeout for the blink effect! Tested this code on FF2, IE6, OP9, NN9 and they all rendered fine:
As you can see there's now a nice clean object we could use for manipulation! If were to add in some keyboard controls you can see it would be quite simple to move about!
"Plus there's always a chance that someone will have a browser set to appear as something else, which would mess the whole thing up completely" A lot of JS projects fall into the same trap of relying on Browser detection (CodePress is currently guilty of this), where Object detection is the best route to follow! I would seriously recommend reading this article:
Had a little look at capturing keyboard events across the browser spectrum, there *are* some oddities, but it looks do-able if we want to stick to fairly basic functionality. Caps-Lock is a bit of a bugger, but there are workarounds...
I've created a new section on my dev-site for my coding odd's n sods, the keyboard and caret pages are on there if you want to see them:
----- Browser Compatibility -----
After a bit of messing about I switched over to charCode for firefox, but avoided the whole if/else browser detection nightmare by simply grabbing whichever returned true out of keyCode and charCode:
var char = (e.charCode) ? e.charCode : e.keyCode;
Extra functions and special keys (arrows/delete/insert/etc) are still a problem, at the moment I've got navigator.userAgent detecting Firefox to enable those keys. I think it may be possible to filter out firefox without this though by working with what is available from the events:
document.onkeypress = function(e) {
if (e) {
if (window.event) {
//browser is Opera
}else{
//browser is Firefox
}
}else if (window.event) {
//browser is IE
}
}
This still needs some refining, but it's a start.
----- Cursors -----
My cursor is a span, with an interval set to toggle it's style.visibility, the actual cursor is a pipe (|). The id comes from the original div's id with 'cursor' tacked on the end, this way with multiple editable div's on a page, each cursor should have a unique id. The idea was that if 'insert' was enabled, the cursor's color could be changed to red.
----- Cursor Positioning -----
I got around positioning the cursor with the mouse by setting a lineheight property of 18px, now all that needs to be done is find the mouse position from the top of the editable div and divide by 18 to get the correct line. This gets messed up though when scrolling comes into play, my solution was to make the editable div overflow:visible; and place it in a holder div with overflow:auto; now the line can be found with:
var mLine = Math.floor((((e.clientY + holderDiv.scrollTop) - holderDiv.offsetTop))/18);
Math.floor() rounds the result down, so we have a whole number for the line.
To find the character a few steps were taken, first the text for the editable div was set to font-size:14px; font-family:monospace; using a css generic font family means each character's width is set to 8px, and this shouldn't vary across browsers, which it may if using a proprietary font. The width also stays the same when the text is made bold. Therefore, taking scrolling into account, the correct character position for the cursor can be found with:
var mChar = Math.floor(((e.clientX + holderDiv.scrollLeft) - (holderDiv.offsetLeft + editableDiv.offsetLeft))/8)
The only problem found so far is variations in the width of space characters.
The only thing left to check is that is that the character position isn't longer than the line length, and place the cursor at the end of the line if it is. Also that the line position isn't higher than the number of lines, and place the cursor on the last line if it is.
----- Selecting Text -----
I chose to do this as an extension of the above, cancelling onselectstart, and creating my own selection method as follows:
1. onmousedown, find cursor position and store in variable
2. onmousemove, find the cursor position
2a. find the text between mousedown and mouse move cursor positions
2b. place the 'selected' text inside a span with a background colour
3. onmouseup, get the final start and finish points for the and put the 'select' span in position
The selct span's contents cant then be cut/copied/pasted using the DOM. There's a global variable named 'buffer' where text can be cut to and pasted from.
The biggest problem I have at the moment, is that all function are being applied to all the text, this is slowing things down depending on the size of the file being edited... time to break things up into smaller chunks.
The current working build is at http://sandbox.ltmnet.com/editbox.html
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Its now possible to select text using mouse or keyboard...
the selection is not highlighted... but the start-stop position is recorded...
the selection is cut out an shown...
RE: david-king
>I think this could make an excellent branch as long as we all work together well! >Would it be a good idea to split the project up into different elements of code? >Something like:
>* "Cursor" movements and modifications (Keyboard and selection)
>* Rendering Code
>* Line Numbers
yes... it should be possible... OO-style...
but the functions are so intertwined that its almost impossible to delegate jobs... (i think)
if someone is up for a challenge i have 2 jobs:
1. Word Wrap... almost done...
2. Maximum width of editor (overflow) - some solution needed... either move the window, or use real overflow to make the editor wider...
When everything is working smooth (other then those 2 jobs) ill make Intellisense and stuff like that...
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hello david, Had a bit of a play with your code. Ive joined your two examples into this. You can type, and use the arrow keys to move the cursor, and the delete key works too. I think it works well, Keep up the good work.
MikeyB
---- ----
<style>
div {font-family: monospace;}
span.caret_single {background: top right url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-y; padding: 0 1px 0 0; margin: 0 -1px 0 0; overflow: hidden; height: 1em;}
span.caret_multi {background: bottom left url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-x; height: inherit;}
</style>
<script>
document.onkeydown = doKeyDown;
function doKeyDown(e) {
if (!e) var e = window.event; // The event:
if (e.keyCode) cd = e.keyCode; // Whats the code?
else if (e.which) cd = e.which;
// Ignore modifiers being pressed
if ((cd == 16) || (cd == 17) || (cd == 20)) return;
// Write out the Modifiers in action:
if (e.shiftKey) { cd = "shift + " + cd; } else if (e.modifiers & 4) { cd = "shift + " + cd; }
if (e.ctrlKey) { cd = "ctrl + " + cd; } else if (e.modifiers & 2) { cd = "ctrl + " + cd; }
var txt = document.getElementById('txt').innerHTML;
var pos = txt.indexOf('<span id="caret" class="caret_single"></span>');
txt = txt.replace(/<span id="caret".*?><\/span>/g,'');
if ((cd >= 37) && (cd <= 40)) {
if ((cd == 37) && (pos > 0)) pos--;
if ((cd == 39) && (pos < txt.length)) pos++;
cd = cd + '+' + pos;
txt = txt.substr(0, pos) + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
} else if (cd == 8) {
txt = txt.substr(0, pos-1) + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
} else {
var character = String.fromCharCode(cd);
txt = txt.substr(0, pos) + character + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
}
document.getElementById('txt').innerHTML = txt;
}
</script>
<div id="txt">Hello<span id="caret" class="caret_single"></span></div>
<div id="output"></div>
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
But I have to heed a warning to all those diving headlong into this possible DIV branch, while it is exciting to have a go at some of the "cool" stuff like intellisense and so forth, you might find yourself short of a solid backbone IF it is not possible to do the absolute basics!
What I consider the basics (feel free to argue or disagree) is simple text-area functionality; selecting, overwriting, caps-lock, shift and arrow controls... If they fail then it might render your work useless!
Oooh, I've just had a mad idea... Back in a tick!
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I completely agree, I personally feel that its not the way to go. Atleast, the work needed to make it what I need, is too great. But i guess you can say that about any project that is low level (as u said, the basics "move cursor" etc have to be coded). I would rather look over the problems with the Iframe/designmode method and fully exhaust all possible solutions to the problems.
But anyway, I love to code. Heres a bit more (can move the cursor up and down a line). The second you start to think about line numbers, highlighting, etc, it will all break =] Here it is if it can help:
MikeyB
---- ----
<style>
div {font-family: monospace;}
span.caret_single {background: top right url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-y; padding: 0 1px 0 0; margin: 0 -1px 0 0; overflow: hidden; height: 1em;}
span.caret_multi {background: bottom left url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-x; height: inherit;}
</style>
<script>
document.onkeydown = doKeyDown;
function linebegin(str, x) {
var tmp = str.lastIndexOf("<br>", x);
if (tmp != -1) return tmp + 3;
return -1;
}
function linewidth(str, row) {
//todo
return 1000;
}
function doKeyDown(e) {
if (!e) var e = window.event; // The event:
if (e.keyCode) cd = e.keyCode; // Whats the code?
else if (e.which) cd = e.which;
// Ignore modifiers being pressed
if ((cd == 16) || (cd == 17) || (cd == 20)) return;
// Write out the Modifiers in action:
if (e.shiftKey) { cd = "shift + " + cd; } else if (e.modifiers & 4) { cd = "shift + " + cd; }
if (e.ctrlKey) { cd = "ctrl + " + cd; } else if (e.modifiers & 2) { cd = "ctrl + " + cd; }
var txt = document.getElementById('txt').innerHTML;
var pos = txt.indexOf('<span id="caret" class="caret_single"></span>');
var row = txt.substr(0, pos).split("<br>").length;
var lineb = linebegin(txt, pos);
var col = pos - lineb;
Many of those troubles we are facing with Codepress could essentially be solved, by doing everything our selves...
http://www.mdk-photo.com/editor/
im using a DIV - everything is possible...
and when done optimizing, it should be pretty fast...
Hello Montago,
It looks very promising, Whats browser support like? I had a bit of problem with caret alignment, but im sure thats easily fixed.
Whats the basic principle of how it works? Do you "draw" everything inside the div? I like the line numbers, This was/is a big problem with designMode setup. Id love to know more.
Mikey
Continued...
Perhaps using the "em" scale for these lines would work better?
byid("curser").style.top = (row*18) + "px";
byid("curser").style.left = (col*10) + "px";
e.g.
byid("curser").style.top = row + "em";
byid("curser").style.left = col + "em";
Should allow for font size changing without much code change. Untested tho.
MikeyB
Hello again, Found this, thought it might help
http://www.webreference.com/programming/javascript/gr/column11/
Mikey
Currently its made for Firefox (events and everything)
i draw everything in a DIV, yes...
i use a "window" to show each section of the text... the text is stored in an Array of lines
im working on wrapping the text - pretty hard, also to make it possible to use mouse to set curser.
selecting text with shift+arrows might be tough... though i've done it before : www.mdk-photo.com/Console
there are much stuff to be done on this editor untill its useable - however it will be able to completely eliminate textarea/iframe
I'm doing something similar, which I've tentatively called editBox.
http://sandbox.ltmnet.com/editbox.html
I've just started implementing highlighting, which has completely messed up the backspace/delete/movecursor functions... it works great without highlighting, but it's getting there.
tested only on Firefox so far.
Argh..
U need to chance font-type, size and change from KeyCode to charCode... and thus also the events...
for Firefox, keypress is enough...
be carefull of not changing the source-code... only the layout-code
charCode won't work in IE or Opera, I don't like deliberately blocking browsers unless I absolutely have to.
wtf is layout-code?
What i think he means, is try not to change what the users have typed. Only display it differently. So try not to replace TABS with spaces, Try and keep what the user originally typed.
MikeyB
Heres a better Cursor, Doesn't require an extra layer as its done in the editor. Give it ago, see if it can help.
<style>
.blinkon {
border-right: 1px solid black;
}
div span {
border-right: 1px solid transparent;
}
</style>
<script language="javascript">
var x = 0;
function blink() {
document.getElementById("current" + x).className = ((document.getElementById("current" + x).className == "blinkon") ? "" : "blinkon") ;
if (document.getElementById("current" + x).className == "") x++;
if (x > 4) x = 0;
setTimeout("blink()", 800);
}
setTimeout("blink()", 800);
</script>
<div>
<span id="current0">H</span><span id="current1">e</span><span id="current2">l</span><span id="current3">l</span><span id="current4">o</span></div>
MikeyB
hehe... That's an insane way to make a curser !!
when you have like 2000 chars on the editor, you have 20 times more chars for meta-code (<span id="current0">) + (</span>)
also - this would make it nearly impossible to syntax highlight !
RE: darkrose0510
You dont need to block different browsers... but you need to handle the key-events properly for each browser... make an if-then-else that registers the different event handlers
if(...)
Firefox : Keypress
else if(...)
IE : Keypress + Keyup
else
...
etc...
Well after a little more work, I've implemented line numbers, with the ability to toggle them on/off, and the highlighting is working better, with an on/off toggle too, and a start at language auto detection, and the framework is there to have a user control for selecting the language as well.
Although I've managed to completely mess up the cursor positioning and text selection with the mouse in the process.
re: keyup/keypress/keydown, a little testing has shown it currently works in Firefox, IE, Opera, and Konqueror. Although it's a little more buggy in the last 2, line breaks disappearing being the main problem, as it is in codepress. So I'm rather hesitant to change something that works, even if it is technically better. Having a single method for key capturing is much simpler than differant functions depending on the browser. Plus there's always a chance that someone will have a browser set to appear as something else, which would mess the whole thing up completely.
I've worked further with the editor...
'tab lines/index' are visible
fixed some issues with boundaries
added the ability to define size of editor upon initialization (cols, rows, wrap)
continuing issues with Wrapping text
continuing issues with line-length (overflow)
I don't know what to do about selecting text, and copy-paste...
Hi everyone! Just thought I'd show my face and say that I am alive and will be working on CodePress again very soon! Been very busy lately setting up a new company and as such have been swamped! Heh...
------ The DIV idea ------
I think this could make an excellent branch as long as we all work together well! Would it be a good idea to split the project up into different elements of code? Something like:
* "Cursor" movements and modifications (Keyboard and selection)
* Rendering Code
* Line Numbers
Then the final task would be to amalgamate the lot into a stable project!
------ RE: Mikey: Cursor elements ------
Hey Mikey, loving the concept of using CSS to render the caret, decided to have a tinker and I've come up with something a lot more useful. Using clever CSS you can render an animated GIF (I used a single blinking pixel) without breaking the page box-model, also it means that you DONT have to encapsulate every character in a tag, and that you dont have to use a timeout for the blink effect! Tested this code on FF2, IE6, OP9, NN9 and they all rendered fine:
<style>
* {font-family: monospace;}
span.caret_single {background: top right url('blink.gif') repeat-y; padding: 0 1px 0 0; margin: 0 -1px 0 0; overflow: hidden; height: 1em;}
span.caret_multi {background: bottom left url('blink.gif') repeat-x; height: inherit;}
</style>
<div>
Hel<span id="caret" class="caret_single"></span>lo
</div>
<div>
H<span id="caret" class="caret_multi">ell</span>o
</div>
As you can see there's now a nice clean object we could use for manipulation! If were to add in some keyboard controls you can see it would be quite simple to move about!
------ RE: darkrose0510: Browser compatibility ------
"Plus there's always a chance that someone will have a browser set to appear as something else, which would mess the whole thing up completely" A lot of JS projects fall into the same trap of relying on Browser detection (CodePress is currently guilty of this), where Object detection is the best route to follow! I would seriously recommend reading this article:
http://www.quirksmode.org/js/support.html
Had a little look at capturing keyboard events across the browser spectrum, there *are* some oddities, but it looks do-able if we want to stick to fairly basic functionality. Caps-Lock is a bit of a bugger, but there are workarounds...
I've created a new section on my dev-site for my coding odd's n sods, the keyboard and caret pages are on there if you want to see them:
http://dev.oopstudios.com/cogpress/div_branch_tests/
----- Browser Compatibility -----
After a bit of messing about I switched over to charCode for firefox, but avoided the whole if/else browser detection nightmare by simply grabbing whichever returned true out of keyCode and charCode:
var char = (e.charCode) ? e.charCode : e.keyCode;
Extra functions and special keys (arrows/delete/insert/etc) are still a problem, at the moment I've got navigator.userAgent detecting Firefox to enable those keys. I think it may be possible to filter out firefox without this though by working with what is available from the events:
document.onkeypress = function(e) {
if (e) {
if (window.event) {
//browser is Opera
}else{
//browser is Firefox
}
}else if (window.event) {
//browser is IE
}
}
This still needs some refining, but it's a start.
----- Cursors -----
My cursor is a span, with an interval set to toggle it's style.visibility, the actual cursor is a pipe (|). The id comes from the original div's id with 'cursor' tacked on the end, this way with multiple editable div's on a page, each cursor should have a unique id. The idea was that if 'insert' was enabled, the cursor's color could be changed to red.
----- Cursor Positioning -----
I got around positioning the cursor with the mouse by setting a lineheight property of 18px, now all that needs to be done is find the mouse position from the top of the editable div and divide by 18 to get the correct line. This gets messed up though when scrolling comes into play, my solution was to make the editable div overflow:visible; and place it in a holder div with overflow:auto; now the line can be found with:
var mLine = Math.floor((((e.clientY + holderDiv.scrollTop) - holderDiv.offsetTop))/18);
Math.floor() rounds the result down, so we have a whole number for the line.
To find the character a few steps were taken, first the text for the editable div was set to font-size:14px; font-family:monospace; using a css generic font family means each character's width is set to 8px, and this shouldn't vary across browsers, which it may if using a proprietary font. The width also stays the same when the text is made bold. Therefore, taking scrolling into account, the correct character position for the cursor can be found with:
var mChar = Math.floor(((e.clientX + holderDiv.scrollLeft) - (holderDiv.offsetLeft + editableDiv.offsetLeft))/8)
The only problem found so far is variations in the width of space characters.
The only thing left to check is that is that the character position isn't longer than the line length, and place the cursor at the end of the line if it is. Also that the line position isn't higher than the number of lines, and place the cursor on the last line if it is.
----- Selecting Text -----
I chose to do this as an extension of the above, cancelling onselectstart, and creating my own selection method as follows:
1. onmousedown, find cursor position and store in variable
2. onmousemove, find the cursor position
2a. find the text between mousedown and mouse move cursor positions
2b. place the 'selected' text inside a span with a background colour
3. onmouseup, get the final start and finish points for the and put the 'select' span in position
The selct span's contents cant then be cut/copied/pasted using the DOM. There's a global variable named 'buffer' where text can be cut to and pasted from.
The biggest problem I have at the moment, is that all function are being applied to all the text, this is slowing things down depending on the size of the file being edited... time to break things up into smaller chunks.
The current working build is at http://sandbox.ltmnet.com/editbox.html
Its now possible to select text using mouse or keyboard...
the selection is not highlighted... but the start-stop position is recorded...
the selection is cut out an shown...
RE: david-king
>I think this could make an excellent branch as long as we all work together well! >Would it be a good idea to split the project up into different elements of code? >Something like:
>* "Cursor" movements and modifications (Keyboard and selection)
>* Rendering Code
>* Line Numbers
yes... it should be possible... OO-style...
but the functions are so intertwined that its almost impossible to delegate jobs... (i think)
if someone is up for a challenge i have 2 jobs:
1. Word Wrap... almost done...
2. Maximum width of editor (overflow) - some solution needed... either move the window, or use real overflow to make the editor wider...
When everything is working smooth (other then those 2 jobs) ill make Intellisense and stuff like that...
BTW...
I have the project in a Source Safe database... and might be able to grant access over the internet for people who want to join my DIV-Editor project.
Send a mail if you are interested.
Hey!
Might be interested, kinda depends on if the project is well planned... Do you have a roadmap or anything to browse over?
oohh shoot... i forgot to login...
its ofcause me, who's posting :)
here's the current progress : http://mdk-photo.com/Editor
currently the project is somewhat unplanned... im creating stuff ad-hoc.
Job 3 : find some genious way to style selected text - without destroying syntax highlighting.
I have some really good ideas of how to:
- create intellisense
- using ajax to import external resources for intellisense
- other nice stuff...
Maybe i should do some documentation of how to do it... or just do it :D
I'll see what i can do about giving you an account for SourceSafe (VS-08)
Hello david, Had a bit of a play with your code. Ive joined your two examples into this. You can type, and use the arrow keys to move the cursor, and the delete key works too. I think it works well, Keep up the good work.
MikeyB
---- ----
<style>
div {font-family: monospace;}
span.caret_single {background: top right url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-y; padding: 0 1px 0 0; margin: 0 -1px 0 0; overflow: hidden; height: 1em;}
span.caret_multi {background: bottom left url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-x; height: inherit;}
</style>
<script>
document.onkeydown = doKeyDown;
function doKeyDown(e) {
if (!e) var e = window.event; // The event:
if (e.keyCode) cd = e.keyCode; // Whats the code?
else if (e.which) cd = e.which;
// Ignore modifiers being pressed
if ((cd == 16) || (cd == 17) || (cd == 20)) return;
// Write out the Modifiers in action:
if (e.shiftKey) { cd = "shift + " + cd; } else if (e.modifiers & 4) { cd = "shift + " + cd; }
if (e.ctrlKey) { cd = "ctrl + " + cd; } else if (e.modifiers & 2) { cd = "ctrl + " + cd; }
var txt = document.getElementById('txt').innerHTML;
var pos = txt.indexOf('<span id="caret" class="caret_single"></span>');
txt = txt.replace(/<span id="caret".*?><\/span>/g,'');
if ((cd >= 37) && (cd <= 40)) {
if ((cd == 37) && (pos > 0)) pos--;
if ((cd == 39) && (pos < txt.length)) pos++;
cd = cd + '+' + pos;
txt = txt.substr(0, pos) + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
} else if (cd == 8) {
txt = txt.substr(0, pos-1) + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
} else {
var character = String.fromCharCode(cd);
txt = txt.substr(0, pos) + character + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
}
document.getElementById('txt').innerHTML = txt;
}
</script>
<div id="txt">Hello<span id="caret" class="caret_single"></span></div>
<div id="output"></div>
MikeyB!
Looking pretty swift I must say!
But I have to heed a warning to all those diving headlong into this possible DIV branch, while it is exciting to have a go at some of the "cool" stuff like intellisense and so forth, you might find yourself short of a solid backbone IF it is not possible to do the absolute basics!
What I consider the basics (feel free to argue or disagree) is simple text-area functionality; selecting, overwriting, caps-lock, shift and arrow controls... If they fail then it might render your work useless!
Oooh, I've just had a mad idea... Back in a tick!
Hello david,
I completely agree, I personally feel that its not the way to go. Atleast, the work needed to make it what I need, is too great. But i guess you can say that about any project that is low level (as u said, the basics "move cursor" etc have to be coded). I would rather look over the problems with the Iframe/designmode method and fully exhaust all possible solutions to the problems.
But anyway, I love to code. Heres a bit more (can move the cursor up and down a line). The second you start to think about line numbers, highlighting, etc, it will all break =] Here it is if it can help:
MikeyB
---- ----
<style>
div {font-family: monospace;}
span.caret_single {background: top right url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-y; padding: 0 1px 0 0; margin: 0 -1px 0 0; overflow: hidden; height: 1em;}
span.caret_multi {background: bottom left url('http://dev.oopstudios.com/cogpress/div_branch_tests/blink.gif') repeat-x; height: inherit;}
</style>
<script>
document.onkeydown = doKeyDown;
function linebegin(str, x) {
var tmp = str.lastIndexOf("<br>", x);
if (tmp != -1) return tmp + 3;
return -1;
}
function linewidth(str, row) {
//todo
return 1000;
}
function doKeyDown(e) {
if (!e) var e = window.event; // The event:
if (e.keyCode) cd = e.keyCode; // Whats the code?
else if (e.which) cd = e.which;
// Ignore modifiers being pressed
if ((cd == 16) || (cd == 17) || (cd == 20)) return;
// Write out the Modifiers in action:
if (e.shiftKey) { cd = "shift + " + cd; } else if (e.modifiers & 4) { cd = "shift + " + cd; }
if (e.ctrlKey) { cd = "ctrl + " + cd; } else if (e.modifiers & 2) { cd = "ctrl + " + cd; }
var txt = document.getElementById('txt').innerHTML;
var pos = txt.indexOf('<span id="caret" class="caret_single"></span>');
var row = txt.substr(0, pos).split("<br>").length;
var lineb = linebegin(txt, pos);
var col = pos - lineb;
txt = txt.replace(/<span id="caret".*?><\/span>/g,'');
if ((cd >= 37) && (cd <= 40)) {
if ((cd == 37) && (pos > 0)) pos--;
if ((cd == 39) && (pos < txt.length)) pos++;
if (cd == 38) { pos = linebegin(txt, lineb - 4); pos += Math.min(col, linewidth(txt, txt.substr(0, pos).split("<br>").length)); }
if (cd == 40) { pos = txt.indexOf("<br>", pos) + 3; pos += Math.min(col, linewidth(txt, txt.substr(0, pos).split("<br>").length)); }
cd = cd + '+' + pos;
txt = txt.substr(0, pos) + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
} else if (cd == 8) {
txt = txt.substr(0, pos-1) + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
} else {
var character = String.fromCharCode(cd);
txt = txt.substr(0, pos) + character + '<span id="caret" class="caret_single"></span>' + txt.substr(pos);
}
document.getElementById('txt').innerHTML = txt;
var pos = txt.indexOf('<span id="caret" class="caret_single"></span>');
var row = txt.substr(0, pos).split("<br>").length;
var lineb = linebegin(txt, pos);
var col = pos - lineb;
document.getElementById('output').innerHTML = row + ':' + col;
}
</script>
<div id="txt">testing<br>Hello<br>te<span id="caret" class="caret_single"></span>sting<br>testing2</div>
<div id="output"></div>
Bada-f*ing-bing;
http://dev.oopstudios.com/cogpress/div_branch_tests/2_textarea_idea.htm
Now there's a rabbit out of the hat!