From b22d89474533b338be066a6a3cfe709d117edf12 Mon Sep 17 00:00:00 2001 From: William Date: Tue, 27 Sep 2022 18:32:17 +0800 Subject: [PATCH 1/4] upgrade to vue3 --- README.md | 36 +-- build/webpack.base.conf.js | 9 +- config/index.js | 2 +- package.json | 8 +- src/main.js | 12 +- src/vue-froala.js | 62 ++-- yarn.lock | 566 +++++++++++++++++++++++++++++-------- 7 files changed, 521 insertions(+), 174 deletions(-) diff --git a/README.md b/README.md index fa31fe1..98257fb 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,13 @@ -# Vue JS Froala WYSIWYG Editor - -[![npm](https://img.shields.io/npm/v/vue-froala-wysiwyg.svg)](https://www.npmjs.com/package/vue-froala-wysiwyg) -[![npm](https://img.shields.io/npm/dm/vue-froala-wysiwyg.svg)](https://www.npmjs.com/package/vue-froala-wysiwyg) -[![npm](https://img.shields.io/npm/l/vue-froala-wysiwyg.svg)](https://www.npmjs.com/package/vue-froala-wysiwyg) - ->vue-froala-wyswiyg provides Vue bindings to the Froala WYSIWYG editor VERSION 3. - -## Compatibility - -- v1 later `@legacy` - - Vue.js 1.x -- v2 later - - Vue.js 2.x +# Vue3 Froala WYSIWYG Editor ## Installation -Install `vue-froala-wysiwyg` from `npm` +Install `vue3-froala-wysiwyg` from `npm` ```bash -npm install vue-froala-wysiwyg --save +npm install vue3-froala-wysiwyg --save ``` - - ## Integration #### 1. Require and use Froala Editor component inside your application. @@ -40,14 +25,13 @@ import 'froala-editor/js/third_party/image_tui.min'; import 'froala-editor/css/froala_editor.pkgd.min.css'; // Import and use Vue Froala lib. -import VueFroala from 'vue-froala-wysiwyg' -Vue.use(VueFroala) -Vue.config.productionTip = false +import VueFroala from 'vue3-froala-wysiwyg'; -new Vue({ - render: h => h(App), - -}).$mount('#app') +const app = createApp({ + render: () => h(App) +}); +app.use(VueFroala); +app.mount('#app'); ``` @@ -60,7 +44,7 @@ new Vue({