web-dev-qa-db-ja.com

Angular 6 PrimeNGカスタムエディタ

PrimeNG Editorをカスタマイズしようとしています。カスタムフォントサイズの選択ドロップダウンリストを追加しています[12px, 14px, 16px...]

これがコンポーネントHTMLです

<p-editor [(ngModel)]="value" (onTextChange)="onTextChanged($event)">
            <p-header>
                    <span class="ql-formats">
                     ...
                      <select class="ql-size">
                            <option value="12px">12</option>
                            <option value="14px">14</option>
                            <option value="16px">16</option>
                        </select>
                    </span>
                   ...
                  </p-header>               
    </p-editor>

すべてのフォントサイズで表示する選択リストを取得できます enter image description here

リストのオプションを選択するときにフォントサイズを変更する機能を追加する方法がわかりません。 TypeScriptのドキュメントに例がありません。カスタムフォントサイズの選択リストを作成するにはどうすればよいですか？

これが私がフォローしたドキュメントです

例

angulartypescriptprimengquill
6
Train

最初に、.tsでホワイトリストに登録されているスタイル/サイズを取得します。

constructor(){
    var fontSizeStyle = Quill.import('attributors/style/size');
    fontSizeStyle.whitelist = ['0.75em','1em','1.5em','2.5em', '24px', '48px', '100px', '200px'];
    Quill.register(fontSizeStyle, true);
}

htmlファイルで、次のホワイトリストオプションを使用しました。

<span class="ql-formats">
   <select class="ql-size">
     <option value="0.75em">small</option>
     <option value="1em" selected></option>
     <option value="1.5em">large</option>
     <option value="2.5em">huge</option>
   </select>
 </span>
 <span class="ql-formats">
   <select class="ql-size">
      <option value="24px">24</option>
      <option value="48px">48</option>
      <option value="100px">100</option>
      <option value="200px">200</option>
    </select>
 </span>

最初のドロップダウンオプションの値の変更を確認します。

Var Quillを宣言して、未定義の変数で問題が発生しないようにすることができます（これは、primingでも同じです）。

declare var Quill: any;

ここでの作業例：

https://stackblitz.com/edit/quill-55477705?file=src/app/app.component.ts

0
Daniel Piñeiro