Vue中使用UEditor

一路繁花的夏
557 阅读3分钟

641.jpg

最近项目中用到了富文本编辑器，先用了CKEditor，wangEditor，TinyEditor，总觉得用着不是很顺手。后来无意中看到UEditor，看了下github ，发现很久没有更新什么东西了。样式上也属于比较经典了，不过功能上还是比较全面的。

废话不多说，直接开始

UEidtor项目地址：github.com/fex-team/ue…

UEidtor文档地址：fex.baidu.com/ueditor/#st…

一、下载、安装

  1. 安装nodejs

    • 下载 nodejs 并安装到本地
    • 安装成功后，打开控制台，在控制台下输入
    •  node -v
    • 如果控制台输出nodejs的版本。那恭喜你，nodejs安装好了，可以使用ctrl+c退出node模式.

  4. 安装打包需要的grunt插件

    • 以终端方式（windows用户用cmd）进入ueditor源码根目录，执行
    •  npm install
    • 这个命令会根据package.json文件，安装打包需要的grunt和grunt插件
    • 安装结束后，会在ueditor目录下出现一个node_modules文件夹

  7. 执行打包命令

    npm install -g grunt-clinpm install grunt --save-devgrunt default
    • 命令完成后，ueditor目录下会出现dist/目录，里面有你要的打包好的ueditor文件夹，默认是utf8-php文件夹，改名为UEditor。

二、使用

将UEditor文件夹放入vue项目的public目录下

在vue项目根目录下安装vue-ueditor-wrap

npm i vue-ueditor-wrap​

<!--组件代码--><template>  <div style="border: 1px solid #ccc;">    <vue-ueditor-wrap v-model="data" :config="myConfig"></vue-ueditor-wrap>  </div></template><script>import Vue from 'vue'import {baseURL} from "@/utils/request";import VueUeditorWrap from 'vue-ueditor-wrap';​​export default Vue.extend({  components: {    VueUeditorWrap,  },  model: {    prop: 'content',    event: 'change'  },  props: {    "content": {      type: String,      default: ''    },  },  data() {    return {      data: "",      myConfig: {        // 设置编辑器不自动被内容撑高        autoHeightEnabled: false,        // 初始容器高度        initialFrameHeight: 320,        // 初始容器宽度        initialFrameWidth: "1000",        // 可以放后台存放路径        serverUrl: baseURL + '/system/ueditor/upload',        // UEditor 是文件的存放路径，        UEDITOR_HOME_URL: "/static/UEditor/",      },    };  },  created() {  },  methods: {},  mounted() {  },  destroyed() {  },​})</script><style></style>​​

关于图片、视频的上传则需要服务端的配合了。以上传图片为例，服务端为springboot。服务端的接口地址为页面中data-->myConfig-->serverUrl字段的值。需要返回json格式的配置。json格式配置实例如下：

{  "imageActionName": "uploadimage",  "imageFieldName": "upfile",  "imageMaxSize": 2048000,  "imageAllowFiles": [    ".png",    ".jpg",    ".jpeg",    ".gif",    ".bmp"  ],  "imageCompressEnable": true,  "imageCompressBorder": 1600,  "imageInsertAlign": "none",  "imageUrlPrefix": "",  "imagePathFormat": "",  "scrawlActionName": "uploadscrawl",  "scrawlFieldName": "upfile",  "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",  "scrawlMaxSize": 2048000,  "scrawlUrlPrefix": "",  "scrawlInsertAlign": "none",  "snapscreenActionName": "uploadimage",  "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",  "snapscreenUrlPrefix": "",  "snapscreenInsertAlign": "none",  "catcherLocalDomain": [    "127.0.0.1",    "localhost",    "img.baidu.com"  ],  "catcherActionName": "catchimage",  "catcherFieldName": "source",  "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",  "catcherUrlPrefix": "",  "catcherMaxSize": 2048000,  "catcherAllowFiles": [    ".png",    ".jpg",    ".jpeg",    ".gif",    ".bmp"  ],  "videoActionName": "uploadvideo",  "videoFieldName": "upfile",  "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",  "videoUrlPrefix": "",  "videoMaxSize": 102400000,  "videoAllowFiles": [    ".flv",    ".swf",    ".mkv",    ".avi",    ".rm",    ".rmvb",    ".mpeg",    ".mpg",    ".ogg",    ".ogv",    ".mov",    ".wmv",    ".mp4",    ".webm",    ".mp3",    ".wav",    ".mid"  ],  "fileActionName": "uploadfile",  "fileFieldName": "upfile",  "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",  "fileUrlPrefix": "",  "fileMaxSize": 51200000,  "fileAllowFiles": [    ".png",    ".jpg",    ".jpeg",    ".gif",    ".bmp",    ".flv",    ".swf",    ".mkv",    ".avi",    ".rm",    ".rmvb",    ".mpeg",    ".mpg",    ".ogg",    ".ogv",    ".mov",    ".wmv",    ".mp4",    ".webm",    ".mp3",    ".wav",    ".mid",    ".rar",    ".zip",    ".tar",    ".gz",    ".7z",    ".bz2",    ".cab",    ".iso",    ".doc",    ".docx",    ".xls",    ".xlsx",    ".ppt",    ".pptx",    ".pdf",    ".txt",    ".md",    ".xml"  ],  "imageManagerActionName": "listimage",  "imageManagerListPath": "/ueditor/jsp/upload/image/",  "imageManagerListSize": 20,  "imageManagerUrlPrefix": "",  "imageManagerInsertAlign": "none",  "imageManagerAllowFiles": [    ".png",    ".jpg",    ".jpeg",    ".gif",    ".bmp"  ],  "fileManagerActionName": "listfile",  "fileManagerListPath": "/ueditor/jsp/upload/file/",  "fileManagerUrlPrefix": "",  "fileManagerListSize": 20,  "fileManagerAllowFiles": [    ".png",    ".jpg",    ".jpeg",    ".gif",    ".bmp",    ".flv",    ".swf",    ".mkv",    ".avi",    ".rm",    ".rmvb",    ".mpeg",    ".mpg",    ".ogg",    ".ogv",    ".mov",    ".wmv",    ".mp4",    ".webm",    ".mp3",    ".wav",    ".mid",    ".rar",    ".zip",    ".tar",    ".gz",    ".7z",    ".bz2",    ".cab",    ".iso",    ".doc",    ".docx",    ".xls",    ".xlsx",    ".ppt",    ".pptx",    ".pdf",    ".txt",    ".md",    ".xml"  ]}​​

三、关于服务端接口token的携带

  1. 简单的来说可以直接将token放在路径上，但是这样的话需要对接口做单独的认证处理，不是很好。

  2. 通过UEditor的js代码，在发请求的之前将token放在header中。

  3. a. 请求配置时添加token，在UEditor/ueditor.all.js中直接找到xhr.open(method, str, ajaxOpts.async)。在该行后面添加代码

      let token = "";      var arr, reg = new RegExp("(^| )" + "Admin-Token" + "=([^;]*)(;|$)");      if (arr = document.cookie.match(reg)) {        token = unescape(arr[2]);      }      xhr.setRequestHeader('Authorization', "Bearer " + token)

如图

image.png

我这里将token放到的cookie中，所以从cookie取的。也可以将token放在LocalStronge，道理是一样的。注意将ueditor.all.js中的代码复制到ueditor.all.min.js中

上传图片时添加token，在UEditor/dialogs/image/image.js中找到uploader.on('uploadBeforeSend', function (file, data, header) {。在里面添加代码

           let token = "";        var arr, reg = new RegExp("(^| )" + "Admin-Token" + "=([^;]*)(;|$)");        if (arr = document.cookie.match(reg)) {          token = unescape(arr[2]);        }        header['Authorization'] = 'Bearer ' + token;

如图

image.png

四、结束 ​一个简单的使用教程，具体UEditor的配置直接看文档即可，文档是中文的，清晰明了。​    ​

avatar
文章
阅读
粉丝