vue2富文本编辑---简单实现文字、图片、视频等功能可以同时编辑

lyy2665624982 2024-05-09 原文

效果图：

1、安装

yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save

2、在对应使用页面加入

a、html:

<template>
		<div class="content-box">
<!-- 引入富文本编辑器 start -->
						<template>
							<div style="border: 1px solid #ccc;margin: 20px 20px 20px 30px;">
								<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor"
									:defaultConfig="toolbarConfig" :mode="mode" />
								<Editor style="height: 500px; overflow-y: hidden;" v-model="html"
									:defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
							</div>
						</template>
						<!-- 引入富文本编辑器 end -->
		</div>
</template>

b、js:

在<script>内引入组件和需要用的文件：

<script>
import axios from 'axios'
	import Vue from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
</script>

注册组件在export default {}中：

export default {
//注册组件
		components: {
			Editor,
			Toolbar
		},
}

在data() {}中定义需要用到的参数和配置上传图片视频相关信息


data() {
// 富文本编辑器 -- start
				editor: null, // 编辑
				html: '', // 最后传给后端的富文本字符串
				toolbarConfig: {}, //工具栏配置
				editorConfig: { // 编辑器配置   
					placeholder: '请输入内容...',
					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {
						// 配置上传图片
						uploadImage: {
							customUpload: this.updateImg, // 封装的上传图片和视频方法
						},
						// 配置上传是视频
						uploadVideo: {
							customUpload: this.updateImg,
						}
					}
				},
				mode: 'default', // or 'simple' or 'default'
				// 富文本编辑器 -- end
},

在methods写入公共封装的上传图片和视频的方法

methods: {
			// 上传图片和视频封装
			updateImg(file, insertFn) {
				let _this = this
				// 上传图片接口
				// FormData 对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据 (keyed data)，而独立于表单使用。如果表单enctype属性设为 multipart/form-data，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
				let params = new FormData()
				params.append('file', file) // file 即选中的文件
				// 发送上传图片请求  _this.uploadsImg 上传服务器接口路径    params上传参数
				axios.post(_this.uploadsImg +'goods',params,{ 
					headers: { // 请求头
						 token: getToken(), // 上传token
						"Content-type": 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					//成功提示
					_this.$message({
						type: 'success',
						message: '上传成功!'
					});
					// 最后插入图片到富文本编辑器中   放入的是可访问的全路径
					insertFn(res.data.data); // 这里的res.data.data 是上传到服务器返回的可访问的全路径，有特殊需要需特殊封装
				});
			},
},

在加一个周期函数

// 在页面 销毁前
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		}

a、css:

一定要引入编辑器的样式

<!-- 引入富文本编辑器css -->
<style src="@wangeditor/editor/dist/css/style.css"></style>

我是用的WangEditor实现的，如果想用其他的也可以访问：11款vue富文本编辑器推荐 - 极客库

最后全部我做的就是这样子了，基本效果是可以完成的，至于有特殊配置或者需求的，可以访问

官网：http://www.wangeditor.com/index.html

富文 vue2 editor style vue.js javascript 前端

有关vue2富文本编辑---简单实现文字、图片、视频等功能可以同时编辑的更多相关文章

ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2
查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html
ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2
我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？最佳答案虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2
我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法
ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？最佳答案设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2
我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？最佳答案对于“文本”数