vue 使用百度编辑器ueditor

来源：互联网发布：全国地区代码表 sql 编辑：程序博客网时间：2024/06/03 11:27

1、先从百度管网下载资源 http://ueditor.baidu.com/website/download.html ，然后解压到静态资源 static(和src同级) 文件中，然后在单独起一个组件 UE.vue

<template>  <div>    <script id="editor" type="text/plain"></script>  </div></template><script>import '../../../static/utf8-jsp/ueditor.config.js'  //根据自己文件的路径接入import '../../../static/utf8-jsp/ueditor.all.min.js'import '../../../static/utf8-jsp/lang/zh-cn/zh-cn.js'import '../../../static/utf8-jsp/ueditor.parse.min.js'  export default {    name: 'UE',    data () {      return {        editor: null      }    },    mounted() {      const _this = this;           this.editor = UE.getEditor('editor', {             BaseUrl: '',             UEDITOR_HOME_URL: this.url_head + '/static/utf8-jsp/', //这个是静态资源的路径            // toolbars:[]  //编辑器里需要用的功能          }); // 初始化UE      this.editor.addListener("ready", function () {          _this.editor.setContent(''); // 确保UE加载完成后，放入内容。        });      console.log(this.text);    },    methods: {      getUEContent() { // 获取内容方法        return this.editor.getContent()      },      testMsg(){        const _this = this;        this.defaultMsg = this.text;        console.log(this.defaultMsg);        this.editor.setContent(this.defaultMsg); // 确保UE加载完成后，放入内容。      }    },    watch : {      'text' : 'testMsg'    },    props : ['text'], //接收传过来的文章    destroyed() {      this.editor.destroy();    }  }</script><style type="text/css">  #editor{height: 500px;}</style>

2、在需要用的地方接入 UE.vue 组件，根据内容给编辑器传递参数

<template><UE :text="addData.text" ref="ueBox"></UE></template>

import UE from '../page/UE.vue';export default{data(){return{ uedata: [], addData : {text : '123',},imgDataUrl : '',formLabelWidth : '140px'}},methods : {parentClick(){this.addData.text = '21312312'}},mounted : function() {},components : {UE,}}

3、编辑器的上传图片问题

打开 ueditor.config.js 文件，在里面找到

    window.UEDITOR_CONFIG = {        //为编辑器实例添加一个路径，这个不能被注释        UEDITOR_HOME_URL: URL        // 服务器统一请求接口路径       // , serverUrl: URL + "jsp/controller.jsp"   //改掉它…………}

阅读全文

0 0