前言

項目開發中總遇到發個文章，編輯文本信息，需要有個使用簡單交互感好的富文本編輯器，編輯器一般後期交付給客户使用所以滿足功能以外還要使用簡單界面漂亮，不然有被客户説了。而且編輯器要根據業務需求還能修改，也就是源碼可修改。居於這些需求我今天給開發者朋友分享乾貨，拿去就能用的編輯器源碼。

代碼目錄介紹

圖1 - 代碼目錄

如圖1在components下的gfeditor就是編輯器代碼包，其中emain是編輯器主體代碼、plugin是插件代碼（擴展插件可放在這裏）、toolbar是編輯器的工具工具欄（圖2）。

圖2 - 編輯器
編輯emain主圖和plugin內置插件不依賴任何UI框架可以和任何UI框架結合。toolbar有依賴UI框架彈框樣式（可以給成您用UI框架）。

如圖2 我們的編輯器可以把編輯區和工具欄分開，這樣需要合在編輯頭部就合併、需要分開就分開沒這樣就要做出類似圖2 把文章標題和文本編輯放在一起，頁面編輯緊湊、漂亮。

emain內置解析md語法，可以識別從其他網站複製過來的文章樣式，不至於複製其他網站文章後要重新排格式。

圖3 - 彈出式菜單

圖3 - 彈出式菜單在編中可以提高編輯效率，這種用户也喜歡哦！

圖4 - 內置插件

插件説明

如圖4 是編輯基礎文本編輯使用工具插件，內插件已經滿足一般文本編輯，如你要特殊需求可以根據需求開發插件。開發插件也很簡單，下面展示一個基礎插件：文本加粗 代碼

import type MarkdownIt from 'markdown-it';
import { MarkPlugin, PluginOptions, isEngine } from '@/components/gfeditor/emain';
 
export interface BoldOptions extends PluginOptions {
    hotkey?: string | Array<string>;
    markdown?: boolean;
}
 
const MARKDOWN_IT = 'markdown-it';
export default class<
    T extends BoldOptions = BoldOptions,
> extends MarkPlugin<T> {
    static get pluginName() {
        return 'bold';
    }
 
    tagName = 'strong';
 
    init(): void {
        super.init();
        const editor = this.editor;
        if (isEngine(editor)) {
            editor.on(MARKDOWN_IT, this.markdownIt);
        }
    }
 
    markdownIt = (mardown: MarkdownIt) => {
        if (this.options.markdown !== false) mardown.enable('emphasis');
    };
 
    hotkey() {
        return this.options.hotkey || 'mod+b';
    }
 
    conversion() {
        return [
            {
                from: {
                    span: {
                        style: {
                            'font-weight': ['bold', '700'],
                        },
                    },
                },
                to: this.tagName,
            },
            {
                from: 'b',
                to: this.tagName,
            },
        ];
    }
 
    destroy(): void {
        this.editor.off(MARKDOWN_IT, this.markdownIt);
    }
}

從代碼看是不是擴展很簡單呀！這樣用到就加用不到的插件就刪除，這樣自由搭配減少代碼量，自由才是我們最求的，就像圖5 我們可以方便問題列表 中回答問題 使用便捷並讓佈局漂亮，不影響美觀，所以一個編輯器好壞是能影響您的項目的。

圖5 - 內置到問題列表

源碼獲取

編輯器源碼還沒放在git,有用得到的朋友先到社區找我們要，等我們後期整理好文檔在放出來。

社區是：GoFly全棧開發社區，社區為全棧開發朋友提供後端到前端的全部資源社區，一個社區就能幫您開發完整項目的社區。