search

kolkov / angular-editor

A simple native WYSIWYG editor component for Angular 6 -14+
https://angular-editor.kolkov.ru
MIT License
673 stars 355 forks source link

HTML code view is not working as expected #141

Open triabhishek95 opened 5 years ago

triabhishek95 commented 5 years ago

There is a feature in editor to see the HTML view of the code that is HTML Code

Expected Behavior Should Work well in the front-end & should not produce any error into console.

Current Behavior

  1. When we click on it for seeing HTML codes & then to back normal mode it produces error in the console of below Type: TypeError: Cannot read property 'stopPropagation' of null
  2. When the writing area is blank at that time clicking on it for going into HTML mode & coming back to normal mode results into some css issue & the lower edge of editor is slightly shifted upwards . (Please refer this Image for same)
kolkov commented 5 years ago

Hi! What version of packages you are using?

triabhishek95 commented 5 years ago

Hello sir, Thank you so much for your quick response! I am using 0.18.4 version

kolkov commented 5 years ago

And what version of angular and other packages?

triabhishek95 commented 5 years ago

Here is the details about my project & the configurations that I am using for the same

Angular CLI Viersion 7.3.9 Angular Version 7.2.15 Node Version 10.15.3

package.json 

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animation": "^4.0.0-beta.8",
    "@angular/animations": "~7.2.0",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@kolkov/angular-editor": "^0.18.4",
    "@ng-bootstrap/ng-bootstrap": "^4.1.3",
    "angular-datatables": "^8.0.0",
    "angular-font-awesome": "^3.1.2",
    "arrive": "^2.4.1",
    "bootstrap": "^4.3.1",
    "bootstrap-material-design": "^4.1.2",
    "bootstrap-notify": "^3.1.3",
    "chart.js": "^2.8.0",
    "chartist": "^0.11.2",
    "core-js": "^2.5.4",
    "datatables.net": "^1.10.19",
    "datatables.net-dt": "^1.10.19",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "ng-snotify": "^4.3.0",
    "ng2-charts": "^1.6.0",
    "ngx-device-detector": "^1.3.9",
    "ngx-toastr": "^10.0.4",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/datatables.net": "^1.10.17",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.30",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}
kolkov commented 5 years ago

Thanks!,And provide your config for editor please.

triabhishek95 commented 5 years ago

Hello Sir,

Sorry for the delay in response. Here is the information of my config for the editor that I am using in my project.

editorConfig: AngularEditorConfig ={
    editable: true,
    spellcheck: true,
    height: 'auto',
    minHeight: '0',
    maxHeight: 'auto',
    width: 'auto',
    minWidth: '0',
    translate: 'yes',
    enableToolbar: true,
    showToolbar: true,
    placeholder: 'Enter text here...',
    defaultParagraphSeparator: '',
    defaultFontName: '',
    defaultFontSize: '',
    fonts: [
      {class: 'arial', name: 'Arial'},
      {class: 'times-new-roman', name: 'Times New Roman'},
      {class: 'calibri', name: 'Calibri'},
      {class: 'comic-sans-ms', name: 'Comic Sans MS'}
    ],
    customClasses: [
      {
        name: 'quote',
        class: 'quote',
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: 'titleText',
        class: 'titleText',
        tag: 'h1',
      },
    ],
    uploadUrl: 'http://localhost:130/uploadimage',
    sanitize: true,
    toolbarPosition: 'top',
};
HemaVSitaram commented 4 years ago

Any update on this issue. I'm also facing same issue with the same version.

mjimp commented 4 years ago

I have the very same issue. Any updates @kolkov?

As a quickfix I did the following (for those who struggle with it as I was)

AngularEditorComponent.prototype.onTextAreaFocus = function (event) {
    if (this.focused && event) {  // note the "&& event" here
        event.stopPropagation();
        return;
    }
    this.focused = true;
    this.focusEvent.emit(event);
};

The problem though seems to be coming from passing explicit "null" in here.

AngularEditorComponent.prototype.toggleEditorMode = 
        function (bToSource) {
        // ...
             this.focusInstance = this.r.listen(oCode, 'focus', (
                function () { return _this.onTextAreaFocus(null); }));
        // ...
};
kolkov commented 4 years ago

@karthik099 I think it's correct behavior of browser. Page can contain only one head and body tags. If you need editing whole page, using iframe editor instead.

kolkov commented 4 years ago

@triabhishek95 Do you have this issue on 0.18.7?

karthik099 commented 4 years ago

Hi. mine is version 0.14.6

Karthik

On Fri, Nov 15, 2019 at 4:00 PM Andrey Kolkov notifications@github.com wrote:

@triabhishek95 https://github.com/triabhishek95 Do you have this issue on 0.18.7?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kolkov/angular-editor/issues/141?email_source=notifications&email_token=AAGS6LS4IMYCJ5FEOMNBVETQTZ24LA5CNFSM4IRCEKCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEFASNI#issuecomment-554305845, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGS6LTBQ7LAGPGOWJXF5PTQTZ24LANCNFSM4IRCEKCA .

-- Thanks, Karthik Ravikumar

kolkov commented 4 years ago

@karthik099 Any version of this editor will not work and will remove these tags, because this is how the browser works with contenteditable.

karthik099 commented 4 years ago

Okay. Thanks Andrey. :)

On Fri, Nov 15, 2019, 4:13 PM Andrey Kolkov notifications@github.com wrote:

@karthik099 https://github.com/karthik099 Any version of this editor will not work and will remove these tags, because this is how the browser works with contenteditable.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kolkov/angular-editor/issues/141?email_source=notifications&email_token=AAGS6LREYQOL4WIW275XWZDQTZ4LJA5CNFSM4IRCEKCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEFBSSI#issuecomment-554309961, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGS6LR62FEMUNFM4IXENY3QTZ4LJANCNFSM4IRCEKCA .

aaqibqadeer commented 4 years ago

@kolkov any update on the issue? I am using v0.18.8 of the editor and angular 7. how can I fix this issue?

nehal076 commented 4 years ago

I am facing the same error. Any Update on how to fix this?