Editor.js 是一個基于 Web 的所見即所得富文本編輯器，它由CodeX團隊開發(fā)。源代碼托管于Github：https://github.com/codex-team/editor.js

特點

它有兩個顯著的特點，一個是基于區(qū)塊（block-styled）的編輯模式，另一個是可以輸出干凈的數據。

基于區(qū)塊

基于區(qū)塊官網是這樣解釋的：

Editor.js工作區(qū)由單獨的區(qū)塊組成：段落、標題、圖像、列表、引號等。它們中的每一個都是由 Plugin 提供的獨立元素（或更復雜的結構）并由 Editor’s Core 連結。

干凈的數據

Editor.js 輸出干凈的json數據而不是 HTML 標記，雖然對瀏覽器來說，HTML 是更直觀的，但對服務器來說，json更精簡更關注內容本身，易于重復使用，存儲和傳輸。

對于控件本身也更易于實現，比如在文本“加粗”和“常規(guī)”來回切換，基于json的更改一個屬性，總要比基于HTML反復添加和刪除標記更簡單吧？

界面與交互

在編輯區(qū)域，Editor.js提供了區(qū)塊工具欄(Block Tools)，內聯工具欄(Inline Tools)和區(qū)塊編輯欄(Block Tunes)

他們分別通過 加號 + 按鈕，選中區(qū)塊內容和菜單（六個點和尚按鈕）來訪問??

插件

每個區(qū)塊都通過插件提供支持，官方提供了常用的插件，當然也可以自己寫插件。

官方提供的插件如下圖，在sample中，都以cdn方式引入了這些插件，也可以通過npm安裝。

標題和文本

序列化后的數據如下圖所示，

{
    "id" : "zcKCF1S7X8",
    "type" : "header",
    "data" : {
        "text" : "Editor.js",
        "level" : 1
    }
},
{
    "id" : "b6ji-DvaKb",
    "type" : "paragraph",
    "data" : {
        "text" : "支持文本，標題，列表，代辦，表格，圖片，鏈接，代碼片段，引用片段等等"
    }
},

{
    "id" : "SSBSguGvP7",
    "type" : "list",
    "data" : {
        "style" : "ordered",
        "items" : [
            {
                "content" : "支持普通文本，<i>斜體文本</i>，<b>加粗</b>",
                "items" : []
            },
            {
                "content" : "支持<mark class=\"cdx-marker\">文本高亮</mark>、<a href=\"https://baidu.com\">文本鏈接</a>、<code class=\"inline-code\">代碼片段</code><mark class=\"cdx-marker\"></mark>",
                "items" : []
            }
        ]
    }
},

圖片

圖片支持Base64編碼，和url兩種方式上傳圖片

{
    "id" : "VYsWoLL7yj",
    "type" : "image",
    "data" : {
        "url" : "data:image/png;base64, ...",
        "caption" : "codex2x.png",
        "withBorder" : false,
        "withBackground" : false,
        "stretched" : false
    }
}

列表

支持有序和無序列表，列表支持嵌套

無序列表：

{
            "id" : "i_cVQxn3Tb",
            "type" : "list",
            "data" : {
                "style" : "unordered",
                "items" : [
                    {
                        "content" : " 香蕉??",
                        "items" : []
                    },
                    {
                        "content" : " 蘋果??",
                        "items" : []
                    },
                    {
                        "content" : " 葡萄??  ",
                        "items" : []
                    }
                ]
            }
        },

有序列表：

        {
            "id" : "nOTdryosj2",
            "type" : "list",
            "data" : {
                "style" : "ordered",
                "items" : [
                    {
                        "content" : "洗手心",
                        "items" : []
                    },
                    {
                        "content" : "搓手背",
                        "items" : []
                    },
                    {
                        "content" : "洗指縫",
                        "items" : []
                    }
                ]
            }
        },

嵌套列表：

        {
            "id" : "LJjzlmGa-3",
            "type" : "list",
            "data" : {
                "style" : "unordered",
                "items" : [
                    {
                        "content" : "序章",
                        "items" : []
                    },
                    {
                        "content" : "第一章",
                        "items" : [
                            {
                                "content" : "第一節(jié)",
                                "items" : [
                                    {
                                        "content" : "a)",
                                        "items" : []
                                    },
                                    {
                                        "content" : "b)",
                                        "items" : []
                                    },
                                    {
                                        "content" : "c)",
                                        "items" : []
                                    }
                                ]
                            },
                            {
                                "content" : "第二節(jié)",
                                "items" : []
                            }
                        ]
                    }
                ]
            }
        },

Todo

{
            "id" : "Hitrs4RqXw",
            "type" : "checklist",
            "data" : {
                "items" : [
                    {
                        "text" : "滿意??",
                        "checked" : true
                    },
                    {
                        "text" : "一般??",
                        "checked" : false
                    },
                    {
                        "text" : "不滿意??",
                        "checked" : false
                    }
                ]
            }
        },

表格

不代表頭：

{
    "id" : "xPAQ6AkUiK",
    "type" : "paragraph",
    "data" : {
        "text" : "<b>不帶表頭</b>"
    }
},
{
    "id" : "_MMoOqlgXs",
    "type" : "table",
    "data" : {
        "withHeadings" : false,
        "content" : [
            [
                "<b>重要緊急</b>",
                "<b>重要不緊急</b>"
            ],
            [
                "吃飯睡覺",
                "訂生日蛋糕"
            ],
            [
                "<b>不重要但緊急</b>",
                "<b>不重要不緊急</b>"
            ],
            [
                "上班前定好鬧鐘",
                "總結這一周的工作"
            ]
        ]
    }
},

帶表頭：

{
    "id" : "fvfQSljMK8",
    "type" : "table",
    "data" : {
        "withHeadings" : true,
        "content" : [
            [
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五"
            ],
            [
                "a",
                "b",
                "c",
                "d",
                "e"
            ]
        ]
    }
},

使用

安裝

頁面中引用Editor.js Core庫，可通過npm安裝。也可以編譯項目，然后引入編譯后的js文件。

yarn add @editorjs/editorjs

或

<script src="lib/editorjs/editorjs.umd.js"></script>

創(chuàng)建編輯器實例

在頁面創(chuàng)建編輯器

import EditorJS from '@editorjs/editorjs';


const editor = new EditorJS({
  /**
   * Id of Element that should contain Editor instance
   */
  holder: 'editorjs'
});

這是一個最小化的示例。你會發(fā)現沒有那些默認的工具。因此需要在配置中指定工具。

配置工具

可以通過傳入配置對象創(chuàng)建編輯器實例。以下是示例

holder指定編輯器的容器元素。

window.editor = new window.EditorJS({
    /**
        * Wrapper of Editor
        */
    holder: 'editorjs',

配置工具

配置完成后，區(qū)塊工具欄將呈現一個較為完整的工具列表。

    /**
        * Tools list
        */
    tools: {
        paragraph: {
            config: {
                placeholder: "Enter something"
            }
        },

        header: {
            class: Header,
            inlineToolbar: ['link'],
            config: {
                placeholder: 'Header'
            },
            shortcut: 'CMD+SHIFT+H'
        },

        /**
            * Or pass class directly without any configuration
            */
        image: ImageTool,

        list: {
            class: NestedList,
            inlineToolbar: true,
            shortcut: 'CMD+SHIFT+L'
        },

        checklist: {
            class: Checklist,
            inlineToolbar: true,
        },

        quote: {
            class: Quote,
            inlineToolbar: true,
            config: {
                quotePlaceholder: 'Enter a quote',
                captionPlaceholder: 'Quote\'s author',
            },
            shortcut: 'CMD+SHIFT+O'
        },


        marker: {
            class: Marker,
            shortcut: 'CMD+SHIFT+M'
        },

        code: {
            class: CodeTool,
            shortcut: 'CMD+SHIFT+C'
        },

        delimiter: Delimiter,

        inlineCode: {
            class: InlineCode,
            shortcut: 'CMD+SHIFT+C'
        },

        linkTool: LinkTool,

        embed: Embed,

        table: {
            class: Table,
            inlineToolbar: true,
            shortcut: 'CMD+ALT+T'
        },

    },
    

    /**
        * Initial Editor data
        */
    data: obj,
    onReady: function () {
        saveButton.click();
    },
});

本地化

可以通過傳入i18n配置對象來設置編輯器的本地化。以下是一個較為完整的中文化示例：

i18n: {
    messages: {
        "ui": {
            "blockTunes": {
                "toggler": {
                    "Click to tune": "點擊轉換",
                    "or drag to move": "拖動調整"
                },
            },
            "inlineToolbar": {
                "converter": {
                    "Convert to": "轉換成"
                }
            },
            "toolbar": {
                "toolbox": {
                    "Add": "添加",
                    "Filter": "過濾",
                    "Nothing found": "無內容"
                },
                "popover": {
                    "Filter": "過濾",
                    "Nothing found": "無內容"
                }
            }
        },
        "toolNames": {
            "Text": "段落",
            "Heading": "標題",
            "List": "列表",
            "Warning": "警告",
            "Checklist": "清單",
            "Quote": "引用",
            "Code": "代碼",
            "Delimiter": "分割線",
            "Raw HTML": "HTML片段",
            "Table": "表格",
            "Link": "鏈接",
            "Marker": "突出顯示",
            "Bold": "加粗",
            "Italic": "傾斜",
            "InlineCode": "代碼片段",
            "Image": "圖片"
        },
        "tools": {
            "link": {
                "Add a link": "添加鏈接"
            },
            "stub": {
                'The block can not be displayed correctly.': '該模塊不能放置在這里'
            },
            "image": {
                "Caption": "圖片說明",
                "Select an Image": "選擇圖片",
                "With border": "添加邊框",
                "Stretch image": "拉伸圖像",
                "With background": "添加背景",
            },
            "code": {
                "Enter a code": "輸入代碼",
            },
            "linkTool": {
                "Link": "請輸入鏈接地址",
                "Couldn't fetch the link data": "獲取鏈接數據失敗",
                "Couldn't get this link data, try the other one": "該鏈接不能訪問，請修改",
                "Wrong response format from the server": "錯誤響應",
            },
            "header": {
                "Header": "標題",
                "Heading 2": "二級標題",
                "Heading 3": "三級標題",
                "Heading 4": "四級標題",
                "Heading 5": "五級標題",
            },
            "paragraph": {
                "Enter something": "請輸入筆記內容",
            },
            "list": {
                "Ordered": "有序列表",
                "Unordered": "無序列表",
            },
            "table": {
                "Heading": "標題",
                "Add column to left": "在左側插入列",
                "Add column to right": "在右側插入列",
                "Delete column": "刪除列",
                "Add row above": "在上方插入行",
                "Add row below": "在下方插入行",
                "Delete row": "刪除行",
                "With headings": "有標題",
                "Without headings": "無標題",
            },
            "quote": {
                "Align Left": "左對齊",
                "Align Center": "居中對齊",
            }
        },
        "blockTunes": {
            "delete": {
                "Delete": "刪除",
                'Click to delete': "點擊刪除"
            },
            "moveUp": {
                "Move up": "向上移"
            },
            "moveDown": {
                "Move down": "向下移"
            },
            "filter": {
                "Filter": "過濾"
            }
        },
    }
}

自定義樣式

varaiables.css中包含了大部分的樣式變量，更改這些變量可以實現自定義樣式。

如通過重寫 .root樣式選擇器可以實現自定義的背景色, 重寫.ce-popover 改變彈出框樣式等。

:root {
    --color-bg-main: #F0F0F0;
    --color-border-light: #E8E8EB;
    --color-text-main: #000;
    --selectionColor: #e1f2ff;
}


.ce-popover {
    --border-radius: 6px;
    --width: 200px;
    --max-height: 270px;
    --padding: 6px;
    --offset-from-target: 8px;
    --color-border: #e8e8eb;
    --color-shadow: rgba(13,20,33,0.13);
    --color-background: white;
    --color-text-primary: black;
    --color-text-secondary: #707684;
    --color-border-icon: rgb(201 201 204 / 48%);
    --color-border-icon-disabled: #EFF0F1;
    --color-text-icon-active: #388AE5;
    --color-background-icon-active: rgba(56, 138, 229, 0.1);
    --color-background-item-focus: rgba(34, 186, 255, 0.08);
    --color-shadow-item-focus: rgba(7, 161, 227, 0.08);
    --color-background-item-hover: #eff2f5;
    --color-background-item-confirm: #E24A4A;
    --color-background-item-confirm-hover: #CE4343;
}
.dark-mode {
  --color-border-light: rgba(255, 255, 255,.08);
  --color-bg-main: #1c1e24;
  --color-text-main: #737886;
}

– 完 –文章來源地址http://www.zghlxwxcb.cn/news/detail-849625.html

到了這里，關于開源好用的所見即所得(WYSIWYG)編輯器：Editor.js的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！