vue3中使用editor.js

最新推荐文章于 2025-04-09 19:12:28 发布

前端程序猿i

最新推荐文章于 2025-04-09 19:12:28 发布

阅读量2.9k

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_54123885/article/details/133276151

版权

第一步安装依赖

npm i @editorjs/editorjs --save

第二步创建editor.vue插件

<template>
  <div>
    <div id="editorjs" :style="'width:' + props.width + 'px;height:' + props.height + 'px;'"></div>
  </div>
</template>
<script setup>
// 标题（Header）：用于设置文本的标题级别，支持多级标题。
// 段落（Paragraph）：用于添加普通文本段落。
// 引用（Quote）：用于添加引用文本块。
// 列表（List）：支持有序列表和无序列表。
// 图像（Image）：可以插入图片，并指定图片的来源、标题和描述等属性。
// 插入链接（Link）：可以插入超链接，指定链接的URL、标题和打开方式等。
// 视频（Embed）：可以插入媒体内容的外部嵌入代码或链接。
// 表格（Table）：可以创建简单的表格，指定表格行数和列数。
// 代码（Code）：用于插入代码块，支持多种编程语言的语法高亮。
// 内容警告（Warning）：用于突出显示重要提示或警告。
// 勾选框（Checklist）：用于创建待办事项列表，可以勾选完成状态。
// 分割线（Delimiter）：用于在内容中插入水平分割线。
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';
import Quote from '@editorjs/quote';
import Image from '@editorjs/image';
import Embed from '@editorjs/embed';
import Table from '@editorjs/table';
import Code from '@editorjs/code';
import Delimiter from '@editorjs/delimiter';


import zh from './i18n.json'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const { ctx, proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  width: {
    type: Number,
    default: 500,
  },
  height: {
    type: Number,
    default: 500,
  },
})
const editor = ref(null)

const saveEditor = () => {
  editor.value.save().then((outputData) => {
    console.log(outputData)
  }).catch((error) => {
    console.log(error)
  });
}
const { data } = toRefs(reactive({
  //定义数组和对象
  data: ''
}))
onMounted(() => {
  editor.value = new EditorJS({
    holder: 'editorjs',//应该包含编辑器的元素Id
    // autofocus: true,//自动获取焦点
    placeholder: '请输入内容',
    i18n: {
      messages: zh
    },
    logLevel: 'VERBOSE',//日志级别   VERBOSE显示所有消息(默认) INFO显示信息和调试消息 WARN只显示警告消息 ERROR只显示错误信息
    readOnly: false,//只读模式
    tools: {//工具列表
      header: {
        class: Header,
        inlineToolbar: ['link']
      },
      list: {
        class: List,
        inlineToolbar: true
      },
      paragraph: {
        class: Paragraph,
        inlineToolbar: true
      },
      quote: {
        class: Quote,
        inlineToolbar: true
      },
      // image: SimpleImage,
      image: {
        class: Image,
        inlineToolbar: true
      },
      embed: {
        class: Embed,
        inlineToolbar: true
      },
      table: {
        class: Table,
        inlineToolbar: true
      },
      code: {
        class: Code,
        inlineToolbar: true
      },
      delimiter: {
        class: Delimiter,
        inlineToolbar: true
      },
    },
    onReady: () => {
      console.log('Editor.js is ready to work!')
    },
  })
  console.log(editor.value);
})
// watch(propData,(newVal,oldVal)=>{})
defineExpose({ saveEditor })
</script>

<style scoped></style>

创建i18n翻译文件 i18n.json

{
  "ui": {
    "blockTunes": {
      "toggler": {
        "Click to tune": "点击调整",
        "or drag to move": "或者拖动移动"
      }
    },
    "inlineToolbar": {
      "converter": {
        "Convert to": "转换为"
      }
    },
    "toolbar": {
      "toolbox": {
        "Add": "添加"
      }
    }
  },
  "toolNames": {
    "Text": "文本",
    "Heading": "标题",
    "List": "列表",
    "Warning": "警告",
    "Checklist": "清单",
    "Quote": "引用",
    "Code": "代码",
    "Delimiter": "分隔符",
    "Raw HTML": "原始HTML",
    "Table": "表格",
    "Link": "链接",
    "Marker": "标记",
    "Bold": "加粗",
    "Italic": "斜体",
    "Image": "图片"
  },
  "tools": {
    "warning": {
      "Title": "标题",
      "Message": "消息"
    },
    "link": {
      "Add a link": "添加链接"
    },
    "stub": {
      "The block can not be displayed correctly.": "该块不能正确显示"
    }
  },
  "blockTunes": {
    "delete": {
      "Delete": "删除"
    },
    "moveUp": {
      "Move up": "向上移动"
    },
    "moveDown": {
      "Move down": "向下移动"
    }
  }
}

在页面引入组件

<template>
  <div class="editorBox">
    <editorJs ref="editorRef" :width="700" :height="1000" v-model="data"></editorJs>
    <el-button @click="save">保存</el-button>
  </div>
</template>
<script setup>
import editorJs from '@/components/Editor/editorJs'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const { ctx, proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
const { data } = toRefs(reactive({
  //定义数组和对象
  data: ''
}))
const editorRef = ref(null)//定义普通类型
function save() {
  editorRef.value.saveEditor()
}

// onMounted(() => {})
// watch(propData,(newVal,oldVal)=>{})
</script>

<style scoped>
.editorBox {
  padding: 40px;
  width: 700px;
  background-color: #fff;
  margin: 50px auto auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04), 0 4px 10px rgba(0, 0, 0, .08);
}
</style>

这只是一个简单的示例,具体配置请去官网Editor.js (editorjs.io)

Editor.js 在其核心设计中不直接包含一个传统的“顶部工具栏”。它的设计理念是简洁、无干扰的用户体验，焦点是在“块”内容上，而非传统的富文本编辑器的样式。因此，Editor.js 的默认设置下，不会显示类似 Word 或其他传统编辑器的顶部工具栏。

说一下我的心得:官方文档对中文及其不友好,不建议使用这个编辑器,除非你有大量时间来开发研究

Editor.js 是一个用于构建具有完全可定制化块结构的现代编辑器的开源库。它提供了一个简洁、可扩展和易于使用的接口，使开发人员能够创建拥有丰富内容和互动性的编辑器。

以下是一些 Editor.js 的特点和优势：

块结构：Editor.js 采用了块结构的概念，将内容分解为可独立操作和样式化的不同块，如段落、标题、图像、列表等。这种结构使得对内容的编辑和扩展变得更加直观和灵活。
嵌套块：不仅可以创建单一块的内容，还可以在块内部创建嵌套结构，构建复杂的内容组合。例如，你可以在段落块中嵌套标题、列表或引用块等。
简洁的用户界面：Editor.js 的用户界面被设计成简洁、直观且易于使用。用户可以通过简单的操作来创建、编辑和删除块，不需要关注复杂的标记语法或样式细节。
开放的插件系统：Editor.js 提供了一个强大的插件系统，允许开发人员创建自定义块类型和扩展编辑器功能。你可以根据需要编写自己的块插件，并将其集成到编辑器中，以满足特定的编辑需求。
丰富的内容保存：Editor.js 使用 JSON 格式保存编辑器的内容。这种格式简单易懂，便于存储和传输，同时保留了块结构和样式的信息。你可以将编辑器的内容保存到数据库中，然后在需要时重新加载。
可扩展的主题和样式：Editor.js 的外观和样式可以根据你的品牌和设计需求进行定制。你可以创建自己的主题或使用现有的主题来改变编辑器的外观。
多语言支持：Editor.js 支持多种语言，可以轻松地切换编辑器的显示语言或自定义特定术语的翻译。