快捷導(dǎo)航

vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法

更新時(shí)間：2024年04月12日 10:13:24 作者：_Legend_King

Editor.js是一個(gè)用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開(kāi)源庫(kù),它提供了一個(gè)簡(jiǎn)潔、可擴(kuò)展和易于使用的接口,使開(kāi)發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動(dòng)性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法,需要的朋友可以參考下

一、安裝 Editor.js

npm i  @editorjs/editorjs --save

二、在頁(yè)面中引入并使用

樣式就不發(fā)了，自己按自己的來(lái)

三、轉(zhuǎn)換語(yǔ)言，默認(rèn)是英文

editor = new EditorJS({
      holder: this.$refs.editor,
      // 自動(dòng)聚焦
      autofocus: true,
      // 其他配置...  
      tools: {

      },
      i18n: {
        messages: {
          ui: {
            blockTunes: {
              toggler: {
                'Click to tune': '點(diǎn)擊轉(zhuǎn)換'
              }
            },
            inlineToolbar: {
              converter: {
                'Convert to': '轉(zhuǎn)換'
              }
            },
            toolbar: {
              toolbox: {
                Add: '工具欄添加'
              }
            },
            popover: {
              'Filter': '過(guò)濾',
              'Nothing found': '找不到',
              "Enter a code": "輸入代碼"
            }
          },
          toolNames: {
            "Text": "文本",
            "Heading": "標(biāo)題",
            "List": "列表",
            "Warning": "警告",
            "Checklist": "清單",
            "Quote": "引用",
            "Code": "代碼",
            "Delimiter": "分隔符",
            "Raw HTML": "原始 HTML",
            "Table": "表格",
            "Link": "鏈接",
            "Marker": "標(biāo)記",
            "Bold": "粗體",
            "Italic": "斜體",
            "InlineCode": "內(nèi)聯(lián)代碼",
            "Image": "圖片"
          },
          tools: {
            "paragraph": {
              'Press Tab': '輸入內(nèi)容',
            },
            "warning": {  // <-- 'Warning' tool will accept this dictionary section 
              "Title": "標(biāo)題",
              "Message": "消息",
            },
            "link": {
              "Add a link": "添加連接"
            },
            "code": {
              "Enter a code": "輸入代碼"
            },
            "image": {
              "Add border": "添加邊框",
              "With border": "有邊框",
              "Stretch image": "拉伸圖像",
              "With background": "有背景",
              "Add background": "添加背景"
            },
            "list": {
              "Ordered": "有序",
              "Unordered": "無(wú)序"
            }
          },
          blockTunes: {
            // Section allows to translate Block Tunes 
            "delete": {
              "Delete": "刪除",
              "Click to delete": "點(diǎn)擊刪除"
            },
            "moveUp": {
              "Move up": "上移"
            },
            "moveDown": {
              "Move down": "下移"
            }
          },
        }
      },
    });

四、標(biāo)題

其余功能需自行安裝，引入

npm install  @editorjs/header

import Header from '@editorjs/header';

// 其他配置
tools: {
    header: {
       class: Header,
       config: {
         placeholder: '輸入標(biāo)題',
         levels: [1, 2, 3, 4], // 可轉(zhuǎn)換的標(biāo)題
         defaultLevel: 1 // 默認(rèn)標(biāo)題
      }
   },
}

五、圖片有兩種，可拖拽上傳處理

簡(jiǎn)單的圖像（無(wú)后端要求）
圖像

配置官網(wǎng)有具體文檔，若不清楚請(qǐng)留言

Editor.jsFree block-style editor with a universal JSON output

以下是一些 Editor.js 的特點(diǎn)和優(yōu)勢(shì)：

塊結(jié)構(gòu)：Editor.js 采用了塊結(jié)構(gòu)的概念，將內(nèi)容分解為可獨(dú)立操作和樣式化的不同塊，如段落、標(biāo)題、圖像、列表等。這種結(jié)構(gòu)使得對(duì)內(nèi)容的編輯和擴(kuò)展變得更加直觀和靈活。

嵌套塊：不僅可以創(chuàng)建單一塊的內(nèi)容，還可以在塊內(nèi)部創(chuàng)建嵌套結(jié)構(gòu)，構(gòu)建復(fù)雜的內(nèi)容組合。例如，你可以在段落塊中嵌套標(biāo)題、列表或引用塊等。

簡(jiǎn)潔的用戶界面：Editor.js 的用戶界面被設(shè)計(jì)成簡(jiǎn)潔、直觀且易于使用。用戶可以通過(guò)簡(jiǎn)單的操作來(lái)創(chuàng)建、編輯和刪除塊，不需要關(guān)注復(fù)雜的標(biāo)記語(yǔ)法或樣式細(xì)節(jié)。

開(kāi)放的插件系統(tǒng)：Editor.js 提供了一個(gè)強(qiáng)大的插件系統(tǒng)，允許開(kāi)發(fā)人員創(chuàng)建自定義塊類型和擴(kuò)展編輯器功能。你可以根據(jù)需要編寫(xiě)自己的塊插件，并將其集成到編輯器中，以滿足特定的編輯需求。

豐富的內(nèi)容保存：Editor.js 使用 JSON 格式保存編輯器的內(nèi)容。這種格式簡(jiǎn)單易懂，便于存儲(chǔ)和傳輸，同時(shí)保留了塊結(jié)構(gòu)和樣式的信息。你可以將編輯器的內(nèi)容保存到數(shù)據(jù)庫(kù)中，然后在需要時(shí)重新加載。

可擴(kuò)展的主題和樣式：Editor.js 的外觀和樣式可以根據(jù)你的品牌和設(shè)計(jì)需求進(jìn)行定制。你可以創(chuàng)建自己的主題或使用現(xiàn)有的主題來(lái)改變編輯器的外觀。

多語(yǔ)言支持：Editor.js 支持多種語(yǔ)言，可以輕松地切換編輯器的顯示語(yǔ)言或自定義特定術(shù)語(yǔ)的翻譯。