nuxt + ueditor国际化

官方的实例：

http://ueditor.baidu.com/website/onlinedemo.html

把官网页面扒下来，取其精华，终于实现了中英文，我好难

项目目录结构：

UE/index.js:

/**
 * 百度UE
 */
import Vue from 'vue'
import UE from './src/main'

UE.install = () => {
  Vue.component(UE.name, UE)
}

export default UE

UE/src/main.vue

<template>
   <div>
     <script :id="randomId" type="text/plain"></script>
   </div>
</template>

 <script>
   import { api } from '@/ui-domain';
   import Storage from '@/utils/storage'

   export default {
     name: 'UE',
     data() {
       return {
         /** 编辑器实例 */
         editor: null,

         /** 每个编辑器生成不同的id,以防止冲突 */
         // randomId: 'editor_1' + parseInt(Math.random() * 10000 + 1),
         randomId: 'editor',

         ready: false
       }
     },
     props: {
       defaultMsg: {
         type: String,
         default: ''
       },
       config: {
         type: Object,
         default: () => ({
           lang: /^en/.test(Storage.getItem('language')) ? 'en' : 'zh-cn',
           serverUrl: `${api.base}/ueditor/`
         })
       }
     },
     watch: {
       defaultMsg(newVal, oldVal) {
         if (newVal != null && this.ready) {
           this.editor.setContent(newVal || '')
         }
       }
     },
     created() {
      console.log('created');
     },
     mounted() {
      console.log('mounted');
      this.initEditor();
     },
     methods: {
       /** 初始化编辑器 */
       initEditor() {
         this.$nextTick(() => {
           // 删除编辑器
           UE.delEditor(this.randomId);
           //清空语言
           if (!UE._bak_I18N) {
               UE._bak_I18N = UE.I18N;
           }
           UE.I18N = {};
           // 重新赋值语言
           UE.I18N[this.config.lang] = UE._bak_I18N[ this.config.lang ];
           // 初始化编辑器
           this.editor = window.UE.getEditor(this.randomId, this.config)

           // 确保ue加载完成后放入内容，如果没默认内容，就把下面这句注释掉，否则会报错
           this.editor.addListener('ready', () => {
             this.ready = true
             this.editor.setContent(this.defaultMsg)
           })
         })
       },

       getUEContent() {
         return this.editor.getContent()
       }
     },
     destroyed() {
       this.editor.destroy()
     }
   }
 </script>

View Code

nuxt.config.js：引入ueditor中英文语言包

nuxt + ueditor国际化

推荐阅读