開發(fā)背景

這一切都源于在開發(fā)vue3-admin的demo內(nèi)容時，沒有合適的編輯器組件。

在線預(yù)覽

傳送門

說明

僅支持 vue3 項目下使用，使用 jsx 語法開發(fā)，支持在 tsx 項目使用。為了減小插入，沒有使用less.modifyVars方法來切換主題，而采用了替換 class 名稱的方式。

代碼倉庫：md-editor-v3

功能一覽

1. 快捷插入內(nèi)容工具欄、編輯器瀏覽器全屏、頁面內(nèi)全屏等；
2. 內(nèi)置的白色主題和暗黑主題，支持綁定切換；
3. 支持快捷鍵插入內(nèi)容；
4. 支持使用 prettier 格式化內(nèi)容（使用 CDN 方式引入，只支持格式化 md 內(nèi)容，可在代碼內(nèi)設(shè)置關(guān)閉）；
5. 支持多語言，支持自行擴展語言；
6. 支持復(fù)制粘貼上傳圖片；
7. ...

更多功能待后續(xù)更新，若有想要的功能未開發(fā)，請留言~

預(yù)覽圖

默認模式下：

image

暗黑模式下：

image

apis

注意在 jsx 下需使用 modelValue 配合 onChange 方法完成數(shù)據(jù)綁定，在 vue 模板語法下，可以直接使用 v-modal 指令~

props

[toolbars]

[
  'bold',
  'underline',
  'italic',
  'strikeThrough',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'revoke',
  'next',
  'save',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'github'
];

自定義語言，需要替換的內(nèi)容如下（某些字段若不主動提供，可能會造成頁面不美觀）：

[StaticTextDefaultValue]

export interface StaticTextDefaultValue {
  toolbarTips?: ToolbarTips;
  titleItem?: {
    h1?: string;
    h2?: string;
    h3?: string;
    h4?: string;
    h5?: string;
    h6?: string;
  };
  linkModalTips?: {
    title?: string;
    descLable?: string;
    descLablePlaceHolder?: string;
    urlLable?: string;
    UrlLablePlaceHolder?: string;
    buttonOK?: string;
    buttonUpload?: string;
  };
}

事件綁定

快捷鍵

主要以CTRL搭配對應(yīng)功能英文單詞首字母，沖突項添加SHIFT，再沖突替換為ALT。

演示

yarn add md-editor-v3

jsx 語法項目

import { defineComponent, reactive } from 'vue';
import Editor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

export default defineComponent({
  setup() {
    const md = reactive({
      text: 'default markdown content'
    });
    return () => (
      <Editor hljs={hljs} modelValue={md.text} onChange={(value) => (md.text = value)} />
    );
  }
});

vue 模板項目

<template>
  <editor v-model="text" pageFullScreen></editor>
</template>

<script>
import { defineComponent } from 'vue';
import Editor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default defineComponent({
  name: 'VueTemplateDemo',
  components: { Editor },
  data() {
    return {
      text: '默認值'
    };
  }
});
</script>

上傳圖片

默認可以選擇多張圖片，支持粘貼板上傳圖片。

注意：粘貼板上傳時，如果是網(wǎng)頁上的 gif 圖，無法正確上傳為 gif 格式！

async onUploadImg(files: FileList, callback: (urls: string[]) => void) {
  const res = await Promise.all(
    Array.from(files).map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);

        axios
          .post('/api/img/upload', form, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );

  callback(res.map((item: any) => item.data.url));
}

結(jié)尾

該項目目前只生存了3周，使用中有bug期待你能留言給我，有想要的功能期待了解哦。