vue-quill富文本编辑器实现图片缩放
安装环境
官网:https://vueup.github.io/vue-quill/guide/modules.html
npm安装:npm install @vueup/vue-quill@latest --save
pnpm安装:pnpm add @vueup/vue-quill@latest
安装模块quill-blot-formatter
npm:npm install --save quill-blot-formatter
pnpm:npm add quill-blot-formatter
// 声明文本框能使用的工具
const toolbar = ref([
'background',
'bold',
'color',
'font',
'code',
'italic',
'link',
'size',
'strike',
'script',
'underline',
'blockquote',
'header',
'indent',
'list',
'align',
'direction',
'code-block',
'image',
'video'
])
// modules 属于 QuillEditor的配置项
const modules = {
name: 'blotFormatter', // 名称
module: BlotFormatter, // 模块
options: toolbar //工具栏
}
组件:
<el-form-item label="文章内容" prop="content">
<div class="editor">
<QuillEditor
:modules="modules"
toolbar="full"
v-model:content="formModel.content"
contentType="html"
/>
</div>
</el-form-item>
效果展示:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~