Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
This question should serve as a listing of all the different content-editable solutions. Post new ones in the answers below.
This is a community wiki answer. You can edit me with your improvements. Alphabetically sorted.
Inline
Inline editors differ from normal editors as they can edit the content directly, i.e. not placing it inside another element, or inside an iframe.
Aloha Editor inactive since May 2016
CKEditor - starting from CKEditor 4 Beta
Etch
FresherEditor inactive since November 2012
Hallo
HTML5 Edit inactive since July 2011
Mercury inactive since December 2013
NicEdit
Quill - starting from v0.19
RedactorJS
TinyMCE when used with Inline mode
wysiwyg.js
medium.js (library independent)
ContentTools (Library independent)
Froala WYSIWYG (jQuery)
Trix
Trumbowyg (jQuery)
editable.js
wysihtml
Iframes
Iframe editors often load the editor or content to edit into an iframe, to avoid styling conflicts.
bootstrap-wysihtml5
CKEditor
Mercury inactive since December 2013
TinyMCE
WYSIHTML5 inactive since December 2014
Javascript contenteditable WYSIWYG editors list
Lightweight versions
PunyMCE, from the authors of TinyMCE http://github.com/spocke/punymce
NicEdit http://nicedit.com/
WysiHat (Prototype) http://github.com/37signals/wysihat/
widgEditor http://code.google.com/p/widgeditor/
WYMeditor (jQuery) http://www.wymeditor.org/
jWYSIWYG (jQuery) http://code.google.com/p/jwysiwyg/
ggEdit (MooTools) http://code.google.com/p/ggedit/
YUI Rich Text Editor – SimpleEditor (YUI) http://developer.yahoo.com/yui/editor/
uEditor (jQuery) http://www.upian.com/upiansource/ueditor/en/
Loki http://code.google.com/p/loki-editor/
MooRTE (MooTools) http://github.com/siteroller/moorte/
WMD – Markdown Editor http://wmd-editor.com/
goog.editor (Closure Library) http://code.google.com/p/closure-library/
(demo) lwrte (jQuery) http://lwrte.googlecode.com/
wkrte (jQuery) http://wkrte.googlecode.com/
jHtmlArea (jQuery) http://jhtmlarea.codeplex.com/
TinyEditor (jQuery) http://www.leigeber.com/2010/02/javascript-wysiwyg-editor/
dijit.Editor (Dojo) http://www.dojotoolkit.org/reference-guide/dijit/Editor.html
CLEditor (jQuery) http://premiumsoftware.net/cleditor/
wysihtml5 https://github.com/xing/
WYSIWYG (jQuery) http://maccman.github.com/wysiwyg/
Redactor (jQuery) http://redactorjs.com/
SimpleHtml5Editor (ZeptoJs and coffeescript): https://github.com/TheOtherNet/simpleHtml5Editor/
bootstrap-wysiwyg (jQuery) https://github.com/mindmup/bootstrap-wysiwyg/
https://github.com/cheeaun/mooeditable
Heavyweights
Aloha Editor http://aloha-editor.com/
TinyMCE http://www.tinymce.com/
CKEditor http://ckeditor.com/
YUI Rich Text Editor – Editor (YUI) http://developer.yahoo.com/yui/editor/
elRTE (jQuery UI) http://elrte.org
Mercury Editor (jQuery, CoffeeScript, Rails) http://jejacks0n.github.com/mercury/
Related
I am working with Vuetify 3 (alpha.12) and can't find in official site -> Components information about tables and tabs. At the same time Vuetify 2 supported them. So the question, does Vuetify 3 support them?
The vuetify is still under development and there're many components which have not been supported yet like:
Data table
Tabs
Carousel
Form inputs
You could read the note in home page :
Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.
I am trying to find an answer several days but not able to.
How can I add custom styles just like in Ckeditor 4 (For example, using CKEDITOR.stylesSet.add) ?
Thanks
Edit the CkEditor css file in its entirety, that can be found at This guide
From the page:
By default, content styles are loaded by the editor JavaScript which makes them only present
when users edit their content and this, in turn, usually takes place in the back–end of an application. If you want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
To avoid unnecessary dependencies in your front–end, use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:
By taking it directly from this guide and saving it as a static resource in your application (e.g. content-styles.css) (recommended).
By generating it using a dedicated script. Learn more in the Development environment guide.
Load the content-styles.css file in your application by adding the following code to the template:
What is the equivalent of https://ckeditor.com/cke4/addon/divarea in CK5? I've used this in CK4 for a previous project but I'm hoping to use CK5 for my new project. Need to inherit the page styles though for the InlineEditor. TY
CKEditor 5's classic editor, despite its name which might indicate that it's the same thing as CKEditor 4's classic editor, is not that classic.
Some of the differences were described in the "Enhanced classic editor" section of the "What's new?" guide. And one of the main difference is that the new classic editor uses an inline editable element. It makes it far lighter and causes less problems (e.g. in CKEditor 4 the iframe which holds the content needs to be resized once you type and this is super tricky).
So, in other words, the new CKEditor 5's classic editor is a bit like CKEditor 4's with the divarea plugin loaded.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
In my own experience, I like programmatic coding. To name a few benefits at here:
Better performance: no need to parse.
No switch between html and javascript: no html, everything in code(use css to control layout.)
Easy to dynamically change the content.
Easy to be read and be maintained.
But, it seams a lot of users at here using declarative coding. my question is : what's the benefit to use declarative coding? Which one is dojo gurus' favorite?
Like fransisco said, you can seperate your code easier. I mean, if you instantiate all your widgets in your JavaScript code, your JavaScript will become pretty large and your HTML will usually be small (only contains "container" nodes which you use to place widgets in).
Better performance: I have to agree with you that it indeed lowers the performance since you have to parse your entire page, but you can optimize that by disabling parseOnLoad and by only parsing the DOM nodes you actually need. At the company I work for we did that by placing all Dojo widget markup inside a <div> with a certain classname. Then in our JavaScript code we do something like:
query(".containsDojo").forEach(node) {
parser.parse(node);
});
No switch between HTML and JS: The switch between HTML and JS makes it easier to understand your code and to have a context. For example, if you need to modify widget A by widget B that's placed on a page called C.html. Then it's easy to look for your widget A since you know on what page it is and where it's located (top, bottom, ...). If you put everything in your JavaScript file, you will have a hard time managing your code since you don't know in what context the widget is initialized. You will have to look through your entire JavaScript code because the widget can be initialized at any point in your code.
Easy to dynamically change the content: If you need dynamic content I usually create some kind of widget myself and put the JavaScript logic there so my "main" JavaScript and HTML code still look clean. You can always use the dijit/registry module to change certain things in your content.
Easy to read and be maintained: I totally disagree with that, similar to what I said in my previous paragraph about the switch between HTML and JavaScript. I mean, what's the difference between a dijit/form/TextBox and a normal HTML input-field? Not much, they're both UI items. Yet, if I follow your thoughts I would put the TextBox somewhere in the JavaScript code and the normal HTML input field inside your HTML. The HTML not only provides you a context, but also centralizes all UI elements.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Selenium is not able to perform mouseOver if Hover property is defined in CSS
You can try yourself on this link using selenium ide
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more2
Selenium mouse Over has no effect on this link
please visit this link
According to this question, this is one of those perennial problems Selenium and :hover css
They discuss a couple of solutions, but it looks like the problem is that as Javascript cannot trigger the :hover pseudo class, so Selenium can't either.