与vue集成

此示例使用Vue CLI工具创建vue应用，并集成DocEditor。此过程需要Node.js（和 npm）。

创建vue项目

1、首先安装Vue CLI工具：

#npm全局安装
npm install -g @vue/cli

#或yarn安装
yarn global add @vue/cli

2、创建vue应用，我们将应用命名为：doceditor-vue-demo。（本例中我们使用的vue2）

vue create doceditor-vue-demo

3、创建完成后，切换到新创建的目录。

cd doceditor-vue-demo

安装@o2oa/doceditor

使用以下命令安装@o2oa/doceditor：

#npm全局安装
npm install @o2oa/doceditor

#或yarn安装
yarn add @o2oa/doceditor

配置vue打包插件

由于我们需要将@o2oa/doceditor中的public目录部署到输出目录，所以要为vue的webpack配置增加一个copy-webpack-plugin插件。

在doceditor-vue-demo目录下创建一个vue配置文件：vue.config.js，配置如下：

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    configureWebpack: {
        plugins: [
            //将node_modules/@o2oa/doceditor/editor/public目录部署到doceditor/public
            new CopyPlugin({
              patterns:  [
                {
                  from: "node_modules/@o2oa/doceditor/editor/public",
                  to: "doceditor/public"
                }
              ]
            })
        ]
    }
}

创建组件

接着我们创建一个component，用于调用DocEditor。我们在src/components目录下创建一个文件：MyDocEditor.vue

<template>
  <div class="editor"></div>
</template>

<script>
  //引入@o2oa/doceditor
  import DocEditor from '@o2oa/doceditor';
  export default {
    name: 'MyDocEditor',
    mounted() {
      //使用DocEditor.createEditor方法初始化编辑器
      DocEditor.createEditor(this.$el, {
        base: "./doceditor/"
      }).load();
    }
  }
</script>

使用MyDocEditor组件

打开src/App.vue，引用MyDocEditor组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <MyDocEditor/> <!-- 此处增加MyDocEditor标签 -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
//此处增加MyDocEditor.vue引用
import MyDocEditor from "@/components/MyDocEditor";

export default {
  name: 'App',
  components: {
    //此处增加MyDocEditor
    MyDocEditor,
    HelloWorld
  }
}
</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>

然后我们可以使用 npm run serve来运行应用：

npm run serve

运行结果如下：

本例中我们使用的是vue2，与vue3的集成过程与之类似。

在线运行

您可以在在线编辑器中尝试DocEditor与vue的集成：在线运行本样例