基于vue-quill-editor的富文本Demo

基于Vue的一个富文本编译器的插件,安装并简单使用步骤:1、项目:一个前端基于vue框架的项目。我用的是一个项目模板(下载路径:https://github.com/nolimits4web/Framework7-Vue-Webpack-Template) 按网址上教程配置模板。接下来就是关于vue-quill-editor的安装步骤了。2、下载:npm install vue-quill-e...
摘要由CSDN通过智能技术生成

基于Vue的一个富文本编译器的插件,安装并简单使用步骤:

1、项目:一个前端基于vue框架的项目。我用的是一个项目模板(下载路径:https://github.com/nolimits4web/Framework7-Vue-Webpack-Template) 按网址上教程配置模板。接下来就是关于vue-quill-editor的安装步骤了。

2、下载:npm install vue-quill-editor --save

3、配置:app.js文件中添加代码

		import vueQuillEditor from 'vue-quill-editor';
		// require styles 引入样式
		import 'quill/dist/quill.core.css';
		import 'quill/dist/quill.snow.css';
		import 'quill/dist/quill.bubble.css';
		
		Vue.use(vueQuillEditor);

4、配置:创建一个组件文本,名为 vueQuillEditor.vue,代码如下

		<template>
		  <div>
		    <quill-editor
				ref="myQuillEditor" 
				:options="editorOption"
				@focus="$emit('onInputFocus')"
				@blur="$emit('onInpu
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Quill Editor是一个Vue富文本编辑器插件,它可以用于在Vue项目中进行富文本编辑。您可以通过安装Vue-Quill-EditorQuill来使用它。 关于图片预览的问题,根据提供的引用内容,我没有找到直接关于富文本图片预览的说明。但是,根据Vue Quill Editor的使用方法,您可以使用自定义的toolbar来实现相关功能。您可以在toolbar中添加一个按钮,当用户点击该按钮时,触发一个方法来预览富文本中的图片。您可以使用Vue的v-if指令根据条件来显示或隐藏图片预览的组件。具体实现的代码如下所示: ``` <template> <div class="editor"> ... <!-- 自定义toolbar中增加图片预览按钮 --> <div id="my-toolbar"> ... <button @click="previewImages">预览图片</button> </div> ... </div> </template> <script setup> import { QuillEditor, Quill } from '@vueup/vue-quill' import { getCurrentInstance, ref } from "vue"; const { proxy } = getCurrentInstance(); const previewImages = () => { // 实现预览图片的逻辑 // 可以使用Quill的API获取富文本中的图片,然后展示在预览组件中 } </script> ``` 在上述代码中,您可以在`previewImages`方法中实现预览图片的逻辑。您可以使用Quill的API获取富文本中的图片,并将其显示在预览组件中。 需要注意的是,具体的图片预览逻辑和组件实现取决于您的具体需求和项目实现。您可以根据自己的情况进行适当的调整和扩展。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue-Quill-Editor富文本编辑器的使用教程](https://download.csdn.net/download/weixin_38701952/13980065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用vue-quill展示富文本内容](https://blog.csdn.net/qq_36576430/article/details/127793120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值