angulartypescriptsummernotehtml-editor

HTML Editor for Angular7

I'm looking for an HTML-editor to embed in an Angular7 project. The user of the editor will be creating very simple web pages or making small edits to more complex pages. I originally thought a WYSISYG editor might do the trick but I'm finding out they aren't great for making edits to the source HTML. Does anyone have recommendations?

Here's a list of what I've considered so far:

  1. CKEditor5 - Really a rich text editor. Doesn't offer the ability to view/edit source HTML.
  2. CKEditor4 - Does offer the ability to edit the source HTML but doesn't seem good for editing web pages.
  3. Froala - Looks really good, but isn't open source.
  4. Summernote (and a typescript port) - This one looks like it would be perfect. Haven't been able to find documentation for setting this up in Angular though and the typescript library doesn't have any documentation. If anyone has experience setting this up, an explanation would be great!
  5. AngularEditor - I currently have this one setup and working inside my project. It seems alright for editing web pages. My biggest issue with it is that some HTML I've inserted into the editor doesn't stay within the editor when rendering. Styles leave the editor window and other elements on the main page get altered.

Any suggestions that I may have overlooked?

Solution

  • Look no further -- I can really recommend CodeMirror :)

    It's a very powerful but lightweight JS text editor which can be embedded in your html page and has a bunch of features such as..

    ..and it also supports HTML markup

    my favorite feature is the autocompletion support -- like in your IDE you can use ctrl-space to autocomplete. You can try this feature here with the HTML example

    disclaimer: I'm not a contributor to the project, but I have used it in some projects myself and would consider myself a fanboy.