vue-ueditor-wrap百度富文本的使用

已于 2023-04-06 17:26:53 修改
阅读量821 收藏 2
点赞数
分类专栏： vue-ueditor-wrap 文章标签： vue.js javascript 前端
于 2023-03-31 12:02:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52883064/article/details/129875979
版权

我的ueditor的文件放到public下的static下

ueditor我取的是下面链接的项目里的，因为其他的总是少几个文件，真是愁GitHub - haochuan9421/vue-ueditor-wrap: 🚴Vue + 🚄UEditor + v-model双向绑定🚀

 对应的这个得配置，UEDITOR_HOME_URL: '/static/ueditor/' ,

下载vue-ueditor-wrap : npm install vue-ueditor-wrap

 文件的引入，具体路径看自己的文件夹

<div class="projBox">
	    <vue-ueditor-wrap
	      ref="uEditor"
	      v-model="mainContent"
		  :config="myConfig"
		  @ready="ready"
		  @beforeInit="addCustomButtom" 
	    ></vue-ueditor-wrap>
		<el-upload
		  :action="uploadUrl"
		  :before-upload="handleBeforeUpload"
		  :on-success="handleUploadSuccess"
		  :on-error="handleUploadError"
		  name="file"
		  :show-file-list="false"
		  :headers="headers"
		  style="display: none"
		  ref="upload"
		>
		</el-upload>
</div>

利用addCustomButtom 方法增加自定义按钮，this.img是我自己引入的项目里的图片文件，使用新增的按钮的点击方法触发上传图片，避免了ueditor原本复杂的上传图片的配置

methods: {
			ready(n) {
				this.editorInstance=n
			},
			addCustomButtom (editorId) {
			      var that = this
			      window.UE.registerUI('test-button',  (editor, uiName) => {
			        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
			        // editor.registerCommand(uiName, {
			        //   execCommand: function () {
			        //     editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
			        //   }
			        // })
			
			        // 创建一个 button
			        const btn = new window.UE.ui.Button({
			          // 按钮的名字
			          name: uiName,
			          // 提示
			          title: '上传图片',
			          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
			          cssRules: 'background-image: url('+this.img+') !important;background-size: cover',
			          // 点击时执行的命令
			          onclick: function () {
							console.log('xxx')
							console.log(that.$refs.upload)
							that.$refs.upload.$children[0].$refs.input.click();
			          }
			        })
			        // 粘贴后的事件
			        editor.addListener('afterpaste', function (cmd,html) {
			        
			        })
			        // 粘贴前的事件
			        editor.addListener('beforepaste',(cmd, html)=> {
			
			        })
			
			        // 因为你是添加 button，所以需要返回这个 button
			        return btn
			      })
			},
			// 上传前校检格式和大小
			handleBeforeUpload(file) {
			  // 校检文件大小
			  if (this.fileSize) {
			    const isLt = file.size / 1024 / 1024 < this.fileSize;
			    if (!isLt) {
			      this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
			      return false;
			    }
			  }
			  return true;
			},
			handleUploadSuccess(res, file) {
                const that = this
                // 创建实例对象
				var img = new Image()

				// 图片地址
				img.src = imgURL
//根据图片大小，超过375则使用固定百分比，适配移动端的显示，做到移动和pc展示一致
				img.onload = function(){
					if(img.width > 375){
						that.editorInstance.execCommand('inserthtml', `<img style="width:98%;" src="`+(process.env.VUE_APP_API_URL + res.enclosureId.enclosureRoute) +`" >`);
					}else{
						that.editorInstance.execCommand('inserthtml', `<img src="`+(process.env.VUE_APP_API_URL + res.enclosureId.enclosureRoute) +`" >`);
					}
				};
			  
			},
			handleUploadError() {
			  this.$message.error("图片插入失败");
			},

		},

 ueditor的配置可以自行去ueditor的ueditor.config.js文件里配置，也可像我这样页面中配置，

data() {
			return {
				editorInstance: null,
				mainContent: '',
				uploadUrl: process.env.VUE_APP_BASE_API + "/system/enclosure/upload",
				headers: {
					Authorization: "Bearer " + getToken()
				},
				type: 'url',
				fileSize: 5,
				img: addimage,
				myConfig: {
					toolbars: [
						[
							'anchor', //锚点
							'undo', //撤销
							'redo', //重做
							'bold', //加粗
							'indent', //首行缩进
							// 'snapscreen', //截图
							'italic', //斜体
							'underline', //下划线
							'strikethrough', //删除线
							'subscript', //下标
							'fontborder', //字符边框
							'superscript', //上标
							'formatmatch', //格式刷
							'source', //源代码
							'blockquote', //引用
							'pasteplain', //纯文本粘贴模式
							'selectall', //全选
							// 'print', //打印
							// 'preview', //预览
							'horizontal', //分隔线
							'removeformat', //清除格式
							'time', //时间
							'date', //日期
							'unlink', //取消链接
							'insertrow', //前插入行
							'insertcol', //前插入列
							'mergeright', //右合并单元格
							'mergedown', //下合并单元格
							'deleterow', //删除行
							'deletecol', //删除列
							'splittorows', //拆分成行
							'splittocols', //拆分成列
							'splittocells', //完全拆分单元格
							'deletecaption', //删除表格标题
							'inserttitle', //插入标题
							'mergecells', //合并多个单元格
							'deletetable', //删除表格
							'cleardoc', //清空文档
							'insertparagraphbeforetable', //"表格前插入行"
							'insertcode', //代码语言
							'fontfamily', //字体
							'fontsize', //字号
							'paragraph', //段落格式
							// 'simpleupload', //单图上传
							// 'insertimage', //多图上传
							'edittable', //表格属性
							'edittd', //单元格属性
							'link', //超链接
							// 'emotion', //表情
							'spechars', //特殊字符
							'searchreplace', //查询替换
							// 'map', //Baidu地图
							// 'gmap', //Google地图
							// 'insertvideo', //视频
							'help', //帮助
							'justifyleft', //居左对齐
							'justifyright', //居右对齐
							'justifycenter', //居中对齐
							'justifyjustify', //两端对齐
							'forecolor', //字体颜色
							'backcolor', //背景色
							'insertorderedlist', //有序列表
							'insertunorderedlist', //无序列表
							'fullscreen', //全屏
							'directionalityltr', //从左向右输入
							'directionalityrtl', //从右向左输入
							'rowspacingtop', //段前距
							'rowspacingbottom', //段后距
							// 'pagebreak', //分页
							'insertframe', //插入Iframe
							'imagenone', //默认
							'imageleft', //左浮动
							'imageright', //右浮动
							// 'attachment', //附件
							'imagecenter', //居中
							'wordimage', //图片转存
							'lineheight', //行间距
							'edittip ', //编辑提示
							'customstyle', //自定义标题
							'autotypeset', //自动排版
							// 'webapp', //百度应用
							'touppercase', //字母大写
							'tolowercase', //字母小写
							// 'background', //背景
							'template', //模板
							// 'scrawl', //涂鸦
							// 'music', //音乐
							'inserttable', //插入表格
							// 'drafts', // 从草稿箱加载
							'charts', // 图表
						]
					],
					enableAutoSave: false,
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 400,
					// 初始容器宽度
					initialFrameWidth: '100%',
					// 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
					serverUrl: process.env.VUE_APP_BASE_API + "/system/enclosure/upload",
					// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
					UEDITOR_HOME_URL: '/static/ueditor/',
					uploadUrl: process.env.VUE_APP_BASE_API + "/system/enclosure/upload",
					token: 'Bearer ' + getToken(),

				}
			}
		}

 到这就可以用了，反正我可以了......

 参考文章https://blog.csdn.net/weixin_44872995/article/details/121614349

qq_52883064
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-ueditor-wrap-demo:基于vue-cli的演示，用于vue-ueditor-wrap
05-01
Vue-Ueditor-Wrap-Demo 基于vue-cli的演示，用于 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # deploy to remote server npm run deploy # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
VUE_vue+ueditor，vue使用富文本
小歪博客
12-07 788
UEditor是百度的一个javascript富文本编辑器，功能强大，常见的富文本编辑器中总有它的一席之地，今天我们就写一个简单的demo来学习如何在vue-cli中使用它，以及图片上传！ 第一步，先下载依赖 npm i vue-ueditor-wrap -S 第二步，引入到项目中 import VueUeditorWrap from 'vue-ueditor-wrap' 第三步，注册组件 components: { VueUeditorWrap } 第四步，在模板中使用组件 <temp
百度富文本编辑器配置（vue3）
最新发布
Mxy18851251178的博客
04-07 629
UEditor 并不支持通过 npm 的方式来安装，vue-ueditor-wrap 也只是一个 Vue 组件，组件本身并不是。UEditor 官方并没有提供 Node.js 版的示例代码，有需求的同学可以参考。目录下，比如下面是一个由 Vue CLI（v3+）创建的项目，静态资源目录就是 public。今天分享一下我做的项目里面的一个百度富文本的配置问题，安装配置流程以及如何解决的。说明：不同语言的 UEditor，前端部分，并无区别，只是包含了对应语言的。了解 UEditor 基本使用，请参考。
vue-ueditor-wrap php UEditor富文本编辑器配置说明
dwt11的世界
02-21 2279
官方地址：https://github.com/HaoChuan9421/vue-ueditor-wrap VUE: <el-form-item label="内容" prop="content"> <vue-ueditor-wrap v-model="postForm.content" ...
vue使用百度富文本
一个努力不被优化的程序员
10-30 632
vue使用百度富文本
Vue 引入Ueditor修改样式仿照Word文档
xiaoqingqing的博客
09-15 1987
Vue 引入Ueditor修改样式仿照Word文档前言Vue 引入Ueditor仿照word文档进行样式修改合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 项目中有涉及到对文本生成和文本内容编辑的需求，选择了百度的Ueditor。项目
vue项目：集成富文本编辑器 - 百度ueditor（vue-ueditor-wrap）
热门推荐
snowball的博客
12-29 1万+
6.2.2.3、body上属性contentEditable显示为true，，设置为false即可禁止编辑。6.2.2.4、在ready方法调用（递归）方法，同时处理ueditor编辑器id后最不为0的情况。7.1、解决section标签没有style、class的问题，否则加了样式也不能生效。4.1、在开发的业务文件引入vue-ueditor-wrap、配置文件。vue项目：ueditor（vue-ueditor-wrap）3.3、vue项目 安装插件vue-ueditor-wrap。
vue-ueditor-wrap 是什么？怎么使用？
轻风细雨_林木木
01-18 1356
是什么一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。UEditor 并不支持通过 npm 的方式来安装，也只是一个 Vue 组件，组件本身并不是 UEditor 的 Vue 版。
vue-ueditor-wrap富文本编辑器。
CCKing7的博客
04-20 993
2.下载最新编译的UEditor,并放到public目录下。1.上传文件地址serverUrl需配置，不然会报错。3.引入并注册VueUeditorWrap组件。
vue使用ueditor（vue-ueditor-wrap）
为啥不能换名字的博客
11-08 967
解析公众号富文本
Vue集成UEditor puls富文本编辑器
ew45218的博客
08-16 7221
Vue 集成 ueditor-puls 富文本编辑器。用的系统框架是ruoyi-vue若依前后端分离版本。
vue-ueditor-wrap UEditor资源包
03-14
帮助想要使用vue-ueditor-wrap的伙伴们更便捷的获取到这个资源运行项目
vue-ueditor-wrap的ueditor
01-12
富文本文本编辑器vue-ueditor-wrap需要下载ueditor，并将其复制到public目录下
vue-ueditor-wrap：:person_biking:Vue+:high-speed_train:UEditor+ v-模型双向绑定:rocket:https：haochuan9421.github.iovue-ueditor-wrap-demo
02-06
Vue-Ueditor-Wrap Vue + UEditor + v-model双向绑定。UEditor仍然是内部使用频率较高的富文本编辑器，而Vue又具有广泛的使用，将结合，是很多Vue开发者的切实需求。自己在写公司项目时封装了这个组件，它省去了初始...
使用vue-ueditor-wrap组件时导入的百度ueditor资源包
05-22
使用vue-ueditor-wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用...
vue常用的文本编辑器vue-ueditor-wrap
daming2019的博客
10-28 3126
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
vue中使用vue-ueditor-wrap富文本
想好了再写！
03-10 3834
1.首先通过官网进行euditor的下载（我下载的是最版本1.4.3.3） 下载地址 2.将下载好的压缩包解压（目录如下：） 3.进入解压的目录安装依赖包 npm install（此步骤必不可少） 4.安装grunt（npm install -g grunt-cli）然后命令行运行 grunt default 构建会生成一个dist文件夹（此步骤必不可少，非常重要，否则目录结构下不会有dist文件夹生成！！！） 目录结构如下： 5.将生成的dist文件夹下的utf8-php进行重命名 修改后的
Vue中使用富文本ueditor
qq_35946021的博客
03-02 1636
vue-ueditor-wrap 组件它对ueditor进行了二次封装，集成秀米等第三方插件也方便。注意 vue-ueditor-wrap v3 仅支持 Vue 3。this.imageList数组内容有属性URL为图片地址就行了。以上是我使用elementUI正常上传图片的请求及返回参数。返回的是图片绝对路径，插入的图片就需要直接拿data值。因为后端已经有写好图片上传接口了，但是有时候需要的。都是不符合的，此时就是需要我们前端去自定义了。多选上传图片的话就没问题了。要解决图片上传问题，
vue集成vue-ueditor-wrap富文本编辑器
qq_55162766的博客
12-05 1193
最近项目需要使用到富文本编辑器，因为项目关系需要使用到vue-ueditor-wrap富文本编辑器。经过了几小时的研究终于成功集成了
vue-ueditor-wrap 怎么富文本编辑器怎么禁止编辑
08-11
为了禁止vue-ueditor-wrap富文本编辑器的编辑功能，你可以在使用组件的地方加上一个属性来禁用编辑。根据引用和引用中的代码，你可以在main.js和App.vue中添加以下代码： 在main.js中： ``` import VueUeditorWrap from 'vue-ueditor-wrap' Vue.component('vue-ueditor-wrap', { ...VueUeditorWrap, props: { disabled: { type: Boolean, default: false } }, mounted: function() { if (this.disabled) { this.$refs.ueditor.setDisabled() } } }) new Vue({ render: h => h(App), }).$mount('#app') ``` 在App.vue中： ``` <template> <div id="app"> <VueUeditorWrap :disabled="true"></VueUeditorWrap> </div> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap' export default { components: { VueUeditorWrap } } </script> ``` 这样设置之后，vue-ueditor-wrap富文本编辑器就会被禁用，用户将无法编辑其中的内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-ueditor-wrap百度富文本的使用](https://blog.csdn.net/qq_52883064/article/details/129875979)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue项目引入vue-ueditor-wrap富文本编辑器](https://blog.csdn.net/weixin_45966674/article/details/123498254)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值