Look for a Summernote alternative - Html Editor

[srish]

@yourcelf hey, I would like to look up for a relevant html editor as an alternative to summernote. You mentioned some missing features in the summernote during the call. If you could list them here and some features that we should be looking for in the new editor, that would be super helpful.

[yourcelf]

Well, as a starting point: you could see how far you can get using http://hackerwins.github.io/summernote/ to get an acceptable style for past event's descriptions (like https://unhangout.media.mit.edu/event/lcl and https://unhangout.media.mit.edu/event/ideasinaction). The main things that looks like summernote wouldn't support easily is captions on the photos and custom button links -- but maybe we can do without those? It might be tough to find an editor that gives you that level of control.

A few other popular WYSIWYG editors are http://ckeditor.com/, http://www.tinymce.com/, http://xing.github.io/wysihtml5/, and http://mindmup.github.io/bootstrap-wysiwyg/. There are tons more that I haven't tried before too.

If we find an editor that allows setting custom classes on elements, we could develop a taxonomy of classes that are part of the page's default style for the descriptions to use. That could take care of some of the basic positioning / captioning / button design type stuff. As far as I can tell, summernote doesn't support adding classes to things; I believe CKEditor might.

[srish]

@yourcelf hey, did some research on the WYSIWYG editors. Checked the following links http://www.jquery4u.com/plugins/html5-wysiwyg/, http://www.jqueryrain.com/demo/jquery-wysiwyg-editor/ and the links you provided.

The two editors that work perfectly well are -

1. jHTMLArea http://www.jqueryrain.com/?6i0SWrnG
2. TinyEditor http://sandbox.scriptiny.com/tinyeditor/
3. There is another editor Froala http://editor.froala.com/, which looks pretty decent in terms of UI, and works fairly well but there are some minor css issues. For instance: overlay div that I am using to display titles over the speakers profile pictures, is hidden beneath the profile image.

Should I pick anyone out of the first two? Do you have any thoughts on this?

[yourcelf]

@srish I can't figure out how to do floated images or captions using either jHTMLArea or TinyEditor -- am I missing how to do it? In general, those two seem a little less polished than summernote, CKEditor or TinyMCE -- I'd prefer to stick to more widely used editors so that they'll be less likely to have cross-browser compatibility issues.

Are you satisfied with the HTML editing capabilities of these for all of our "description" field needs?

[yourcelf]

I've been implementing TinyMCE for another project, and while the documentation isn't super awesome, it supports custom style blocks that use classes we specify. I think with TinyMCE we can define an approved list of styles which will do floated captions, etc.

[ghost]

Now summernote can be an

editor that allows setting custom classes on elements

you can achieve that using my plugin:

https://github.com/creativeprogramming/summernote-addclass/