I want to develop a custom javascript html editor. My starting point was:
http://hypertextarea.sourceforge.net/
I understood how the mechanism works but the problem is that I cannot find the point where if I focus the iframe I have the cursor displayed.
Then if I press a key I see the letter entered there. Can you please explain me how this javascript shows the editor cursor and how it write in the iframe the characters that I write?
All javascript used by this editor is at
http://hypertextarea.sourceforge.net/javascript/HyperTextArea.js
It is handled by the function enableDesignMode (line 755), which tries to turn on designMode for the <iframe>.
In other words, this is a browser feature and you can make an HTML page editable with nothing more than a single line of JS (or a single HTML attribute), but the library provides other niceties like the ability to format text and insert tables.
Depending on exactly what you want: onKeyPress and onFocus
Related
I am trying to build a collaborative code editor using node.js. I am able to make contents inside a textarea collaborative (multiple people can edit it simultaneously).
How to turn an existing textarea into a code editor using CodeMirror without replacing the textarea? (if I directly try to make the text area into editor using code mirror it will either replace it or create an editor below it without replacing it)
How do I make the existing text area into code editor?
Actually, this should be somewhat simple. If one builds a synchronous editor, it should be event-based, isn't it in your case?
So you should be able to do 2 things: detect an edit (and send it to others) and programmatically change the content of the edit area once you recieve a message ("another guy has edited"). And that's not difficult to do:
to detect editing, use the change/changes events
to set changes, use content manipulation methods like setValue or replaceRange
Asked before but not really same. You guys said it's impossible to switch specified Color in a textarea. So I have seen some. I would like to make an BBCode editor highlight. Between the "[" and the "]" will be colored in any color, the rest will be normal. I am currently only starting learning javascript. Thanks for coming help!
And what is difference between JQuery and JavaScript?
first javascript is the main scripting language of the web.
And JQuery one of the librairie write in javascript to help developper to code faster and go forward with the language.
you can't do what you want directly in the textarea. For that you will need to add class in css in your text to render it as you want. You will need to externalize your text rendering.
What you will need to do what you want it's :
1- recover the textarea value in javascript (or JQuery it depend if you used it)
2- create a parser for you text that take each [] and apply a specific css class to render the color
3- display it in the dom. in javascript you will need to manipulate the site structure to make appear your text with your color where you want
When analyzing a webpage, I usually open these js files one after another and then read the source code to determine which file added a certain portion of html in the final rendered page. Is there an easy way / tool to solve this problem?
No, there is not a tool to do such a thing. Understanding the code yourself or searching for specific key phrases in the HTML you're trying to source (such as a class name or tag name or piece of text) is the typical method.
It could work to grep for the common ways that the DOM is modified (.innerHTML property, .appendChild(), .insertBefore, etc... if it's plain javascript) or similar methods in whatever library is being used.
Partially, you may use Firebug in Mozilla and, viewing the HTML tab, right click some tags and tick "break on child addition/removal". And then reload the page. Javascript execution will pause at any changing of DOM inside the chosen element.
We have an option of disabling the right click event on the HTML page at same user can click on view menu > source and can get a copy of the content displayed.
How do i make it into unreadable format? Just like when you do a google search and see the source of page very similar to it? How can this be done?
You can't. You can obfuscate the scripting and minify the html (remove all unnecesary whitespace) that's what google does). So, making the readability of the html (by obfuscation, minification) more difficult is the best option (if you must).
You can also go flash ofcourse, like in this website
How do i make it into unreadable format? well you can't change the format, its plaintext, this is how the browser expects AFAIK, when gmail first came out, its source code was sort of hidden, what they did actually is have the entire source of the page rendered using hidden iframes and JS, as such users would right click and get <!DOCTYPE html><html><head></head><body><div></div></body></html> but this is no longer the case.
how does Gmail hide its source
Try to compress the code using this site http://www.textfixer.com/html/compress-html-compression.php
It will remove all the whitespace and compress the code to make it unreadable.
I've learned here, on stack overflow, that what I need is called "flow-chart". I need to allow user to draw in a browser (using his mouse) a flow-chart that would represent a flow of a process or an algorithm. This flow-chart should contain decisions (yes/no diamonds), tasks (rectangles), arrows, labels etc.
Flow-chart editor should be a part of a Form on a web page, should be written in JavaScript and important is, that it must produce a text output (XML?) that will be storable in DB and when this page is opened again, chart will be rendered based on the previously save text.
No other outputs wil be necessary. Essentially, what I need is just a graphical XML editor/creator.
It would be perfect if it worked as same as CkEditor:
http://ckeditor.com/demo
This CkEditor is a JS Html editor that covers a textarea (in a form) and when you write something in this editor, it is (on the background) converted into HTML and written into the textarea. When you send the whole form using a button, the content of textarea can be processed and saved.
I read following thread, but nothing was suitable for my purposes
stackoverflow.com/questions/363592/javascript-library-for-hierarchical-flowchart
Very close to my idea was this project, but it is a Java program that is run outside of browser and output can not be stored in DB.
www.jgraph.com/jgraph.html
Did anyone use something like I just described?
Update 1: This could be what i was loking for. Does anybody know something similar and/or free?
origramy.com/origramy.html
You will find this thread useful. It talks about generating flowchart from BPMN which is in XML.