HTML Editor for Angular7 [closed]

Question

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?

Phyle

You can check out tiny.cloud or jhollingworth.github.io/bootstrap-wysihtml5 – Radom

Answer 1

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..

• support for over 100 languages
• syntax/markup highlighting
• keyboard bindings (vim, emacs, sublime)
• search/replace interface
• tag matching
• ..

..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.

Aspect

Implemented ngx-codemirror with a toggleable iframe to show a preview. Great editor, thanks for the suggestion – Phyle

Answer 2

this is the best way to implement text editor with angular easy simple and perfect work it,s work for me if any one need follow these lines of code

 npm install @syncfusion/ej2-angular-richtexteditor --save

second step include the above library in app.module.ts like this

 import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';

  @NgModule({
  declarations: [
  AppComponent
 ],
 imports: [
 RichTextEditorAllModule
 ],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

and then in component view page use this line

<ejs-richtexteditor></ejs-richtexteditor>

this is result of the above text editor library

Quagga

This looks like exactly what I was looking for. I'm currently using jodit, but I will try subbing this in and see how it goes. – Phyle

Hi abubakkar how to get plain text from <ejs-richtexteditor> using form control ? i'm unable to get it.text saving in <p> xyz</p> formet – Landeros

hello dear you can check about above checkedit here – Quagga

syncfusion.com/kb/9864/… – Quagga

does anyone know is this above product is a free library ? – Tare

@chayaD as indicated here >> npmjs.com/package/@syncfusion/ej2-angular-base, this is a commercial product that requires a paid license. – Smukler

Answer 3

Take a look at PrimeNG and its editor, which is based on Quill Editor.

https://www.primefaces.org/primeng/#/editor

Subito

it's great but it doesn't let you edit html – Aaronaaronic

Answer 4

I'm using the @kolkov/[email protected].

For solve problem's whit the special chars, I've created a replace function before sending the content for CRUD Rest API.

Code snippet :

    unentityLtGt(html){
    html = this.replaceAll(html,'&lt;','<');
    html = this.replaceAll(html,'&gt;','>');
    html = this.replaceAll(html,'"&quot;','"');
    html = this.replaceAll(html,'&quot;"','"');
    html = this.replaceAll(html,'&#34;','"');
    return html;
}

Peeler