Menu

A new try: DIV-Editor

2008-02-08
2013-04-24
1 2 3 .. 7 > >> (Page 1 of 7)
  • Martin Daniel Kirk

    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...

     
    • Nobody/Anonymous

      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

       
    • Nobody/Anonymous

      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

       
    • Nobody/Anonymous

      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

       
    • darkrose

      darkrose - 2008-02-09

      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.

       
    • Nobody/Anonymous

      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

       
    • darkrose

      darkrose - 2008-02-09

      charCode won't work in IE or Opera, I don't like deliberately blocking browsers unless I absolutely have to.

      wtf is layout-code?

       
      • Nobody/Anonymous

        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

         
    • Nobody/Anonymous

      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

       
    • Martin Daniel Kirk

      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 !

       
    • Martin Daniel Kirk

      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...

       
      • darkrose

        darkrose - 2008-02-10

        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.

         
    • Martin Daniel Kirk

      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...

       
    • David King

      David King - 2008-02-11

      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

       
    • David King

      David King - 2008-02-11

      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/

       
    • darkrose

      darkrose - 2008-02-11

      ----- 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

       
    • Nobody/Anonymous

      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...

       
    • Nobody/Anonymous

      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.

       
    • David King

      David King - 2008-02-11

      Hey!

      Might be interested, kinda depends on if the project is well planned... Do you have a roadmap or anything to browse over?

       
    • Martin Daniel Kirk

      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)

       
    • Nobody/Anonymous

      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>

       
    • David King

      David King - 2008-02-12

      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!

       
    • Nobody/Anonymous

      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>

       
    • David King

      David King - 2008-02-12

      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!

       
1 2 3 .. 7 > >> (Page 1 of 7)

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.