What's a good WYSIWYG editor to use with Conte

2019-04-28 17:48发布

问题:

I'm trying to build something similar to Google Docs, where you can edit a page directly and not through a textarea or iframe. This is possible with the contentEditable HTML5 attribute.

So are there any good editors that I could use on top of contentEditable, to provide features like text formatting, inserting links, pasting from word, etc.?

http://www.aloha-editor.org/ is one that I've found, but I was wondering if there are more.

(edit: I should clarify that I'm not trying to build the whole Google Docs, I just used that as an example of editing the actual content)

回答1:

Version 2.0 of WYMeditor (currently under heavy development by me and others) also uses contentEditable, but relies mostly on selection/ranges/the dom for manipulation as the behavior of the designMode and contenteEditable API:s differ greatly between browser vendors.

Some of the features/design goals are:

  • WYSIWYM editing – Separating content and presentation we enable rich text formatting, but leave the presentation to the designer.

  • A modular architecture – Use only the components you want (and hook them up against your own ui) or drop in a "full stack" editor with toolbars, dialogs and everything.

  • Strict xHTML(5) – The editor outputs strict XHTML by default (making it easy to transform the content as needed). If thats not what you want you can write your own parser and serializer to support any format you want.

  • Placeholders/custom elements – Placeholders and even custom elements enable you to manage almost any kind of content inside the editor. Together with the StructureValidator you can enforce rules for nesting, formatting, valid attributes, etc.

Source is available on GitHub and a first beta version is to be expected within a month or two.



回答2:

Take a look at HTML5 editor, it take a textarea element and transform it into a div with contentEditable. It have a pretty customizable toolbar to easily format content.