online collaborative code editing ide - javascript

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

Related

WYSIWYG editor without actually using html input?

I'm making a forum-like website, and really want to implement a WYSIWYG editor if possible because my targeted users are foreign to technical work. Doing something like image upload/display/resize using markups will be too hard for them I suppose.
But after reading here on stackoverflow and trying it out myself, I suppose the WYSIWYG editor I'm using (WYSIHTML5) won't be safe enough for public use.
So come my questions:
Is there any "WYSIWYG editor"-like library that doesn't actually use html markup? Something like stackoverflow's editor (with toolbar and a real time preview box) is acceptable actually.
If there's nothing like that, is there anyway you can think of to implement WYSIWYG editor that can prevent user from doing harm to the server and/or other users? What can I do to ensure that?
If you like StackOverflow's editor and think it will fit your needs, it's called PageDown. You can find the code here.

Is this possible to run html/css or JavaScript in CKEditor?

I am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
Create tabs.
Make each tab title an inline editor (it must be a block element).
Put an inline instance of CKEditor into each single tab contents.
Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.

How to clean up HTML on-paste in my WYSIWYG editor

I have created a WYSIWYG HTML editor and I noticed that when you paste text from Word, it comes in with its source formatting and I don't want it. Is it possible to clean that up when it gets to the editor.
What I need the most is being able to clean-up the text before it get to the editor itself. Something like an "onPaste" thing that can allow me to filter my text when it's pasted (using the command or keyboard shortcut).
HTML Purifier will create standards compliant markup
http://htmlpurifier.org/
Or http://www.w3.org/People/Raggett/tidy/
If those don't help you, I suggest you switch to FCKEditor or tinymce which has this feature built-in.
you could easily set the InsertMode like this
{
InsertMode: "insert_only_text"
}
from the docs

Develop custom Javascript html editor

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

Javascript Flowchart designer in style of CKeditor

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.

Categories