vue中使用Ueditor编辑器

一、下载包：

官网地址：http://fex.baidu.com/ueditor/

git地址： https://github.com/fex-team/ueditor

打开下载后的文件，大致目录，不会有较大差别

二、编译下载文件

1、执行命令安装依赖：

npm install

2、全局安装Grunt-cli：

npm install -g grunt-cli

3、安装到本地：

npm install grunt --save-dev

安装完之后的package.json

4、执行编译命令

grunt default

如果发生grunt : 无法加载文件 D:\nodejs\node_global\grunt.ps1，因为在此系统上禁止运行脚本。可以用管理员打开 Windows PowerShell 运行 set-ExecutionPolicy RemoteSigned 选择Y ，再运行 get-ExecutionPolicy 之后显示 RemoteSigned 就可以正常编译了

三、在Vue项目中引用

编译成功之后会生成一个 dist 文件夹，里面是我们要的编译后的文件，将 utf8-php 文件复制到 vue项目里的 static（或者public）文件夹里，将utf8-php重命名为Ueditor便于使用(注意画红线地方路径要匹配，不然会报错出不来)

1、下载vue-ueditor-wrap

npm i vue-ueditor-wrap

2、在vue项目中引入

<template><div class="ue"><vue-ueditor-wrap v-model="data" :config="myConfig"></vue-ueditor-wrap></div>
</template><script>
import VueUeditorWrap from "vue-ueditor-wrap";export default {components: {VueUeditorWrap,},data() {return {data: "dome",myConfig: {// 设置编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 320,// 初始容器宽度initialFrameWidth: "1000",// 可以放后台存放路径serverUrl: "",// UEditor 是文件的存放路径，UEDITOR_HOME_URL: "/static/ueditor/",},};},
};
</script>

下面来看看要实现的效果：

vue中使用Ueditor编辑器相关推荐

vue中使用Ueditor编辑器 -- 1
一. 下载包: 从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器,官网地址为:http://ueditor.baidu.com/website/download.html ...
在YII2框架中使用UEditor编辑器发布文章
在YII2框架中使用UEditor编辑器发布文章创建文章数据表文章数据表主要有4个字段 id 主键(int) title 标题(varchar) content 内容(text) created ...
用百度富文本编辑器UMeditor实现对html文本的编辑功能，vue中使用UMeditor编辑器
百度 UMeditor 编辑器资源免费下载地址: https://download.csdn.net/download/WanweI897/67403979 该编辑器没有官方文档,不过百度另一个编辑器 ...
vue项目百度ueditor编辑器集成135和秀米，主题图标美化
目录前言效果预览教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用完成! 前言本文介绍vu ...
开发中使用UEditor编辑器的注意事项
最近在一个刚结束的一个项目中使用到了UEditor编辑器,下面总结一下遇到的问题以及使用时需要注意的地方: 1. 使用UEditor插件需要先对其进行路径配置: 在ueditor.config.js文 ...
vue中使用百度编辑器Ueditor
1.下载Ueditor文件 https://ueditor.baidu.com/website/download.html 2.安装 vue-editor-wrap npm i vue-ueditor ...
Vue中使用Ueditor
一.下载Ueditor包官网地址:http://fex.baidu.com/ueditor/ git地址: https://github.com/fex-team/ueditor 打开下载后的文件, ...
在vue中应用ueditor引入秀米，支持图片以及背景图抓取
当前系统中引入的是jsp的ueditor,如果你们也是使用这个,前端可以直接使用我这边配置好的,至于后端的需要开发人员自己配置,当前支持: 秀米保存后图片自动抓取(包括背景图) ueditor插入视频 ...
vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。
需求是做个类似微信公众号那样的图文编辑推广,文章最后要在小程序里面浏览. 开始找到个富文本编辑器'vue-quill-editor' 可以使用,最后出来的内容是html格式,虽然小程序里面可以转译过来 ...

vue中使用Ueditor编辑器

一、下载包：

二、编译下载文件

三、在Vue项目中引用

vue中使用Ueditor编辑器相关推荐

最新文章

热门文章