canvas - How do I create a very simple text editor from scratch? -


Say I would like to create a simple text editor. This should not really be anything special, it should be mostly like Notepad. And, say that I want to make it from scratch: For convenience, I have a tool in my possession such as canvas (which works in the browser, I mean). For those who are not familiar with canvas, here's a quick look.

But the technique does not make any difference: The point is, I can put some text on some coordinates, colors and font sets on the screen and align it in the left-center-right in your box and it's the original I can do this with all available tools. The tool does not know how to wrap the word or select text, and as soon as I put text on the screen it becomes a bunch of pixels - there is no way to update the text or to easily remove the last four.

Now, unlike most of you, I've never made a text editor. My questions are:

  1. What are the patterns of every text editor designer faces?
  2. What common problems arise?
  3. What problems should I avoid to solve, because there is a solution that I can either make a port or a copy? (I'm doing canvas, like I said.)

    do the canvas On endeavor, the HTML5 canvas specification gives considerable advice against trying to do it themselves. As the device states:

    The author should avoid using text editing controls using the canvas element. There are a lot of harm to do this:

    • The mouse placement of the carat has to be re-implemented.
    • The keyboard activity of the carat will need to be re-implemented (possibly
    • the scrolling of the text field must be implemented (horizontally for long lines, standing for multi-line input ).
    • Localized features such as copy-paste
    • Basic features like spell-check must be re-implemented.
    • Drag-and-drop like Re-implementing the original features Original features like page-wide text search have to be re-implemented.
    • Repeat the specific basic features for the user, for example custom text services, It is impossible because each user can have different services installed, and there is probably an infinite set of services like this.
    • Bidirectional text editing must be re-implemented .
    • Edit for multilingual text, line wrapping is to be implemented for all relevant languages.
    • Text selection must be re-implemented.
    • Bidirectional text selections have to be re-implemented.
    • Platform-Basic Input Method Editors (IMEs) have to be re-implemented.
    • Undo and redo functionality has to be implemented again.
    • Li>
    • After the accessibility features such as caret or selection, magnification is to be re-implemented.

      Implement these types of things in the canvas nightmare , especially today, where the same font looks different not only of each browser, but Font desertion looks different between the canvas between the font and browser rendering.

      I recommend you see the code for Mozilla Bespine, which was made in canvas. It eventually became Mozilla Skylighter and finally said "Wellp canvas is the wrong tool for this job", left it and merged with Ace, which does not use canvas but uses DIV. If you are really interested in this type of thing, then I recommend that you look at the code for these projects.

      The bottom line is that if you are editing text, then use the DIV and input and other HTML elements (temporarily) attempts to simulate it in the canvas over your canvas Do not You can try anyway, but you have a bad time and also your users.

      As far as the multi-line text on the canvas goes, all you have to do is calculate it at this time. You also have the height of the estimated text.

      In order to actually implement a simple editor, my recommendation is: a canvas, has drawn some text, maybe on some complex figures. When you want to edit the text, a click (multiline) or HTML input element will appear on click event by clicking on this data, enter, or escape, or focus ( blurring event) When the losing box is pressed, make changes.

Comments

Post a Comment