可以通过自定义 Quill 的 toolbar 实现图片的拉伸、放大和缩小。
首先，你需要在 `
vue-quill-editor` 的配置中添加一个自定义的 toolbar。例如：
```
<quill-editor
v-model="content"
:options="editorOption"
>
<div v-if="editorOption.toolbar">
<span class="ql-formats">
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-stretch"></button>
<button class="ql-zoom-in"></button>
<button class="ql-zoom-out"></button>
</span>
<span class="ql-formats">
<button class="ql-image"></button>
</span>
</div>
</quill-editor>
```
然后，在 `mounted()` 钩子函数中获取 Quill 实例，并添加自定义的 toolbar 按钮的逻辑。例如：
```
mounted() {
this.$nextTick(() => {
const quill = this.$refs.myQuillEditor.quill
const stretchButton = quill.getModule('toolbar').container.querySelector('.ql-stretch')
const zoomInButton = quill.getModule('toolbar').container.querySelector('.ql-zoom-in')
const zoomOutButton = quill.getModule('toolbar').container.querySelector('.ql-zoom-out')
stretchButton.addEvent
Listener('click', function() {
//
todo: 进行图片拉伸的逻辑
})
zoomInButton.addEvent
Listener('click', function() {
//
todo: 进行图片放大的逻辑
})
zoomOutButton.addEvent
Listener('click', function() {
//
todo: 进行图片缩小的逻辑
})
})
}
```
其中，`quill.getModule('toolbar').container` 获取到的是 Quill 的 toolbar 容器，可以通过 `querySelector()` 方法获取到自定义按钮的 DOM 元素并添加事件监听器。
接下来，你需要实现图片拉伸、放大和缩小的逻辑。可以通过 Quill 的 Delta API 获取到当前选中的图片，并对其属性进行修改。例如：
```
stretchButton.addEvent
Listener('click', function() {
const range = quill.getSelection()
if (!range) return
const [image] = quill.getSemanticHTML(range.index, range.length).match(/<img.*?>/g)
if (image) {
quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ image: { ...Quill.Attributor.Attribute
List.fromHTML(image), width: '200px', height: 'auto' } }))
}
})
```
上面的代码中，首先获取到当前选中的图片（即 `<img>` 标签），然后通过 Quill 的 `updateContents()` 方法修改图片的属性，例如将其宽度设置为 200px，高度设置为自适应。
类似地，你可以实现图片的放大和缩小。例如：
```
zoomInButton.addEvent
Listener('click', function() {
const range = quill.getSelection()
if (!range) return
const [image] = quill.getSemanticHTML(range.index, range.length).match(/<img.*?>/g)
if (image) {
const attr = Quill.Attributor.Attribute
List.fromHTML(image)
const width = parseInt(attr.width.replace('px', ''))
const height = parseInt(attr.height.replace('px', ''))
quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ image: { ...attr, width: `${width + 10}px`, height: `${height + 10}px` } }))
}
})
zoomOutButton.addEvent
Listener('click', function() {
const range = quill.getSelection()
if (!range) return
const [image] = quill.getSemanticHTML(range.index, range.length).match(/<img.*?>/g)
if (image) {
const attr = Quill.Attributor.Attribute
List.fromHTML(image)
const width = parseInt(attr.width.replace('px', ''))
const height = parseInt(attr.height.replace('px', ''))
if (width > 10 && height > 10) {
quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ image: { ...attr, width: `${width - 10}px`, height: `${height - 10}px` } }))
}
}
})
```
上面的代码中，首先获取到当前选中的图片的宽度和高度，然后将其分别增加或减少 10px。需要注意的是，当图片的宽度或高度小于等于 10px 时，不能再继续缩小了。
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
