Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Text on Canvas

  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Text on Canvas

    Hi, I have an IFrame. Good. And I have a Canvas as well. Good again!

    The user can write on the IFrame as I set the design mode ON. I am using document.execcomand to do the stuff, just like a simple text editor. I do not have issues on this. Here are my questions:

    1/ What I want is, how to make the text written in the IFrame, appears on the Canvas? I mean, when the user is typing in the IFrame, the text is appearing simultaneously on the Canvas. If the user changes the text color, font color, bold, italic or whatever, of course the text also changes on the Canvas simultaneously. How to do that?

    2/ Can I make all the elements draggable and resizable in the Canvas? I mean the text or anything but NOT the canvas?


    Help!

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    canvas.drawText() ?

    not sure what you want...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    I solved it... The issue is, you cannot save the canvas with its elements as image with dataURL if you drag a DIV or an image on it.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    RND ME, I went on your site, I looked your notepad. I did make a rich text editor... with more features and functionality including both HTML and design view. I am show you a screenshot.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by angelali View Post
    RND ME, I went on your site, I looked your notepad. I did make a rich text editor... with more features and functionality including both HTML and design view. I am show you a screenshot.
    cool. i made that 4 years ago and forgot about it, so i'm not too surprised that you can do better; that's the point of a demo.


    if you want to see a better editor, try danml.com / vapor , although that too is a couple years old at this point. was built for firefox/win, but chrome supports a lot of its features and my right-click menu crapped out on FF some time ago... cest la vie...

    my whole site is a rusted amateurish pile of junk afaic, a few good nuggets excepted. Most of the items on the site are 'weekend projects'; half finished with no incentives to trim out. i will be updating the site with some fresh new code and a whole new layout one day in the next year or so. once i got a real job, i stopped updating it.


    still, since i wrote that stuff while learning, it might be good for others who are learning as well. But, many things have changed in the last 4-5 years, and if i had to write the apps over, i would probably do a better job. well, i sure hope i would do a better job, unless i've somehow gotten worse over the years. a lot of code is the same, and the image editor i wrote for a class project used to work only on FF beta 3, but now works on an ipad; gotta love standards and the companies that implement them.

    anywho, thanks for checking it out, and i'm looking forward to those screen shoots.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Here it is below in the attachment. By the way, do you know how I can make syntax highlighting in a text editor? If I put some html codes in an array, then make something like if these codes in the array are written in the IFrame of the text editor, it adds a color. Will it be good? I wanted line numbers as well.
    Attached Thumbnails Attached Thumbnails Text on Canvas-sss018.jpg  

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by angelali View Post
    Here it is below in the attachment. By the way, do you know how I can make syntax highlighting in a text editor? If I put some html codes in an array, then make something like if these codes in the array are written in the IFrame of the text editor, it adds a color. Will it be good? I wanted line numbers as well.
    your editor looks nice. i don't like the "U" button (underline is bad for user because it looks clickable), but the rest is visually pleasant for having so many controls.

    most HTML WYWIWYG editors use <div> or <p> to create line breaks.
    you can use CSS2.1 generated content, numbering, in a :before psudo-element to display a number in front of those lines. the issue with that is that we often use <pre> or <code> for code, which means all the lines are in one tag, which means css numbering won't work.


    look into codemirror, a syntax-highligted textarea replacement with many options including line numbers.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    I want to make my own line number. And I have not understood clearly on your CSS thing on it... can you elaborate?

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by angelali View Post
    I want to make my own line number. And I have not understood clearly on your CSS thing on it... can you elaborate?
    Code:
    <!DOCTYPE html><html><head>
    	<title>line numbered wysiwyg w/css</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body> 
    
    <style>
     #data div { counter-increment: lines; background:#ccc; margin: 0; }
    
     #data div:before { 	content: counter(lines);  width: 2em; color:#888; 
         padding-right: 3px; font-family: monospace; display: inline-block; text-align: right;
      }
    </style>
    
    <div id=data contentEditable >
    <div>hello world</div>	
    <div>hola mundo</div>	
    </div>
    
      
    </script>
    </body>
    </html>
    tested in chrome.
    Last edited by rnd me; 11-21-2012 at 01:59 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Lol, I just tested it on JsFiddle... This is not appropriate LOL as each time I pres enter, it does not show the next number. Perhaps, something like each time you press enter in the IFrame, it writes the number in the IFrame. This is not easy. I would create an online text editor lol if I now how to do that

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by angelali View Post
    Perhaps, something like each time you press enter in the IFrame, it writes the number in the IFrame.
    that is what i saw when i tested the code.

    when i click between hello and world, and press [ENTER] 1 2 3

    it looks something like this:

    Code:
    1 hello
    2 123
    3 world
    you may have to switch your WYSIWYG to use <P> or <DIV> instead of <BR>, since BR can't be numbered.

    so, this may help:

    Code:
    <style>
     #data div, #data p{ counter-increment: lines; background:#ccc; margin: 0; }
    
      #data p:before ,
     #data div:before { 	content: counter(lines);  width: 2em; color:#888; 
         padding-right: 3px; font-family: monospace; display: inline-block; text-align: right;
      }
    </style>
    as might this:
    Code:
    document.execCommand('insertBrOnReturn', false,  false )

    you should refer to http://dvcs.w3.org/hg/editing/raw-fi...usecss-command
    for how it's "supposed to be"

    again, codemirror has line numbers and colored text. i have not seen a line-numbered WYSIWYG before, it doesn't really make sense.

    the code i posted works on a wysiwyg editor if you stay away from fancy formatting like lists, images, headers, etc. you can still color the text inside a contentEditable to reflect syntax, but you'll need to brush and re-brush it every time you make an update to the text, and it can get polluted in edge cases involving paste, "crossing the streams" of Model and View...

    codemirror does the best job of coloring unformatted text, but even it's not 100% perfect.


    i know this isn't for the WYSIWYG viewer, but in a text editor, i'll sometimes pass a <textarea> this to function see line #s momentarily:



    Code:
    function previewLines(data){
         var orig=data.value, 
             lined=orig.split(/\r?\n/).map(function(a,b){return b+"\t"+a;}).join("\n");
            data.value=lined;
            var oc=data.onclick;
            data.onclick=function(){ data.onclick=oc; data.value=orig; };
    }
    
    // usage example for this page in firebug/F11 tools:
    previewLines(vB_Editor_001_textarea);
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #12
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    hey I viewed it on Chrome now and it works. This is a great example you did earlier with the CSS. But why it does not work on Firefox? Firefox does accept CSS3 ::before syntax.

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    I did not know if CSS has such property.. seriously!

  • #14
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by angelali View Post
    hey I viewed it on Chrome now and it works. This is a great example you did earlier with the CSS. But why it does not work on Firefox? Firefox does accept CSS3 ::before syntax.
    they use <br> instead of divs.

    you can kinda get around this with some regexps, but it's far from perfect:

    Code:
    <!DOCTYPE html><html><head>
    	<title>line numbered wysiwyg w/css</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body> 
    
    <style>
     #data div { counter-increment: lines; background:#ccc; margin: 0; }
     #data div:before { 	content: counter(lines) '  ';  width: 2em; color:#888; text-align: right; padding-right: 3px; font-family: monospace; 
    			display: inline-block;   }
    </style>
    
    <button onclick="fix()">renumber</button>
    
    <section id=data contentEditable tabindex=0>
    <div>hello world</div>	
    <div>hola mundo</div>	
    <div> &nbsp; </div>
    <div> &nbsp; </div>
    <div> &nbsp; </div>
    <div>  &nbsp; </div>
    <div> &nbsp; </div>
    </section>
    
    <script>
    
    function fix(){
      return data.innerHTML= 
        ("<div>"+data.innerHTML.replace(/<br>/g, "&nbsp; </div>\n<div> &nbsp;") )
         .split("</div></div>").join("</div>").split("<div><div>").join("<div>").split("&nbsp;&nbsp;").join("&nbsp;").slice(5)
    }
    
      
    </script>
    </body>
    </html>


    this seems more promising, at the cost of losing list capability (if you care), but i can't work on it any more, i've got stuff to do...


    Code:
    <!DOCTYPE html><html><head>
    	<title>line numbered wysiwyg w/css</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head><body> 
    
    <ol id=data contentEditable  tabindex=0>
    <li>hello world	
    <li>hola mundo	
    </ol>
    
    </body></html>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #15
    Regular Coder
    Join Date
    Sep 2011
    Posts
    319
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Thank you, I wil try to make it. And see what it gives.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •