Editor with Highlight module.

UI Components for Angular
Post Reply
Posts: 2
Joined: 20 Dec 2016, 00:29

28 Dec 2016, 05:54

Hi All,

How can I initialize Editor with Highlight module ? http://quilljs.com/docs/modules/syntax/

I already added highlight library in the index.html

In the http://www.quilljs.com there is a document with code highlighted I want to do the same thing. But, I don't want to touch the source of Editor to accomplish this. I want it to keep it clean and separated.

I also tried to use angular2-highlight-js but, also, can't find the way to bind it to Editor or Quill.

Code: Select all

import { Component, Input, OnInit, ViewChild, AfterViewInit, AfterViewChecked, ElementRef } from '@angular/core';
import { Template } from './template';
import { Editor } from 'primeng/primeng';
import { Quill } from 'quill';
import { HighlightJsService, HighlightJsModule } from 'angular2-highlight-js';

    moduleId: module.id,
    selector: 'template-editor',
    templateUrl: 'template.editor.component.html'

export class TemplateEditorComponent implements OnInit, AfterViewChecked, AfterViewInit {
    @ViewChild(Editor) editor: Editor;
    constructor(private el: ElementRef, private highlightService: HighlightJsService) {

    @Input() template = new Template();
    @Input() content: string;

    ngOnInit(): void{


    ngAfterViewChecked(): void {
        // TODO.

    ngAfterViewInit(): void {

This is the source of Editor:

Code: Select all

import { ElementRef, AfterViewInit, EventEmitter } from '@angular/core';
import { DomHandler } from '../dom/domhandler';
import { ControlValueAccessor } from '@angular/forms';
export declare const EDITOR_VALUE_ACCESSOR: any;
export declare class Editor implements AfterViewInit, ControlValueAccessor {
    el: ElementRef;
    domHandler: DomHandler;
    onTextChange: EventEmitter<any>;
    onSelectionChange: EventEmitter<any>;
    toolbar: any;
    style: any;
    styleClass: string;
    placeholder: string;
    readOnly: boolean;
    formats: string[];
    value: string;
    onModelChange: Function;
    onModelTouched: Function;
    quill: any;
    constructor(el: ElementRef, domHandler: DomHandler);
    ngAfterViewInit(): void;
    writeValue(value: any): void;
    registerOnChange(fn: Function): void;
    registerOnTouched(fn: Function): void;
export declare class EditorModule {

Posts: 5
Joined: 21 Aug 2017, 16:34

13 Sep 2017, 17:50

Have you or anyone else had any luck with this? I've been able to configure the editor to display properly by importing the EditorModule and I've even got the library imported using this in my component:

import * as hljs from 'highlight.js';

but have no idea how to get that highlighting to work (jn my case, I want SQL syntax). In case anyone needs to know how I installed Highlight.JS, here's the NPM commands I ran:

npm install highlight.js
npm install @types/highlight.js --save

Posts: 2
Joined: 20 Dec 2016, 00:29

13 Sep 2017, 18:24

I ended this project a few days after without this feature. Now, I work purely with JS and jQuery.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests