Basically I just got started using plnkr.co.
However every time I try to insert a "}" my HTML section gets crammed together as shown in the picture:
I simply click shift+alt+0 and it gets crammed together.
Anyone used to plnkr who can tell me what's happening here?
EDIT: Seems like there's no way to change this.
Conclusion: The developers behind Plnkr are morons.
Conclusion: The developers behind Plnkr are morons.
There is no they, there is only me and I don't typically think of myself as a moron. If you found yourself on Plunker it is likely because there is a body of people who find it useful and worthwhile, warts and all. If this is the attitude you bring to the community then you may find more fertile ground elsewhere.
Have you considered that SHIFT-ALT-0 might seem like a very unlikely key combination to be used by someone who programs and closes braces quite often? If that is the setup you choose then I'm sorry that I have not considered your particular situation. As runTarm pointed out, SHIFT-ALT-0 is bound to the collapse command by default in the ace editor.
Perhaps a better conclusion would be that configurable keybindings would be a great feature.
The Alt+0 is a default shortcut for fold all in the Ace editor.
Ace editor: Default Keyboard Shortcuts
And Plunker borrow the key-binding from Ace as a default too, so all the html tags are folded.
You could try changing the key-binding option to see if it help, it is under the Editor Options panel, the cog icon on the right
Hope this helps.
Sometimes I've experienced Plunker to be a bit laggy, but overall it could easily be one of my favorite JS online editors (ability to add files!).. except for this curly problem.
I'm using a danish keyboard, and unfortunately the curly braces are located on CTRL+ALT+7: { and CTRL+ALT+ 0: }. This means that whenever I make a }, everything collapses.
I'm using these online editors mostly for testing AngularJS, which means that there's a LOT of {{directives}} everywhere.
Switching between either ACE, EMACS or VIM didn't seem to solve the problem.
Related
I am building some modules to teach intro coding concepts to some of my students
http://jsbin.com/pacaxoza/3/edit
When a user writes their own function, I want the editor which is highlighting each line as it goes to jump to the function when it is called so the user can see that their function is read when they call it. All of this is in the jsbin above (the canvas with animation based on the code is not in the jsbin for clarity reasons).
In Javascript mode Ace Editor surrounds any user defined functions in a span with class'ace_function'. I could not find an easy way to find and store values from user created functions in ace methods so instead I am using JQuery to find each span with the class 'ace_function'. I am using JQuery index to find what lines those functions are on, and then passing that info to ace methods to render.
The issue is if the editor is scrolled to the top, everything works fine, but if you scroll down any in the editor and hit submit, the editor's indexing seems to be off by a couple lines of code and everything breaks down.
Does anyone have suggestions for a better way to approach this problem, or what could be causing the erratic behavior?
Thanks
Ace uses virtual viewport and creates dom elements only for visible lines, so using jquery won't work.
You need to use Ace api instead, session.getLine(number)->string, session.getTokens(number)->[{type, value}, ...].
tokenIterator might be useful as well see https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 for an example
Before I started to try and make this thing, I wanted to know if it is possible, under the following circumstances:
The code to script up that math must be able to be taken, submitted and stored in a database
The code for two pieces of math which look exactly the same must have the exact same code
According to the requirements, wherever the user clicks his or her mouse, the caret must move to that specific element or part of the math
So, is it possible? I'm looking forward to using technologies such as HTML, JavaScript, jQuery, and even Flash as a last resort.
MathQuill lets you type maths in a WYSIWYG fashion, source here.
There is a demo on the homepage.
I think you want something like MathML. Take a look here. http://www.w3.org/Math/
or maybe http://code.google.com/p/mathmleditor/
I found this a while ago http://www.codecogs.com/latex/eqneditor.php pretty useful implementation of LaTeX with a live preview, I've used it a few times. Probably doesn't fit the bill for your point 3 either but just in case it is useful.
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/
by simple I mean, having buttons:
bold,
italic,
numbered list
bullet point list
indent left
indent right
spell check (obviously supported by ready made js component)
by custom I mean: having custom icons - so really just custom design
no frameworks, written from scratch, lightweight, compatible with major browsers
this is one of the main components of the webapp, so it has to be super lightweight, that's why I don't want frameworks
Unless you are targeting one browser, editors are immensely complicated components to get to work cross browser. There's no reason to do it yourself, unless you want to learn.
Use one of the many available that allow customization:
tinymce,
fckeditor,
wysihat,
others
Writing an editor that works cross-platform can be difficult, but, you should create your own framework as you do it, as it is a large project.
If you just want custom icons, that will depend on how long it takes you to make them, but, to get some basic functionality isn't that hard, probably less than 40 hrs of work if you know what you are doing.
In Unix writing your own shell used to be a rite of passage, in javascript it may be writing your own editor. :)
Where it gets tricky is if I have
<b>some text</b><i>more text</i>
and I decide to remove the tags from this text, then how to fix it will get tricky.
If you want to use only css then it gets to be more of a problem as you are grouping text from span tags, and fixing css classes, while the user is continuing to make changes.
I am dealing with this currently as I want an editor that works in XHTML2.0, and it is not a trivial issue, much harder than it is to do in a desktop application.
I would suggest getting it to work on Firefox 3 and Safari first, then, once it is working, go back and add in the code to get it to work on IE8, and if you want IE7, since MS is pushing IE8 out as a critical update now.
Don't.
Go get something else (any of those Jason mentioned, or e.g. what SO itself uses, WMD). Swap out its images. The end.
Seriously you don't want to write your own editor unless you have a very good reason for it functionally, not just what it looks like.
Read through the first chapters of the emacs tutorial, and you will see that there is not anything like a "simple" editor. But google will give you lots of easy customizable editors.
I am aware that Javascript WYSIWYG editors use the inbuilt editor mode of the browser to function, but that comes up with various problems and issues.
Can an editor be built from scratch in JS, something like what Buzzword people have done with flash/flex? I came across this blog post recently and I am just wondering if this can be built (atleast to a moderate extent) using Javascript?
It depends what you mean by "from scratch". Google Docs provides a pretty good text editor in JS. Is that what you mean ?
Of course you can do it and it is not very difficult.
But before reinventing the wheel please take a look at all the existing ones.
Many of them are really very well written and open source.
Almost anything can be done with JavaScript. You have the basic building tools right there - you can intercept all mouse events and nearly all keyboard events. You can use a GIF animation for simulating the caret. The trickier part might be measuring the size of text so that you can position your caret where you need to. I'm not exactly sure how you could do that. But if you figure that out, the rest is doable. Although it will really require tons of wheel-reinventing code.
Reminds me of a little experiment I did sometime back... I basically tried to create a primitive editor by simply listening to keypresses on a DIV and to insert them into the DIV as a new node. So imagine, each character would be wrapped in a tag! It actually worked. But, once it reaches a couple of paragraphs, node insertion and deletion becomes rather slow. You will type a character, and it would only appear after a slight delay, and this simply unacceptable, and eventually I just gave up. Anyway it was just a random thing I wanted to try out..
Coming back to your question, I wonder if this can be replicated in JS alone as frankly the flash has superior raw processing power compared to JS. Even if it's technically feasible, I doubt whether it will be fast enough to actually work well. My two cents!
Atwood's Law:
Any application that can be written in JavaScript, will eventually be
written in JavaScript.