From e54833d20a4fefa06cdcd0e55a729a829a1d918e Mon Sep 17 00:00:00 2001 From: Stefano La Terra Date: Sun, 5 Dec 2021 09:42:27 +0100 Subject: [PATCH 1/7] Update README.md Tell the users that this is a fork. Also show what is the purpose of the fork, and how to use the new features. --- README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/README.md b/README.md index 4b90e399..b0c55e66 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@

Markdown Editor built on Vue

+

This is a fork of the original project

+

Downloads @@ -6,6 +8,65 @@ License

+## What this fork adds + +This fork adds the possibility to use any custom component as a toolbar button. For example, we can obtain a customized toolbar like the one below: + +![image](https://user-images.githubusercontent.com/4061104/144724202-d9b679f1-78b4-4b25-82f0-ff70efa7da4a.png) + + +by using a `toolbar` config like this: + +```js +const customToolbar = { + myButton: { + title: 'Options', + slot: true, // this tells the editor to render the button using our custom template + preventNativeClick: false, // this allows elements like a select to work correctly + }, + my2ndButton: { + title: 'Settings', + slot: true, + action() { // you can still define the onClick action via the usual function + console.log('opening the settings..'); + }, + }, +}; +``` + +Then we can provide custom templates for `myButton` and `my2ndButton`, like this: + +```js + + + + +``` + + ## Links - [Demo](https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html) From 436383855052ae74f5aefc6e50221dfe9b1e3365 Mon Sep 17 00:00:00 2001 From: 0biWanKenobi Date: Sun, 26 Dec 2021 12:55:52 +0100 Subject: [PATCH 2/7] fix(example): fix typo in example md file --- README.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b0c55e66..883ffd49 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@

Markdown Editor built on Vue

This is a fork of the original project

-

Downloads Version @@ -14,7 +13,6 @@ This fork adds the possibility to use any custom component as a toolbar button. ![image](https://user-images.githubusercontent.com/4061104/144724202-d9b679f1-78b4-4b25-82f0-ff70efa7da4a.png) - by using a `toolbar` config like this: ```js @@ -27,7 +25,8 @@ const customToolbar = { my2ndButton: { title: 'Settings', slot: true, - action() { // you can still define the onClick action via the usual function + action() { + // you can still define the onClick action via the usual function console.log('opening the settings..'); }, }, @@ -39,10 +38,10 @@ Then we can provide custom templates for `myButton` and `my2ndButton`, like this ```js +> diff --git a/dev/main.js b/dev/main.js index 5e5b7d36..2d338db5 100644 --- a/dev/main.js +++ b/dev/main.js @@ -25,7 +25,7 @@ import 'codemirror/addon/scroll/simplescrollbars.css'; import 'codemirror/lib/codemirror.css'; // import Preview from '@/preview'; import Prism from 'prismjs'; -import githubTheme from '@/theme/github/index'; +// import githubTheme from '@/theme/github/index'; import createEmojiPlugin from '@/plugins/emoji/full'; import '@/plugins/emoji/emoji'; diff --git a/dev/test-cdn.html b/dev/test-cdn.html index dbc3d445..7c8aab96 100644 --- a/dev/test-cdn.html +++ b/dev/test-cdn.html @@ -24,6 +24,9 @@ window.onload = function () { const vm = new Vue({ el: '#app', + components: { + 'v-md-editor': VMdEditor + } }); console.log(vm); diff --git a/src/base-editor.vue b/src/base-editor.vue index ba851023..ec229cfd 100644 --- a/src/base-editor.vue +++ b/src/base-editor.vue @@ -15,14 +15,25 @@ @toolbar-menu-click="handleToolbarMenuClick" ref="contaner" > - + +