CODEWITHSUNDEEP
angulartypescriptsummernotehtml-editor
Tw1sm
Tw1sm

Reputation: 361

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?

Upvotes: 21

Views: 31386

Answers (4)

abubakkar tahir
abubakkar tahir

Reputation: 847

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 enter image description here

Upvotes: 9

Daniel Krug
Daniel Krug

Reputation: 41

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;
}

Upvotes: 4

lolcatzftw
lolcatzftw

Reputation: 576

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.

Upvotes: 14

jalex19
jalex19

Reputation: 201

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

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

Upvotes: 5

Related Questions