Quill Editor 1.0 富文本编辑器 - 安装+前端汉

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 标签

<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>默认字号</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>默认字体</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>默认字号</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>默认字体</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>内容预览: {{text}}</p>