Online WYSIWYG editor using a div [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to create a WYSIWYG editor using a div, just like Google Docs works (as far as I know). I am aware there are other, easier solution for editors, but all have one thing in common: they output terrible HTML thanks to the Javascript execCommand() function. I really need it to output clean HTML (and the same HTML across browsers), so therefore I'm thinking about writing my own editor with a regular div and some Javascript (to record click and keypresses etc.) Before I do that though, I have a couple of questions:
Does the editor I'm looking for (one that outputs the same, clean HTML across browsers) already exist?
Am I mistaken that it is possible to write this?
Thanks a lot!
Edit: I think I should have been clearer on this: I don't consider existing WYSIWYG editors (like TinyMCE or CKEditor) an option, because (and please correct me if I'm wrong) they use the Javascript execCommand() function. This (especially in combination with an iFrame in design mode, which they both use), outputs different, illogical HTML in different browsers. For example: a simple enter in Safari causes it to create a div, instead of adding a <br /> tag or create a new paragraph (<p>). Furthermore: making text bold causes Mozilla to add <span style="font-weight: bold">, Internet Explorer and Opera to add <strong> and Safari to add a <b> tag. Not to mention the tricks some browsers pull by adding their name to tags (Safari I'm looking at you, I don't like <span class="Apple-style-span">). Because there's no way to change all these strange behaviors, it's very hard for me to make the site look consistent.
That's the reason I'm thinking about writing my own alternative: cross-browser compatibility and consistency...

Creating an editor from scratch is a massive undertaking because of the sheer number of browser quirks and bugs with in-browser editing. I've done it several times for various niche projects. My advice would be to start with either TinyMCE or CKEditor as a base and extend them. Both have had unbelievable amounts of development time poured into them over several iterations to get them as good as they are now. Try taking a look at their bug trackers to get an idea of what they have to contend with. Both have decent options for extension, so you could write your own formatting commands to replace document.execCommand() and in both you can add buttons/tools to the toolbar and context menus.
Self-promotion alert: Another option for the future is to use the commands module I'm working on for my Rangy library. It's some way off completion but will initially have replacements for inline formatting commands offered by document.execCommand(), and will allow control of the tags/CSS it produces. Rough early demo here: http://rangy.googlecode.com/svn/branches/1point2/demos/commands.html

Don't do this. There are teams of developers behind high profile WYSIWYG editors, and they already have the workflow built into their development to handle cross browser testing.
Look at
TinyMCE
CKeditor
Dojo Toolkit's Dijit.Editor

http://280slides.com/ built for the canvas tag
Everything is possible if you are stubborn enough.

The two we looked at were:
http://tinymce.moxiecode.com/
and
http://ckeditor.com/
Both did exactly what we wanted but in the end we went with the commercial CKeditor.

Did you already try TinyMCE ?
You have full control over the output via different parameters or existing plugins, also possible to write your own plugin..

Related

Iframes and Deprecated methods in javascript

I am building a classic post related cms on LAMP stack, as a project to show at future interviews and land a job potentially. I want to build a rich text editor. After some research both in r/javascript and stack overflow I drew some conclusions.
Don't use "contentEditable=true" flag because according to one of
CKEditor's devs https://stackoverflow.com/a/11479435/10245890 is not optimal
The general consensus is to use iframe because of the isolation it
provides.
Yes I know I will not build the next CKEditor on my own, it takes
years of far more experienced people than me, I just want to learn
about the Javascript APIs.
Generally I want to use vanilla version of the languages in the
stack in order to get a better understanding of them.
The 'easy' way out to get a simple rich text editor going is to use execCommand but it is obselete. What I came up with goes like this:
function formatBold(){
var selection = document.getSelection().toString();
var originalString = document.getElementById("post-body-editor").innerHTML;
document.getElementById("post-body-editor").focus();
document.getElementById("post-body-editor").innerHTML = originalString.replace(selection, '<b>'+ selection +'</b>');
return;
}
document.addEventListener('keydown', function(event) {
if(event.ctrlKey && event.key === 'b'){
formatBold();
return;
}
return;
});
The function is called with a HTML button or key press. I saw in MDN that there is a method to implement insert Link, format a text with bold etc. Question is. I see some, if not many ,methods flagged as deprecated but they seem to be working. Should I use them or make it work on my own as shown above? I realize its not the most elegant solution but I believe it works fine for my level. Also any articles or other reading material is appreciated ofc.
EDIT:Formatting
If the question is just about using deprecated/obsolete features, the answer is: don't use. Though, I doubt execCommand would never really be removed from the browsers, that would break tons of existing pages ... If you really want to create a WYSIWYG editor, you've to dive deep in the world of DOM. In that world use of innerHTML is exceptional, you would work with Nodes and ShadowRoot etc.
Answered by Teemu in comment above.

Modifying Form Elements in CKEditor

I apologize in advance for the generality of the question. There is a surprising lack of documentation or discussion about this. If someone can point me to some source on this topic it would be much appreciated.
I'm trying to create a CMS page where users can edit custom forms. I'm using CKEditor in a pretty simple HTML/JavaScript setup like the demo on their website http://ckeditor.com/demo#full
My problem is this - Form elements can be resized (and drag-and-dropped) in IE but not in Chrome or FireFox.
If anyone has any information on editing form elements in CKEditor please let me know about it.
Thanks
It's not related to CKEditor but to contenteditable in general, which, quite frankly, is not consistent in terms of implementation because it lacks standarisation. There's nothing you can do about it unless you implement that feature from scratch, which is not a good idea really, especially because I'm not quite sure that default behavior can be disabled.
The form elements resizing feature may be supported by the browser (e.g. IE) not by javascript code. So it's hard to make the feature available in Chrome or FireFox.

Using multiple CodeMirror editors on a single page?

I'm writing a page with examples that demonstrate the use of my js library. I'd like these examples to be editable and runnable, so I thought I have these options :
Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.
Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I'm not sure how "heavy" those editors are, so I'm not sure if that's a good idea.
Have an edit button that "swaps" prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I'm not sure if I can make prettify and CodeMIrror's syntax highlighting to look the same.
Any ideas on how I should do this and why? I'm also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.
You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.
Look at this chapter for an example.

simple html textarea/contenteditable text editor component supporting links, undo, tab-in/outdent for google chrome

im writing a chrome extension and need a simple text editor component so that users can edit simple notes in the extension.
required:
clickable links, but without any sort of modal dialog. its sufficient if any "http://.." substrings can be turned into actual clickable links of any sort (ie. divs styled like links and with onclick handler are fine)
undo/redo functionality
tab indent/outdent of a single line or multiple selected lines simultaneously
seamless switch between editing/displaying, ie. no save buttons or reflowing or the like (counterexample)
dont need any kind of formatting capabilities apart from indenting, just plain text (counterexample)
html/js that works on chrome
i have looked at/tried:
<textarea/>: undo included and tab indent easy to implement, but no way to do links
<div contenteditable="true">: undo broken, tab indent=hell (selections and ranges), but links work fine. also have set white-space: nowrap; to show indent spaces. this is my current solution but its very buggy, maybe ill have to open another question just for this.
tinymce: overkill i guess
markitup: looks good, but since it is a textarea, i figure no links possible
ACE: looks promising, worth a shot? not overkill?
kix-standalone demo doesnt work on chrome (ironically)
any comments or answers very appreciated..
edit: i have used codemirror 1 in my project (Syncpad for Simplenote Chrome extension) and i am quite content with it. CodeMirror provided alot of additional infrastructure for text editing (esp live parsing) which i wouldnt want to miss anymore. Will be updating to codemirror 2 when i have the time
How about CodeMirror? I don't think it will do links, but it's nicely engineered and you may be able to extend it.

firefox plugin inorder to get the data from textbox

my problem is that, i what to develop a firefox plugin that extract data from the textbox and it has to be stored in some temporary memory.
i didn't have any idea about plugin's So please give the solution in a detailed manner
thank u.......!
Try reading the extension documentation, and then asking specific questions about things you still don't understand. It sounds like you are asking someone to write the whole extension for you, which isn't really the purpose of SO.
You could also look for open-source extensions that interact with text fields (like one of the ones that allows editing a text field in an external editor) and see how they work.
Have you seen the "It's all text" plugin? It allows you to edit a textarea in your editor of choice. After saving, the textarea is updated. I'm sure there's some code in that plugin that you could use.
Also, what you're describing sounds really simple. Are you sure a plugin is the right solution? Maybe a Greasemonkey script would be easier.

Categories

Resources