快捷導(dǎo)航

vue3使用富文本編輯器Editor.js的簡單方法

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

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

一、安裝 Editor.js

npm i  @editorjs/editorjs --save

二、在頁面中引入并使用

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

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

editor = new EditorJS({
      holder: this.$refs.editor,
      // 自動聚焦
      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': '過濾',
              '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": "無序"
            }
          },
          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)題
      }
   },
}