动态更改 Quill 占位符

Question

我知道在 Quill 编辑器的实例化中，有一个占位符选项。有没有办法在编辑器实例化后动态更改此占位符？

Answer 1

占位符是用 CSS 规则实现的：

.ql-editor::before { 
   content: attr(data-placeholder);
}

所以你可以quill.root.dataset.placeholder = 'Your new placeholder';

Answer 2

如果你使用的是react-quill

工具提示中的占位符来自 data-link 属性的值。所以你可以在组件挂载完成后用你自己的值替换。

代码如下：

componentDidMount() {
    //Replcae link in placeholder to your own text
    document.querySelector('.ql-tooltip-editor input').setAttribute("data-link", "your own placeholder");
}

注意：我使用的是气泡主题

动态更改 Quill 占位符

Dynamically change Quill placeholder

quill