1.首先进入gitee(gitee网址快)中拉代码(git clone)
https://gitee.com/msea/ueditor
2.在下载的文件中打开终端
- 检查是否安装grunt,如果没有 则运行 npm install -g grunt-cli
- npm i
- grunt default
3.执行完第二步就生成一个dist文件,里面有一个index.html可以运行,单独html页面可以参考index.html,在vue中的public文件中创建static文件夹存放dist文件夹并重命名为Ueditor
4.在vue项目中运行npm install vue-ueditor-wrap
5.在main.js中引入import VueUeditorWrap from 'vue-ueditor-wrap',并挂载app.use(VueUeditorWrap)
6.在组件中使用
<template>
<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
<template>
<script >
import {
ref,
toRefs,
reactive,
computed,
watchEffect,
onMounted,
onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
export default {
name: "Ueditor",
setup(props, context) {
let msg = ref("");
let myConfig = {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
toolbars: [
[
"undo", //撤销
"redo", //重做
"bold", //加粗
"indent", //首行缩进
"snapscreen", //截图
"italic", //斜体
"underline", //下划线
"strikethrough", //删除线
"subscript", //下标
"superscript", //上标
"formatmatch", //格式刷
"pasteplain", //纯文本粘贴模式
"selectall", //全选
"horizontal", //分隔线
"removeformat", //清除格
"inserttitle", //插入标题
"cleardoc", //清空文档
"insertcode", //代码语言
"fontfamily", //字体
"fontsize", //字号
"paragraph", //段落格式
"simpleupload", //单图上传
"insertimage", //多图上传
"spechars", //特殊字符
"justifyleft", //居左对齐
"justifyright", //居右对齐
"justifycenter", //居中对齐
"justifyjustify", //两端对齐
"insertorderedlist", //有序列表
"insertunorderedlist", //无序列表
"fullscreen", //全屏
"rowspacingtop", //段前距
"rowspacingbottom", //段后距
"pagebreak", //分页
"imagenone", //默认
"imageleft", //左浮动
"imageright", //右浮动
"attachment", //附件
"imagecenter", //居中
"wordimage", //图片转存
"lineheight", //行间距
"edittip ", //编辑提示
"customstyle", //自定义标题
"autotypeset", //自动排版
"touppercase", //字母大写
"tolowercase", //字母小写
"template", //模板
"scrawl", //涂鸦
],
],
// 初始容器高度
initialFrameHeight: 300,
// 初始容器宽度
initialFrameWidth: "100%",
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: "/api/upload/index",
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况
UEDITOR_HOME_URL: "/public/static/ueditor/",
};
// 返回数据
return {
msg,
};
},
};
</script>
可以看到有一个很重要的配置UEDITOR_HOME_URL,就是刚才存放Ueditor文件夹的目录。
7.效果图
8.其他配置请参考UEditor Docs