vue使用百度编辑器ueditor,ueditor1.5.0下载

vue使用百度编辑器ueditor

npm i vue-ueditor-wrap

封装组件

<template>
	<div class="ueditorContainer">
		<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 是文件的存放路径，vue2是放在public文件夹下
        UEDITOR_HOME_URL: "/UEditor/",
      },
    };
  },
};
</script>

<style lang="scss">
	.ueditorContainer{
		
	}
</style>
 

下载vue-ueditor-wrap之后,还需要下载百度编辑器源码,如下

ueditor1.5.0下载地址

github只提供了1.4.3的下载地址, 最新1.5.0需要自己下载,不知道他为什么这么搞

1.到ueditor的github地址 克隆项目

git clone [e-mail]:fex-team/ueditor.git

2.需要全局安装grunt, cmd要用管理员身份打开才能执行

npm i -g grunt-cli

3.执行grunt default 下载

grunt default

下载后dist 文件夹就是需要引入vue项目的代码

自动下载的是PHP版本

里面长这样

放到vue 项目的public 下即可

由于上述方法比较麻烦, 我已经提交压缩包, 直接下载即可,PHP版本, 链接如下,0积分

https://download.csdn.net/download/weixin_42127307/86438343?spm=1001.2014.3001.5503