vue-quill-editor formattext添加class样式
时间: 2023-11-24 16:50:08 浏览: 197
据提供的引用内容,可以通过在`formatText`方法中添加`class`属性来为文本添加样式。具体实现方法如下所示:
```javascript
<template>
<div class="ql-container ql-snow">
<div class="content ql-editor" v-html="infoList.subContent" />
</div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
data() {
return {
infoList: {
subContent: '<p>这是一段需要添加样式的文本</p>'
}
}
},
methods: {
formatText() {
const editor = this.$refs.myQuillEditor.quill
const range = editor.getSelection()
const format = {
class: 'my-class' // 添加的样式名
}
editor.formatText(range.index, range.length, format)
}
}
}
</script>
```
在上述代码中,我们通过在`format`对象中添加`class`属性来为文本添加样式。在`formatText`方法中,我们获取了`Quill`编辑器实例,并使用`formatText`方法为选中的文本添加样式。
阅读全文