在 Quill 编辑器中设置默认选定的字体大小

问题描述 投票：0回答：1

我正在尝试以编程方式为我的应用程序页面上的不同 Quill rte 设置默认字体大小，但每种方法似乎都更像是一种黑客解决方法，而不是看起来非常简单的方法。

我在 Angular v17 应用程序中使用 Quill (ngx-quill ^25.3.2/quill ^2.0.0)，并且我尝试对 

selected
标签上的 
<option>
属性使用 Angular 的各种 if 语句语法，我需要设置为默认字体大小，但我用这种方法遇到了很多死胡同。

我要做的一件事是在下拉列表中选择正确的字体大小，尽管看似费尽周折。这是我已经开始工作的方法：

export class QuillEditor implements OnInit {
  @ViewChild("contextModel", { static: true }) contextModel: ElementRef;
  @ViewChild("toolbar", { static: true }) toolbarElement: ElementRef;
  @Input() isHeaderOrFooter = false;

  public ngOnInit(): void {
    this.initializeQuill()
  }

  private initializeQuill(): void {
    const editorElement = this.contextModel.nativeElement;
    const toolbarElement = this.toolbarElement.nativeElement;

    let fontSizeStyle = Quill.import("attributors/style/size");
    fontSizeStyle.whitelist = // array of px font sizes;
    Quill.register(fontSizeStyle, true);
    this.Quill = new Quill(editorElement, {
            theme: "snow",
            modules: {
                table: true,
                toolbar: toolbarElement,
            },
            placeholder: "Enter Text",
    });
    // other quill setup
    const defaultFontSize = this.isHeaderOrFooter ? "10px" : "14px";
    // this seems pretty hacky, but it works
    const quillLength = this.Quill.getLength();
    this.Quill.formatText(0, quillLength, 'size', defaultFontSize);
    const sizeDropdown = toolbarElement.querySelector("select.ql-size");
    if (sizeDropdown) {
        sizeDropdown.value = defaultFontSize; // Set default font size in dropdown
        sizeDropdown.dispatchEvent(new Event("change"));
     }
  }
}

我似乎唯一无法工作的是让编辑器字体大小反映默认选择的字体大小。任何指导将不胜感激

angular typescript font-size quill rte
1个回答
0
投票

要使默认字体大小在 Quill 编辑器和下拉菜单中都有效，您需要确保以下几点：

将字体大小正确应用于编辑器的内容：您需要确保字体大小以一致的方式应用于编辑器的内容，以便内容和下拉列表显示相同的值。

正确设置下拉菜单：设置下拉菜单的值很好，但是需要有一种正确的方法来根据该下拉菜单值将字体大小设置为编辑器的内容。

以下是实现这两个目标的方法：

  1. 在 Quill Editor 中设置默认字体大小： 您不仅可以在初始化 Quill 后使用 formatText 设置默认字体大小，还可以使用 Quill 的默认配置和编辑器 API 从一开始就设置字体大小。初始化编辑器时，请确保设置内容的默认格式。

    私有initializeQuill(): void { const editorElement = this.contextModel.nativeElement; consttoolbarElement = this.toolbarElement.nativeElement;

    //注册自定义字体大小白名单（可选） let fontSizeStyle = Quill.import("attributors/style/size"); fontSizeStyle.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px"]; // 根据需要自定义 Quill.register(fontSizeStyle, true);

    // 初始化 Quill 编辑器 this.Quill = new Quill(editorElement, { 主题：“雪”， 模块：{ 表：真实， 工具栏：工具栏元素， }, 占位符：“输入文本”， 格式：[“size”]，//确保“size”是有效格式 });

    // 根据输入或条件确定默认字体大小 const defaultFontSize = this.isHeaderOrFooter ？ “10 像素”：“14 像素”；

    // 设置编辑器内容的默认字体大小 const quillLength = this.Quill.getLength(); this.Quill.formatText(0, quillLength, 'size', defaultFontSize);

    // 设置工具栏下拉菜单中的字体大小 const sizeDropdown =toolbarElement.querySelector("select.ql-size"); 如果（尺寸下拉）{ sizeDropdown.value = 默认字体大小； sizeDropdown.dispatchEvent(new Event("change")); } }

  2. 设置 Quill 格式文本的字体大小： 行 this.Quill.formatText(0, quillLength, 'size', defaultFontSize);将字体大小应用于编辑器中的内容。如果这没有反映，可能是因为您在 Quill 初始化后应用它，但 Quill 可能尚未完全渲染内容。

为了确保其正常工作，您可以延迟应用字体大小，直到 Quill 完全初始化：

private initializeQuill(): void {
  const editorElement = this.contextModel.nativeElement;
  const toolbarElement = this.toolbarElement.nativeElement;

  let fontSizeStyle = Quill.import("attributors/style/size");
  fontSizeStyle.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px"];
  Quill.register(fontSizeStyle, true);

  this.Quill = new Quill(editorElement, {
    theme: "snow",
    modules: {
      table: true,
      toolbar: toolbarElement,
    },
    placeholder: "Enter Text",
    formats: ["size"],
  });

  // Use setTimeout to apply font size after the editor is fully initialized
  setTimeout(() => {
    const defaultFontSize = this.isHeaderOrFooter ? "10px" : "14px";
    const quillLength = this.Quill.getLength();
    this.Quill.formatText(0, quillLength, 'size', defaultFontSize);

    const sizeDropdown = toolbarElement.querySelector("select.ql-size");
    if (sizeDropdown) {
      sizeDropdown.value = defaultFontSize;
      sizeDropdown.dispatchEvent(new Event("change"));
    }
  }, 0);
}

  1. 确保工具栏和编辑器正确同步： 有时，如果 Quill 没有正确刷新其内部状态，工具栏选择和编辑器应用的样式之间可能会不匹配。您可以在应用字体大小后手动触发刷新：

    setTimeout(() => { const defaultFontSize = this.isHeaderOrFooter ？ “10 像素”：“14 像素”； const quillLength = this.Quill.getLength(); this.Quill.formatText(0, quillLength, 'size', defaultFontSize);

    const sizeDropdown =toolbarElement.querySelector("select.ql-size"); 如果（尺寸下拉）{ sizeDropdown.value = 默认字体大小； sizeDropdown.dispatchEvent(new Event("change")); }

    // 手动触发Quill内部状态更新，同步工具栏和编辑器 this.Quill.root.style.fontSize = defaultFontSize; }, 0);

4.处理多个编辑器： 如果页面上有多个 Quill 实例（例如，具有不同配置的不同编辑器），则可以通过管理 defaultFontSize 并确保编辑器内容和工具栏同步，对每个实例使用类似的方法。您可以使用 @ViewChild 或传递配置作为输入来动态处理此问题

这里的关键是以 Quill 编辑器和下拉工具栏中的内容反映相同值的方式应用字体大小。使用 setTimeout 可确保您等到 Quill 完全初始化后再应用样式并触发下拉更改事件。您还应该通过手动设置下拉值并分派更改事件，确保应用于编辑器的任何字体大小都能正确反映在工具栏中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.