下载Ueditor

链接: https://pan.baidu.com/s/1FkMM5yGKNhH7phRWJ0FcdA?pwd=wjy4

使用Ueditor

1. 解压下载的Ueditor，放在项目的public下
   
2. 在ueditor.config.js中配置服务器统一请求接口路径，我使用的Java编写的接口
   
3. public下index.html引入ueditor相关js文件
   

    <script type="text/javascript" charset="utf-8" src="./UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./UEditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="./UEditor/lang/zh-cn/zh-cn.js"></script>   

4. 封装成components组件
   components文件夹下创建Ueditor\index.vue
   index.vue内容如下

<template>
  <div>
    <script :id="randomId" type="text/plain" style="height: 300px;"></script>
  </div>
</template>

<script>

export default {
  name: 'UE',
  props: {
    value: {
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      randomId: 'editor_' + Math.random() * 100000000000000000,
      // 编辑器实例
      instance: null,
      ready: false
    }
  },
  watch: {
    value: function (val) {
      if (val != null && this.ready) {
        // eslint-disable-next-line no-undef
        this.instance = UE.getEditor(this.randomId)
        this.instance.setContent(val)
      }
    }
  },
  mounted () {
    this.initEditor()
  },

  beforeDestroy () {
    if (this.instance !== null && this.instance.destroy) {
      this.instance.destroy()
    }
  },
  methods: {
    initEditor () {
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        this.instance = UE.getEditor(this.randomId)
        this.instance.addListener('ready', () => {
          this.ready = true
          this.$emit('ready', this.instance)
        })
      })
    },
    getUEContent () {
      return this.instance.getContent()
    },
    setText (con) {
      // eslint-disable-next-line no-undef
      this.instance = UE.getEditor(this.randomId)
      this.instance.setContent(con)
    }
  }
}
</script>

5. App.vue中使用

<template>
  <div id="app">
    <Ueditor v-model="title" @ready="editorReady" />
  </div>
</template>

<script>
import Ueditor from '@/components/Ueditor'

export default {
  name: 'App',
  components: {
    Ueditor
  },
  data() {
    return {
      title: 'init'
    };
  },
  created() {
    // console.log('111111111');
  },
  methods: {
    editorReady (instance) {
      instance.setContent(this.title)
    }, 
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

大佬GitHub

https://github.com/sanluan/PublicCMS