primeng/bundles/primeng-editor.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("primeng/api"),require("primeng/dom"),require("@angular/forms"),require("quill")):"function"==typeof define&&define.amd?define("primeng/editor",["exports","@angular/core","@angular/common","primeng/api","primeng/dom","@angular/forms","quill"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.editor={}),e.ng.core,e.ng.common,e.primeng.api,e.primeng.dom,e.ng.forms,e.Quill)}(this,(function(e,t,n,o,l,i,a){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=r(a),u={provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return p})),multi:!0},p=function(){function e(e){this.el=e,this.onTextChange=new t.EventEmitter,this.onSelectionChange=new t.EventEmitter,this.onInit=new t.EventEmitter,this.onModelChange=function(){},this.onModelTouched=function(){}}return e.prototype.ngAfterViewInit=function(){var e=this,t=l.DomHandler.findSingle(this.el.nativeElement,"div.p-editor-content"),n={toolbar:l.DomHandler.findSingle(this.el.nativeElement,"div.p-editor-toolbar")},o=this.modules?Object.assign(Object.assign({},n),this.modules):n;this.quill=new s(t,{modules:o,placeholder:this.placeholder,readOnly:this.readonly,theme:"snow",formats:this.formats,bounds:this.bounds,debug:this.debug,scrollingContainer:this.scrollingContainer}),this.value&&this.quill.setContents(this.quill.clipboard.convert(this.value)),this.quill.on("text-change",(function(n,o,l){if("user"===l){var i=t.children[0].innerHTML,a=e.quill.getText().trim();"<p><br></p>"===i&&(i=null),e.onTextChange.emit({htmlValue:i,textValue:a,delta:n,source:l}),e.onModelChange(i),e.onModelTouched()}})),this.quill.on("selection-change",(function(t,n,o){e.onSelectionChange.emit({range:t,oldRange:n,source:o})})),this.onInit.emit({editor:this.quill})},e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"toolbar":e.toolbarTemplate=t.template;break;case"header":e.headerTemplate=t.template}}))},e.prototype.writeValue=function(e){this.value=e,this.quill&&(e?this.quill.setContents(this.quill.clipboard.convert(e)):this.quill.setText(""))},e.prototype.registerOnChange=function(e){this.onModelChange=e},e.prototype.registerOnTouched=function(e){this.onModelTouched=e},e.prototype.getQuill=function(){return this.quill},Object.defineProperty(e.prototype,"readonly",{get:function(){return this._readonly},set:function(e){this._readonly=e,this.quill&&(this._readonly?this.quill.disable():this.quill.enable())},enumerable:!1,configurable:!0}),e}();p.decorators=[{type:t.Component,args:[{selector:"p-editor",template:'\n        <div [ngClass]="\'p-editor-container\'" [class]="styleClass">\n            <div class="p-editor-toolbar" *ngIf="toolbar || toolbarTemplate">\n                <ng-content select="p-header"></ng-content>\n                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>\n            </div>\n            <div class="p-editor-toolbar" *ngIf="!toolbar && !toolbarTemplate">\n                <span class="ql-formats">\n                    <select class="ql-header">\n                      <option value="1">Heading</option>\n                      <option value="2">Subheading</option>\n                      <option selected>Normal</option>\n                    </select>\n                    <select class="ql-font">\n                      <option selected>Sans Serif</option>\n                      <option value="serif">Serif</option>\n                      <option value="monospace">Monospace</option>\n                    </select>\n                </span>\n                <span class="ql-formats">\n                    <button class="ql-bold" aria-label="Bold" type="button"></button>\n                    <button class="ql-italic" aria-label="Italic" type="button"></button>\n                    <button class="ql-underline" aria-label="Underline" type="button"></button>\n                </span>\n                <span class="ql-formats">\n                    <select class="ql-color"></select>\n                    <select class="ql-background"></select>\n                </span>\n                <span class="ql-formats">\n                    <button class="ql-list" value="ordered" aria-label="Ordered List" type="button"></button>\n                    <button class="ql-list" value="bullet" aria-label="Unordered List" type="button"></button>\n                    <select class="ql-align">\n                        <option selected></option>\n                        <option value="center"></option>\n                        <option value="right"></option>\n                        <option value="justify"></option>\n                    </select>\n                </span>\n                <span class="ql-formats">\n                    <button class="ql-link" aria-label="Insert Link" type="button"></button>\n                    <button class="ql-image" aria-label="Insert Image" type="button"></button>\n                    <button class="ql-code-block" aria-label="Insert Code Block" type="button"></button>\n                </span>\n                <span class="ql-formats">\n                    <button class="ql-clean" aria-label="Remove Styles" type="button"></button>\n                </span>\n            </div>\n            <div class="p-editor-content" [ngStyle]="style"></div>\n        </div>\n    ',providers:[u],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{height:auto;width:auto}"]}]}],p.ctorParameters=function(){return[{type:t.ElementRef}]},p.propDecorators={onTextChange:[{type:t.Output}],onSelectionChange:[{type:t.Output}],toolbar:[{type:t.ContentChild,args:[o.Header]}],style:[{type:t.Input}],styleClass:[{type:t.Input}],placeholder:[{type:t.Input}],formats:[{type:t.Input}],modules:[{type:t.Input}],bounds:[{type:t.Input}],scrollingContainer:[{type:t.Input}],debug:[{type:t.Input}],onInit:[{type:t.Output}],templates:[{type:t.ContentChildren,args:[o.PrimeTemplate]}],readonly:[{type:t.Input}]};var c=function(){};c.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],exports:[p,o.SharedModule],declarations:[p]}]}],e.EDITOR_VALUE_ACCESSOR=u,e.Editor=p,e.EditorModule=c,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-editor.umd.min.js.map