update readme.md

originjs · Nov 2, 2021 · ad3b432 · ad3b432
1 parent 11142cf
commit ad3b432
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 119 deletions.
diff --git a/LOG.md b/LOG.md
@@ -1,4 +1,7 @@
 # 更新日志
+- **3.0.0-beta** (21.11.02)
+    - 适配Vue3
+    - 升级webpack版本
 - **2.9.1** (20.12.28)
     - 修复codestyle切换不生效bug PR #650
     - 插入代码块时增加换行 PR #641

diff --git a/README-EN.md b/README-EN.md
@@ -1,7 +1,7 @@
 # mavonEditor
-![npm](https://nodei.co/npm/mavon-editor.png?downloads=true&downloadRank=true&stars=true)
+[![npm](https://img.shields.io/npm/v/mavon-editor/next.svg)](https://www.npmjs.com/package/mavon-editor/v/next)
 
-> A markdown editor based on Vue
+> A markdown editor based on Vue3
 
 ### [中文说明](./README.md)
 
@@ -18,7 +18,7 @@
 
 ### Install mavon-editor
 ```
-$ npm install mavon-editor --save
+$ npm install mavon-editor@next --save
 ```
 
 ### Use
@@ -27,72 +27,18 @@ $ npm install mavon-editor --save
 ```javascript
     // Global Registration
     // import with ES6
-    import Vue from 'vue'
+    import { createApp } from 'vue'
     import mavonEditor from 'mavon-editor'
     import 'mavon-editor/dist/css/index.css'
-
     // use
-    Vue.use(mavonEditor)
-    new Vue({
-        'el': '#main',
-        data() {
-            return { value: '' }
-        }
-    })
+    createApp(App).use(mavonEditor).mount('#app')
 ```
 `index.html`
 ```html
 // The same below
-<div id="main">
+<div id="app">
     <mavon-editor v-model="value"/>
 </div>
-```
-### Use in nuxt.js
-> new file: vue-mavon-editor.js
-``` javascrpt
-import Vue from 'vue';
-import mavonEditor from 'mavon-editor';
-import 'mavon-editor/dist/css/index.css';
-
-Vue.use(mavonEditor);
-```
-> nuxt.config.js
-``` javascript
-  plugins: [
-  ...
-    { src: '@/plugins/vue-mavon-editor', ssr: false }
-  ],
-```
-> page
-```vue
-<template>
-  <div class="mavonEditor">
-    <no-ssr>
-      <mavon-editor :toolbars="markdownOption" v-model="handbook"/>
-    </no-ssr>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      markdownOption: {
-        bold: true,
-        ... // more params
-      },
-      handbook: "#### how to use mavonEditor in nuxt.js"
-    };
-  }
-};
-</script>
-
-<style scoped>
-.mavonEditor {
-  width: 100%;
-  height: 100%;
-}
-</style>
-
 ```
 
 > [more ways...](./doc/en/use.md)

diff --git a/README.md b/README.md
@@ -2,7 +2,6 @@
 [![npm](https://img.shields.io/npm/v/mavon-editor/next.svg)](https://www.npmjs.com/package/mavon-editor/v/next)
 
 ### [English Documents](./README-EN.md)
-[Demo for jsfiddle](https://jsfiddle.net/CHENXCHEN/qf7gLw3a/3/)
 
 ## example (图片展示)
 
@@ -17,7 +16,7 @@
 ### Install mavon-editor (安装)
 
 ```
-$ npm install mavon-editor --save
+$ npm install mavon-editor@next --save
 ```
 
 ### Use (如何引入)
@@ -26,72 +25,18 @@ $ npm install mavon-editor --save
 ```javascript
     // 全局注册
     // import with ES6
-    import Vue from 'vue'
+    import { createApp } from 'vue'
     import mavonEditor from 'mavon-editor'
     import 'mavon-editor/dist/css/index.css'
     // use
-    Vue.use(mavonEditor)
-    new Vue({
-        'el': '#main',
-        data() {
-            return { value: '' }
-        }
-    })
+    createApp(App).use(mavonEditor).mount('#app')
 ```
 `index.html`
 ```html
-<div id="main">
+<div id="app">
     <mavon-editor v-model="value"/>
 </div>
 ```
-### 如何在nuxt.js 中使用
-> 首先在工程目录plugins 下新建 vue-mavon-editor.js
-``` javascrpt 
-import Vue from 'vue';
-import mavonEditor from 'mavon-editor';
-import 'mavon-editor/dist/css/index.css';
-
-Vue.use(mavonEditor);
-```
-> 然后在nuxt.config.js 中添加plugins配置
-``` javascript
-  plugins: [
-  ...
-    { src: '@/plugins/vue-mavon-editor', ssr: false }
-  ],
-```
-> 最后一步在页面或者组件中引入
-```vue
-<template>
-  <div class="mavonEditor">
-    <no-ssr>
-      <mavon-editor :toolbars="markdownOption" v-model="handbook"/>
-    </no-ssr>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      markdownOption: {
-        bold: true, // 粗体
-        ... // 更多配置
-      },
-      handbook: "#### how to use mavonEditor in nuxt.js"
-    };
-  }
-};
-</script>
-
-<style scoped>
-.mavonEditor {
-  width: 100%;
-  height: 100%;
-}
-</style>
-
-```
-
 
 > [更多引入方式点击这里...](./doc/cn/use.md)