添加UE编辑器示例

Author: suweiteng

build/webpack.base.conf.js

@@ -26,7 +26,7 @@ module.exports = {
  'vue$': 'vue/dist/vue.common.js',
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
- 'components': path.resolve(__dirname, '../src/components')
+ 'components': path.resolve(__dirname, '../src/views')
  }
  },
  resolveLoader: {

src/App.vue

@@ -20,7 +20,7 @@
  </el-row>
 </template>
 <script>
- import header from './components/header/header.vue';
+ import header from './views/header/header.vue';
  const ERR_OK = "000";
  export default {
  data () {

src/components/other/other.vue

@@ -0,0 +1,38 @@
+<template>
+ <div>
+ <script id="editor" type="text/plain"></script>
+ </div>
+</template>
+<script>
+ export default {
+ name: 'UE',
+ data () {
+ return {
+ editor: null
+ }
+ },
+ props: {
+ defaultMsg: {
+ type: String
+ },
+ config: {
+ type: Object
+ }
+ },
+ mounted() {
+ const _this = this;
+ this.editor = UE.getEditor('editor', this.config);
+ this.editor.addListener("ready", function () {
+ _this.editor.setContent(_this.defaultMsg);
+ });
+ },
+ methods: {
+ getUEContent() {
+ return this.editor.getContent()
+ }
+ },
+ destroyed() {
+ this.editor.destroy();
+ }
+ }
+</script>

src/components/ue/ue.vue

@@ -6,12 +6,18 @@ import axios from 'axios';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 import App from './App';
-import Index from './components/index/index';
-import Table from './components/table/table';
-import Form from './components/form/form';
-import other from './components/other/other';
+import Index from './views/index/index';
+import Table from './views/table/table';
+import Form from './views/form/form';
+import ue from './views/editor/editor';
 import 'font-awesome/css/font-awesome.min.css';
 import Mock from './mock/mock';
+
+import '../static/UE/ueditor.config.js'
+import '../static/UE/ueditor.all.min.js'
+import '../static/UE/lang/zh-cn/zh-cn.js'
+import '../static/UE/ueditor.parse.min.js'
+
 Mock.mockData();
 Vue.use(VueRouter);// 安装路由功能
 /* eslint-disable no-new */
@@ -45,7 +51,7 @@ let routes = [
  {path: '/index', component: Index, name: 'index', class: 'fa-line-chart'},
  {path: '/table', component: Table, name: 'table', class: 'fa-table'},
  {path: '/form', component: Form, name: 'form', class: 'fa-newspaper-o'},
- {path: '/other', component: other, name: 'other', class: 'fa-plug'}
+ {path: '/editor', component: ue, name: 'editor', class: 'fa-plug'}
  ]
  }
 ];

src/main.js

@@ -0,0 +1,47 @@
+<template>
+ <div class="components-container">
+ <div class="info">UE编辑器示例<br>需要使用编辑器时，调用UE公共组件即可。可设置填充内容defaultMsg，配置信息config(宽度和高度等)，可调用组件中获取内容的方法。</div>
+ <button @click="getUEContent()">获取内容</button>
+ <div class="editor-container">
+ <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
+ </div>
+ </div>
+</template>
+<style>
+ .info{
+ border-radius: 10px;
+ line-height: 20px;
+ padding: 10px;
+ margin: 10px;
+ background-color: #ffffff;
+ }
+</style>
+<script>
+ import UE from '../../components/ue/ue.vue';
+ export default {
+ components: {UE},
+ data() {
+ return {
+ defaultMsg: '这里是UE测试',
+ config: {
+ initialFrameWidth: null,
+ initialFrameHeight: 350
+ }
+ }
+ },
+ methods: {
+ getUEContent() {
+ let content = this.$refs.ue.getUEContent();
+ this.$notify({
+ title: '获取成功，可在控制台查看！',
+ message: content,
+ type: 'success'
+ });
+ console.log(content)
+ }
+ }
+ };
+</script>
+
+
+