angular：quill align的坑

最新推荐文章于 2025-03-10 20:17:27 发布

Cloud Flower

最新推荐文章于 2025-03-10 20:17:27 发布

阅读量416

点赞数

分类专栏： Angular 文章标签：前端 typescript angular

本文链接：https://blog.youkuaiyun.com/qq1090504117/article/details/132385146

版权

Angular 专栏收录该内容

51 篇文章

订阅专栏

本文描述了在使用Quill.js时，尝试左对齐文本遇到的问题，因为其align属性只支持right,center,和justify。作者介绍了如何在插入图片后，先设置新的行格式为undefined，再重新调整对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一行设置了align为center，换行后下一个会继承上一行的格式，我想使用Quill.formatLine(newLineIndex, 0, ‘align’, 'left')来左对齐，发现始终不能生效。

参看quill.js源码，发现align没有left的配置

var config = {
  scope: _parchment2.default.Scope.BLOCK,
  whitelist: ['right', 'center', 'justify']
};

var AlignAttribute = new _parchment2.default.Attributor.Attribute('align', 'align', config);
var AlignClass = new _parchment2.default.Attributor.Class('align', 'ql-align', config);
var AlignStyle = new _parchment2.default.Attributor.Style('align', 'text-align', config);

因此只能获取换行后的格式，将align设置为undefined，再调用Quill.formatLine

  function insertImage(editor: Quill | undefined, url: string) {
    if (!editor) return;

    const {index} = editor.getSelection(true);
    editor.insertEmbed(index, 'image', url);
    editor.formatLine(index, 0, 'align', 'center')

    editor.insertText(index+1, '\n');
    const newLineIndex = index + 2;
    const newLineFormat = editor.getFormat(newLineIndex, length);
    newLineFormat['align'] = undefined;
    editor.formatLine(newLineIndex, 0, newLineFormat);
    editor.setSelection(newLineIndex, 0);
  }