Prime NG - Quill Editor - Angular

安裝 支持

npm install quill --save

引用 JS （angular-cli.json）

"scripts": [... "../node_modules/quill/dist/quill.js"],

引用 CSS （angular-cli.json）

"styles": [ ... "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css"],

引入 EditorModule （*.module.ts）

import {EditorModule}from 'primeng/editor';

@NgModule({ imports: [ EditorModule, ],

寫入 html 標(biāo)簽

<p-editor[(ngModel)]="text"[style]="{'height':'320px'}"></p-editor>

TS 代碼

text: string = '<div>請編輯信息</div><div> <b>編輯器</b> 啦啦</div><div>
</div>';
constructor() { }
ngOnInit() {
}

自定義 頭部按鈕+漢化

  <p-header>
    <span class="ql-formats">
      <select class="ql-size" defaultValue="small">
        <option selected>默認(rèn)字號</option>
        <option value="small">小號</option>
        <option value="large">中號</option>
        <option value="huge">大號</option>
      </select>
    </span>
    <span class="ql-formats">
      <select class="ql-font" defaultValue="small">
        <option selected>默認(rèn)字體</option>
        <option value="serif">襯線字體</option>
        <option value="monospace">等寬字體</option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold" aria-label="Bold"></button>
      <button class="ql-italic" aria-label="Italic"></button>
      <button class="ql-underline" aria-label="Underline"></button>
      <button class="ql-strike" aria-label="Strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color" value="color"></select>
      <span class="ql-format-separator"></span>
      <select class="ql-background" value="background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <select title="文本對齊" class="ql-align">
        <option selected></option>
        <option value="center" label="Center"></option>
        <option value="right" label="Right"></option>
        <option value="justify" label="Justify"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-link" aria-label="Link"></button>
      <button class="ql-image" aria-label="Image"></button>
      <button class="ql-code-block" aria-label="Code Block"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean" aria-label="Remove Styles"></button>
    </span>
  </p-header>

前臺全部完全代碼

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}">
  <p-header>
    <span class="ql-formats">
      <select class="ql-size" defaultValue="small">
        <option selected>默認(rèn)字號</option>
        <option value="small">小號</option>
        <option value="large">中號</option>
        <option value="huge">大號</option>
      </select>
    </span>
    <span class="ql-formats">
      <select class="ql-font" defaultValue="small">
        <option selected>默認(rèn)字體</option>
        <option value="serif">襯線字體</option>
        <option value="monospace">等寬字體</option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold" aria-label="Bold"></button>
      <button class="ql-italic" aria-label="Italic"></button>
      <button class="ql-underline" aria-label="Underline"></button>
      <button class="ql-strike" aria-label="Strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color" value="color"></select>
      <span class="ql-format-separator"></span>
      <select class="ql-background" value="background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <select title="文本對齊" class="ql-align">
        <option selected></option>
        <option value="center" label="Center"></option>
        <option value="right" label="Right"></option>
        <option value="justify" label="Justify"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-link" aria-label="Link"></button>
      <button class="ql-image" aria-label="Image"></button>
      <button class="ql-code-block" aria-label="Code Block"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean" aria-label="Remove Styles"></button>
    </span>
  </p-header>
</p-editor>
<p>內(nèi)容預(yù)覽: {{text}}</p>