记一次解决 quill(vue-quill-editor) 编辑器中莫名多出一行“<p><br></p>”的过程...
时间: 2023-11-16 11:36:57 浏览: 37
好的,我会尽力回答你的问题。
针对 quill 编辑器中出现“<p><br></p>”这种情况,一般有以下几种解决方式:
1. 利用 quill 的 API:使用 quill.getContents() 获取编辑器内容,然后替换掉多余的“<p><br></p>”,最后再用 quill.setContents() 重新设置编辑器内容。
2. 利用 Vue 的生命周期函数:在 mounted 钩子函数中,通过 quill.getSelection() 获取光标位置,然后通过 quill.deleteText() 删除多余的“<p><br></p>”。
3. 利用 quill 的事件监听:监听 editor-change 事件,在事件回调函数中,通过 quill.getContents() 获取编辑器内容,然后替换掉多余的“<p><br></p>”,最后再用 quill.setContents() 重新设置编辑器内容。
以上三种方式均可以解决 quill 编辑器中“<p><br></p>”多出一行的问题,具体选择哪种方式可以根据实际情况来定。希望能对你有所帮助。
相关问题
vue项目使用Quill 富文本编辑器 <quill-editor>
是的,Vue 项目可以使用 Quill 富文本编辑器。你需要先在项目中安装 Quill,然后在需要使用富文本编辑器的组件中引入 Quill,并在模板中使用 <quill-editor> 标签。
以下是一个基本的使用示例:
1. 安装 Quill:
```
npm install quill
```
2. 在需要使用富文本编辑器的组件中引入 Quill:
```javascript
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
```
3. 在模板中使用 <quill-editor>:
```html
<template>
<div>
<quill-editor v-model="content" />
</div>
</template>
<script>
export default {
data() {
return {
content: '',
}
},
}
</script>
```
注意,这里使用了 v-model 绑定了编辑器的内容,你可以将其绑定到组件的 data 中,以便在其他地方使用编辑器中的内容。
vue-quill-editor富文本编辑器使用步骤
好的,关于vue-quill-editor富文本编辑器的使用步骤,可以按照以下步骤进行:
1. 安装vue-quill-editor
```
npm install vue-quill-editor --save
```
2. 在需要使用的组件中引入vue-quill-editor
```
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
```
3. 在模板中使用vue-quill-editor
```
<template>
<div>
<quill-editor v-model="content"></quill-editor>
</div>
</template>
```
其中,v-model绑定的是编辑器中的内容。
以上就是vue-quill-editor富文本编辑器的使用步骤。