Quill在Vue.js环境下无法正常运行且出现异常箭头显示问题

异常游离箭头图标问题来源 #

• 该图标是Quill bubble（气泡）主题自带的工具栏定位三角标识，出现游离显示的核心原因是Quill主题样式的加载时序与实例初始化错位：实例已经完成对应DOM节点的生成，但节点依赖的定位样式没有生效，三角标识无法绑定到相对定位的编辑区容器上，就会以普通块级元素的形式显示在页面流中
• 额外触发场景：初始化时错误传入了不存在的toolbar选择器，导致bubble主题的定位逻辑找不到锚点参考，就会把三角标识渲染在默认的页面位置，形成样式异常的显示效果

自动高度功能失效原因 #

• Quill官方的自动高度实现没有内置在JS初始化配置中，仅靠参数配置无法触发，必须配套对应的盒模型样式才能生效，很多复现场景下仅参考了官方的JS初始化逻辑、没有补充对应的CSS规则，就会导致编辑区固定为默认高度，无法随内容输入自动撑开
• Vue框架的DOM挂载时序冲突：Quill初始化执行时，目标编辑容器、scrollingContainer指定的节点还没有完成浏览器渲染，实例无法正确读取节点的实际尺寸，自动高度的监听逻辑绑定到了空节点上，自然无法正常响应内容变化
• 常见配置冲突：scrollingContainer指定的节点继承了父级的固定高度、overflow: scroll/auto的滚动规则，即使编辑区内容变化，外层容器的固定约束也会阻止Quill自动调整自身高度

• 调整样式加载顺序：在项目入口全局位置引入Quill核心样式和bubble主题的对应CSS文件，不要在Vue组件内部动态引入样式，确保Quill实例初始化前，所有主题样式已经完成加载，保证定位规则可以正确作用到对应的生成节点上
• 调整初始化执行时机：把Quill的实例初始化代码放到Vue的nextTick回调中执行，等待当前组件的所有DOM节点完成挂载、尺寸被浏览器正确计算后，再创建Quill实例
• 补充自动高度必备的样式规则：

  /* 清除滚动容器的固定高度与滚动约束 */
  #scrolling-container {
    height: auto;
    overflow-y: hidden;
  }
  /* 清除Quill编辑区的固定高度约束 */
  .ql-container {
    height: auto;
    overflow-y: hidden;
  }
  

• 校验初始化配置：如果没有独立的外层滚动包裹容器，直接移除scrollingContainer配置项，Quill会自动以自身根节点作为高度计算的参考对象

注意：bubble主题本身没有固定的常驻显示工具栏，不需要在初始化配置中传入单独的toolbar DOM节点，否则会打乱主题的定位计算逻辑，触发锚点图标错位问题

内容的提问来源于stack exchange，提问作者stalwart1014