diff --git a/.gitignore b/.gitignore index f9190c29..a5053403 100644 --- a/.gitignore +++ b/.gitignore @@ -5,5 +5,6 @@ package-lock.json # dist file dist lib +.vscode/ .DS_Store diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100644 index 00000000..d71a03b9 --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +yarn commitlint --edit $1 diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 00000000..d2ae35e8 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +yarn lint-staged diff --git a/README.md b/README.md index 4b90e399..883ffd49 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@

Markdown Editor built on Vue

+

This is a fork of the original project

Downloads @@ -6,6 +7,64 @@ 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) @@ -129,7 +188,7 @@ WeChat Pay 微信 -## Refrence +## Reference - [ElementUi Utils clickoutside](https://github.com/ElemeFE/element/blob/dev/src/utils/clickoutside.js) - [ElementUi Utils resize-event](https://github.com/ElemeFE/element/blob/dev/src/utils/resize-event.js) diff --git a/build/webpack.dev.js b/build/webpack.dev.js index dbaaf078..a7155270 100644 --- a/build/webpack.dev.js +++ b/build/webpack.dev.js @@ -1,24 +1,30 @@ const path = require('path'); -const merge = require('webpack-merge'); +const {merge} = require('webpack-merge'); const getBaseConfig = require('./webpack.base'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = merge(getBaseConfig(), { + mode: 'development', entry: { dev: './dev/main.js', }, devServer: { open: true, - progress: true, - host: '0.0.0.0', - stats: 'errors-only', - disableHostCheck: true, + host: '127.0.0.1', + allowedHosts: 'all', + client: { + progress: true, + }, + devMiddleware: { + stats: 'errors-only', + }, }, output: { path: path.join(__dirname, '../dev/dist'), publicPath: '/', chunkFilename: 'async_[name].js', }, + devtool: 'source-map', optimization: { splitChunks: { cacheGroups: { diff --git a/build/webpack.pkg.js b/build/webpack.pkg.js index 917a8a09..79aa12af 100644 --- a/build/webpack.pkg.js +++ b/build/webpack.pkg.js @@ -1,5 +1,5 @@ const path = require('path'); -const merge = require('webpack-merge'); +const {merge} = require('webpack-merge'); const getBaseConfig = require('./webpack.base'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); diff --git a/build/webpack.theme.js b/build/webpack.theme.js index 2b876c99..68970a73 100644 --- a/build/webpack.theme.js +++ b/build/webpack.theme.js @@ -1,5 +1,5 @@ const path = require('path'); -const merge = require('webpack-merge'); +const {merge} = require('webpack-merge'); const getBaseConfig = require('./webpack.base'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); diff --git a/dev/App.vue b/dev/App.vue index d64e9252..06984329 100644 --- a/dev/App.vue +++ b/dev/App.vue @@ -12,17 +12,61 @@ @copy-code-success="handleCopyCodeSuccess" @image-click="handleImageClick" ref="editor" - /> + :toolbar="customToolbar" + left-toolbar="undo redo | myButton my2ndButton" + > + + + + + 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..3f27f376 100644 --- a/dev/test-cdn.html +++ b/dev/test-cdn.html @@ -21,9 +21,13 @@