I am developing a code editor with syntax highlighting and detecting; I am following current architecture for it;
a) Have a text area with z index at 10
b) Have div's above text area with z index 40 which mask contents typed with custom colors needed for syntax highlighting
Can some one suggest me better architectural approaches for building a custom code editor with syntax highlighting and detecting
Have you checked out AceEditor?
Not sure exactly why you would want to start working on a new editor, which will probably take a lot of time to develop and not use what's already out there, functional, fully tested and with a big and vibrant community around it.
Related
I am working on an nw.js app that uses a rich text editor. I would like to implement as-you-type spell checking using the typo.js api[1]. Unfortunately this api ships with no UI and it is up to the developer to implement one.
I will mention that while the Chromium built-in spell checker is now available in nw.js, I would prefer not to use that for reasons I won't go into now.
The editor is a contenteditable div element and currently what I have worked up for spell checking is iterating through the text nodes of the contenteditable element using treeWalker, parsing out word strings, and spell checking them. It is convienent once I have identified the nodes and the offsets of the misspelled words to get the geometric position of the words using range.getBoundingClientRect, in order to know where to place decoration (eg "squiggly underlines" or what have you.)
The challenge in this is how to make the UI responsive something of the caliber of spell checkers which are probably written in lower lever languages. I have tried:
1) Creating fixed position divs appearing as underlines and appending them to document.body, and using left/top to position them correctly.
2) Splitting out text nodes of the misspelled words and making them a child of a styled span which is inserted in their place.
1 has the problem of finding a natural (and not too kludgy) way of getting the decoration to follow changes in the positions of the misspelled words, such as when inserting text before a misspelled word, scrolling, or resizing.
2 takes care of this problem, however I would rather not mess with the DOM of the editor. For one thing, this can often be picked up when copying and pasting into another app.
I am hoping there is some other means of which I am unfamiliar in how to go about this task. Any and all suggestions would be appreciated.
[1]https://github.com/cfinke/Typo.js/
i need to implement simple text editor with custom (probably dynamic) rules. For example, if user change text somehow i want to run regex (or callback method or something else) on this text and apply formatting for it. For ex all ip addresses in text should have red color, names from specified range - black, all words starting from "abc" - green.
So basically what i need is:
- simple text editor based on text area
- ability so add rules applying to text withing text area
I reviewed a lot of related resources and didn't found any simple solution yet. As for now I've started to implement my own editor with using of contenteditable attribute and JQuery.
I never wrote such functionality before, so could you please point me to the right direction? Maybe i can use already implemented tools or specific strategy?
Thanks a lot.
Maybe it would be useful for someone.
After a bit of investigation at first i tried to use jQuery Highlight Plugin, but it does not cover my all of needs so i used Codemirror editor, which i found very nice and customizable.
I wrote my custom mode and it's working perfectly.
As start point i used this article
I'm looking for a way to draw multi-line text on a canvas element directly without using HTML/DOM. Best case scenario would be to find a JavaScript library, but my Googling attempts didn't come up with anything.
Ideally it would have the following functionality:
Ability to set paragraph styles: First-line indent, line spacing, etc.
Fast and robust implementation of text-wrapping algorithms with alignment/justification options
Rich text formatting via some simplified subset of HTML or Markdown etc.
I'm hoping to find a solution that's a bit more advanced than this tutorial and this answer which just deal with basic word/line wrapping.
Does anyone know of any possible solution? It may seem like it's a crazy thing to do, but think I have a fairly good justification! I'm evaluating Ejecta as a possible iOS environment to make a cross-platform game that has a reliance on text with beautiful typography, so HTML and DOM isn't available. (We make primarily text-based games)
As #kangax already pointed: fabric.js support multiline text rendering well as font family, text-alignment, text-decoration, text stroke, etc. There's no automatic wrapping built-in but you should be able to extend fabric.Text class and work from there.
Go to http://fabricjs.com/ for more details.
Canvas has minimal text support as you have discovered.
To get rich-text capabilities, look at the source code for TinyMCE.
TinyMCE is an open-source, widely used javascript based text editor that is under active development. It has excellent features and it's wide use and active development make for largely debugged and feature rich code.
You can start with this framework and pull the pieces that you need for use in canvas.
The project is available here: https://github.com/tinymce/tinymce
I am working on a WYSIWYG editor. As it has to include just some basic functions I want to do it myself and avoid problems. Now it is working perfectly but I want to add a functionality in order to unbold, unitalic...
I know that with execCommand it is an automatic thing, but it does not work in the same way in all browsers so... my idea was the next: When pressing BOLD button, check the environment of the string, and...
If the selection is Between the open and close <b> tags, like <b>ab||selected||cd</b> replace selected with </b>selected<b>.
If the selection starts or finishes with the <b> tag, like <b>ab||selected||</b> replace it by </b>selected<b> (and then strip out all <b></b> groups.)
If the selection starts and finishes with the <b> tag, like <b>||selected||</b> replace it by </b>selected<b> (and then strip out all <b></b> groups.)
But... how can I get into a var the <b>content</b> string when just having the caret/selection IN content? It might be possible...
UPDATE
It is curious that the replacement is always the same. So, should I really get what I am asking for, or just replace it in this way, always?
I am working on a WYSIWYG editor. As it has to include just some basic
functions I want to do it myself and avoid problems. Now it is working
perfectly but I want to add a functionality in order to unbold,
unitalic...
Do not write your own WYSIWYG editor.
Do you really want to "avoid problems"? Then use one of existing good editors (there're only 2... maybe 3 in fact). Creating editor is extremely hard task for which you need a lot of time (I mean... few years), a lot of knowledge and patience (a lot of too :P).
I can myself write that "I am working on a WYSIWYG editor". For more than half of the year I'm a core developer of one of these "good editors". And during this period I implemented only one feature - very important and very complex, but one of tens/hundreds of them.
That problem you have... I don't even want to start answering. It sounds like a piece of cake, but it isn't. It's a piece of brick that can kill you when fall on your head :). I'll only start enumerating important parts of the impl: Selection + range implementations, because native differ and are buggy (~5k LOC + min Nk LOC for tests). Then you need the proper styles handling (applying and removing) impl (min 1k LOC + tests), because you have to take care about styles spanning on many blocks (like entire table bolded) and different selections containing parts or entire styles etc. And you have to avoid native execCommand, because they will break your content. Then you should also think about updating toolbar buttons states and, to make your impl bullet proof, handling different style tags (e.g. pasted). And that's only the tip of an iceberg - you'll have styles handling, but hundreds of other things broken. Things that big editors have fixed.
Anyway - learn config options for one of main editors and customize it as you want. This will take you a few hours, not a few years.
I want to know how to make a text area in a browser into a programmers text editor.
For anyone that uses textmate -- I basically want it web-based.
for anyone that uses notepad++ -- same idea as above.
I know how to make a text area
using html.
what I dont know is how to tag the text areas.
for instance. in notepad++ and textmade, I can insert the <> tags and it will highlight the text blue.
How can I achieve this, live, in a browser.
I already know how to parse it after the text has been posted.
I want it to be parsed while the user is typing it.
EditArea is pretty good.
In addition to EditArea there's CodeMirror and Mozilla's Bespin
EDIT: I misunderstood the question a little. Jump to ORIGINAL ANSWER if you are curious.
EDIT2: My answer is how to provide SYNTAX HIGHLIGHTING (what is specified in the question itself). Highlighting individual characters unrelated to the syntax requires trivial javascript. This is also distinct from 'auto format' which is commonly interpreted to mean 'adjust my indent levels so it all looks good'.
This is a difficult task, but not as impossible as it seems. Once again, TextMate comes to our rescue but in a different fashion.
In TextMate, open the bundle editor and look at the language definition for HTML. Those are regexes that process the document and assign a 'scope' to each piece.
'Simply' parse that language definition format into the various components, and then use the regexes themselves like TextMate does to assign a scope/color. Piece of cake, right? :)
I would personally start with the most lightweight open source rich text editor you can find, then hack it into that. Or ya know, whatever floats your boat.
I hope that gave you some good ideas.
ORIGINAL ANSWER:
For Firefox, you can install the plugin 'It's All Text' from here:
https://addons.mozilla.org/en-US/firefox/addon/4125/
It works for me with 3.6.12. Set the path in preferences to TextMate (or whatever), and optionally set a hotkey or adjust the other settings to your liking. Be default, when your cursor is over a Textarea, a small button saying "Edit" will appear and open the contents of the Textarea in your editor. Saving will put the data back into the Textarea.
I hope this helps.
JSMinNpp plugin just for javascript auto-formatting
http://sourceforge.net/projects/jsminnpp/