vue项目引入Ueditor

yumengQAQ

已于 2023-09-08 16:51:03 修改

阅读量302

点赞数

文章标签： vue.js 前端 javascript 编辑器

于 2023-09-08 16:50:14 首次发布

本文链接：https://blog.csdn.net/yumengQAQ/article/details/132762155

版权

vue项目引入Ueditor

查看文档
下载UEditor官方文件
得到文件dist
vue页面处理
运行

查看文档

UEditor官方github链接
https://github.com/fex-team/ueditor
github地址

下载UEditor官方文件

选择zip文件下载并解压
npm i 
全局安装grunt
npm install grunt-cli -g
npm install grunt --save-dev
终端输入
grunt default

得到文件dist

将文件里面的utf8-php改名editor，放入public static下的editor文件中

在这里插入图片描述

在这里插入图片描述
修改ueditor.config.js里面的上图那行

vue页面处理

html部分
在这里插入图片描述
js部分

import '../../public/static/editor/ueditor.config.js'
import '../../public/static/editor/ueditor.all.js'
import '../../public/static/editor/lang/zh-cn/zh-cn.js'
import '../../public/static/editor/ueditor.parse.js'

在这里插入图片描述
css部分

<style  scoped>
@import '../../public/static/editor/themes/default/css/ueditor.min.css';
</style>

运行

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yumengQAQ

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

VUE中引入UEditor富文本编辑器

人间草木

01-28

4180

vue中引入ueditor 1.放入静态资源并配置首先把官网下载的Ueditor资源，放入静态资源src/static中。(你的U盘里有，不用下载了) 2.封装一个组件 ueditor.vue ，放到src/components/里 <template> <div> <script id="editor" type="text/pl...

vue3.0 引入Ueditor（百度编辑器）

qq_20820295的博客

12-24

4510

vue3.0 引入百度编辑器

1 条评论您还未登录，请先登录后发表或查看评论

vue3.0中使用Ueditor

最新发布

qq_25799227的博客

08-20

359

在vue3 中使用百度Ueditor - 富文本编辑器1、下载 UEditor2、将下载后的文件放到UEditor文件夹中，并移动到public文件夹，如图所示：3、安装 vue-ueditor-wrap4、在main.js中引入5、组件现在你已经可以在页面中看到一个初始化之后的UEditor了。

实战 vue3 使用百度编辑器ueditor

MYuanFang的博客

02-26

2635

在开发项目由于需求vue自带对编辑器不能满足使用，所以改为百度编辑器，但是在网上搜索发现都讲得非常乱，所以写一篇使用流程的文章提示：以下是本篇文章正文内容，下面案例可供参考至此你已经可以在页面中看到一个初始化之后的 UEditor 了，并且它已经成功和数据绑定了！api配置可以参考以下网站UEditorPlus 配置文档 | UEditorPlus 使用文档。

Vue中使用Ueditor

weixin_60148344的博客

04-27

1万+

vue中使用Ueditor编辑器

vue3集成ueditor 并将内容同步展示到第三方详细过程

m0_61133767的博客

02-23

1572

在新的ueditor.all.min.js（也就是重命名之前的ueditor.all.js，此时最原始的ueditor.all.min.js已被删除）这个文件，15279行（可能每个人由于ueditor下载的版本不一样，所以行数不一样，建议搜索domUtils.on(iframe, 'load', callback)，直接定位），把这三行注释掉。需求是点编辑，弹出一个窗口，窗口中是ueditor，在ueditor中编辑上图中的描述信息，然后存到数据库，接下来在unity程序中拉取描述信息并展示。

ueditor1.4.3配置过程(包含单独上传文件以及图片的使用)

weixin_34358092的博客

05-18

290

这里使用的是ueditor1.4.3的jsp版本的UTF-8版本. 首先下载相应的ueditor,将ueditor文件夹直接拷贝到项目中,文件结构如下所示: 然后将项目要用的jar包导入到lib目录下,在导入之前要先修改一下ueditor的jar包中的bug,这个可以参考这里点击打开链接接着就是配置jsp目录下的config.json文件了,让它能适应我们的项目,配置内容如下:...

vue集成百度UEditor富文本编辑器使用教程

10-17

接着，在Vue组件的.vue文件中引入UEditor的主要js文件，并在data中声明一个变量来存储编辑器的实例。这个实例将被用于在Vue的其他部分中调用编辑器的方法。在组件的mounted生命周期钩子中，调用UE.getEditor方法...

vue-ueditor-wrap UEditor资源包

03-14

在Vue项目中引入Vue-UEditor-Wrap，你需要先安装这个npm包，通常使用以下命令： ```bash npm install vue-ueditor-wrap --save ``` 或者，如果你的项目使用了Yarn： ```bash yarn add vue-ueditor-wrap ``` 安装...

vue项目中使用ueditor的实例讲解

08-27

在editor组件中，我们首先需要引入ueditor的模块，然后使用ueditor的getEditor方法来获取ueditor的实例。在mounted生命周期中，我们将ueditor的实例赋值给editor变量。在geteditor方法中，我们使用ueditor的...

vue中使用Ueditor编辑器

热门推荐

七月

03-19

1万+

vue中使用Ueditor编辑器 一、下载包：从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为： http://ueditor.baidu.com/website/ 下载解压后会得到如果下文件目录：将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；二、修改配置在ueditor.config.js中修改如下代码： // 这里是配置Ueditor内部进行文件请求时的静态文件服务地址 w...

vue ueditor

10-19

vue 文本编辑

vue中使用ueditor富文本编辑器

08-28

在Vue项目中集成ueditor富文本编辑器是一个常见的需求，特别是在构建后台管理系统时，富文本编辑器能够提供丰富的文本格式化功能。以下是如何在Vue环境中使用ueditor的详细步骤：首先，你需要从ueditor的官方网站...

vue项目中引入ueditor编辑器

weixin_43043455的博客

02-26

4293

公司项目中需要用到编辑器，但是之前并没有接触过，经过网上寻找方法，但是一直报错，很苦恼。不过经过一天思索，终于解决了这个问题。这里从头到尾为跟我一项的小白讲解一下首先创建自己的项目 vue init webpack [name]; 不会搭建vue项目的可以看这里:https://blog.csdn.net/wulala_hei/article/details/85000530 作者Yin_X...

Vue项目3.0中使用百度富文本编辑器ueditor

fuyuan98520的博客

11-27

4495

前言：在开发项目由于需求vue自带对编辑器不能满足使用，所以改为百度编辑器，但是在网上搜索发现都讲得非常对乱，试了几个都没有，原因基本都是2.0版本的vue，3.0vue讲得非常对模糊。废话不多我们现在开始第一步：下载百度编辑器，由于官方原因，现在官方都是使用一个超大版对，我使用对旧版对JSP版，旧版JSP版可下载第二步：（1）将下载对项目重命名到public下的static文件夹下，这里的static文件需自己新建。（2）添加第三步：在项目中运行安装依赖包 npm ..

Vue集成UEditor puls富文本编辑器

ew45218的博客

08-16

9934

Vue 集成 ueditor-puls 富文本编辑器。用的系统框架是ruoyi-vue若依前后端分离版本。

vue中引入富文本编辑器ueditor

Chris__wang的博客

12-28

1342

老规矩，先上效果图首先进入ueditor官网下载ueditor插件，我下的是php版的，下载后放在static文件夹里在main.js里面引入ueditor文件新建一个ueditor组件editor.vue,代码如下 <template> <div id="Ueditor" style="margin:10px"> &l...

vite+vue3使用ueditor，后端PHP

苦夏木禾

02-04

2666

综合所有前端能用的富文本编辑器，功能最好最多的还是百度的富文本编辑器vite+vue3使用ueditor，后端PHP

vue引入ueditor

04-07

1. 下载 UEditor 下载地址：http://ueditor.baidu.com/website/download.html 2. 在 Vue 项目中创建 UEditor 组件在 src/components 目录下创建 UEditor.vue 文件，然后在里面写入以下代码： <template> <div :id="editorId"></div> </template> <script> export default { props: { value: { type: String, default: '', }, config: { type: Object, default: () => ({}), }, }, data() { return { editorId: `editor_${Date.now()}_${Math.random().toString().substr(2)}`, }; }, mounted() { // 异步加载 UEditor.js const id = this.editorId; const config = this.config; const value = this.value; const _self = this; const ueditorScript = document.createElement('script'); ueditorScript.setAttribute('src', 'http://cdn.staticfile.org/ueditor/1.4.3.3/ueditor.all.js'); document.body.appendChild(ueditorScript); ueditorScript.onload = function () { const editor = window.UE.getEditor(id, config); editor.ready(function () { editor.setContent(value); }); editor.addListener('contentChange', function () { _self.$emit('input', editor.getContent()); }); }; }, beforeDestroy() { // 销毁 UEditor 实例 window.UE.getEditor(this.editorId).destroy(); }, }; </script> 3. 在 Vue 项目中使用 UEditor 组件在需要使用 UEditor 的页面中引入 UEditor 组件，然后在 template 中使用即可。 <template> <div class="ueditor-container"> <ueditor v-model="content" :config="config" /> </div> </template> <script> import UEditor from '@/components/UEditor.vue'; export default { components: { UEditor, }, data() { return { content: '', config: { initialFrameHeight: 500, autoHeightEnabled: false, autoFloatEnabled: false, toolbars: [ ['source', 'undo', 'redo', 'bold', 'italic', 'underline', 'strikethrough', 'fontfamily', 'fontsize', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'insertorderedlist', 'insertunorderedlist', 'blockquote', 'link', 'unlink', 'inserttable', 'deletetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells', 'removeformat', 'cleardoc', 'preview'], ], }, }; }, }; </script>