vue-quill-editor怎么实现回车换行
时间: 2023-11-24 15:42:32 浏览: 381
浅谈vue中使用编辑器vue-quill-editor踩过的坑
对于vue-quill-editor中的回车换行功能,可以通过设置quill组件的对应属性来实现。具体来说,需要在配置中添加一个空字符的注册器,然后在回车键的处理函数中插入一个空字符即可。以下是示例代码:
```javascript
<template>
<quill-editor v-model="content" ref="myQuillEditor"></quill-editor>
</template>
<script>
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data () {
return {
content: ''
}
},
mounted: function () {
let toolbar = this.$refs.myQuillEditor.quill.getModule('toolbar')
toolbar.addHandler('image', this.selectLocalImage)
const self = this
Quill.register('\u200B', class ZeroWidthSpace extends Quill.import('blots.inline')) {
static create() {
return super.create('\u200B')
}
})
this.$refs.myQuillEditor.quill.keyboard.addBinding({
key: 'enter',
shiftKey: false
}, function (range) {
self.$refs.myQuillEditor.quill.insertText(range.index, '\u200B')
self.$refs.myQuillEditor.quill.insertText(range.index + 1, '\n')
self.$refs.myQuillEditor.quill.setSelection(range.index + 2)
})
},
}
</script>
```
其中,insertText方法用于在指定位置插入字符,setSelection方法用于设置光标位置。对于回车键,需要在keyboard模块中添加对应的key binding,同时插入一个空字符和一个换行符。\u200B表示一个零宽度空格,因此不会影响最终的渲染结果。
阅读全文