vue 使用百度编辑器ueditor

拼搏现实的明天。 2022-06-03 00:37 299阅读 0赞

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 组件 ，根据内容给编辑器传递参数

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"   //改掉它
    …………
    }