The first step is to install dependencies
npm i @editorjs/editorjs --save
The second step is to create the editor.vue plug-in
<template>
<div>
<div id="editorjs" :style="'width:' + props.width + 'px;height:' + props.height + 'px;'"></div >
</div>
</template>
<script setup>
//Header: used to set the title level of the text, supporting multi-level titles.
//Paragraph: used to add ordinary text paragraphs.
// Quote: used to add a quoted text block.
// List: Supports ordered lists and unordered lists.
// Image: You can insert a picture and specify the source, title, description and other attributes of the picture.
//Insert link (Link): You can insert a hyperlink and specify the link's URL, title, opening method, etc.
// Video (Embed): External embed code or link that can be inserted into media content.
// Table: You can create a simple table and specify the number of rows and columns in the table.
// Code: used to insert code blocks and supports syntax highlighting in multiple programming languages.
// Content warning (Warning): used to highlight important tips or warnings.
// Checkbox (Checklist): used to create a to-do list and can check the completion status.
//Delimiter: used to insert horizontal dividing lines in content.
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({
//Define arrays and objects
data: ''
}))
onMounted(() => {
editor.value = new EditorJS({
holder: 'editorjs',//Should contain the element ID of the editor
// autofocus: true,//Automatically obtain focus
placeholder: 'Please enter content',
i18n: {
messages: zh
},
logLevel: 'VERBOSE',//Log level VERBOSE displays all messages (default) INFO displays information and debugging messages WARN displays only warning messages ERROR displays only error messages
readOnly: false,//read-only mode
tools: {//Tool list
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>
Create i18n translation file i18n.json
{
"ui": {
"blockTunes": {
"toggler": {
"Click to tune": "Click to tune",
"or drag to move": "or drag to move"
}
},
"inlineToolbar": {
"converter": {
"Convert to": "Convert to"
}
},
"toolbar": {
"toolbox": {
"Add": "Add"
}
}
},
"toolNames": {
"Text": "Text",
"Heading": "Title",
"List": "List",
"Warning": "Warning",
"Checklist": "Checklist",
"Quote": "Quote",
"Code": "code",
"Delimiter": "Delimiter",
"Raw HTML": "raw HTML",
"Table": "Table",
"Link": "Link",
"Marker": "Marker",
"Bold": "Bold",
"Italic": "italic",
"Image": "Picture"
},
"tools": {
"warning": {
"Title": "Title",
"Message": "Message"
},
"link": {
"Add a link": "Add a link"
},
"stub": {
"The block can not be displayed correctly.": "The block can not be displayed correctly."
}
},
"blockTunes": {
"delete": {
"Delete": "Delete"
},
"moveUp": {
"Move up": "Move up"
},
"moveDown": {
"Move down": "Move down"
}
}
}
Introduce components into the page
<template>
<div class="editorBox">
<editorJs ref="editorRef" :width="700" :height="1000" v-model="data"></editorJs>
<el-button @click="save">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({
//Define arrays and objects
data: ''
}))
const editorRef = ref(null)//Define common type
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>
This is just a simple example. For specific configuration, please go to the official website Editor.js (editorjs.io)
Editor.js does not include a traditional “top toolbar” directly in its core design. It is designed with a clean, distraction-free user experience in mind, with the focus being on “block” content rather than the traditional rich text editor style. Therefore, under the default settings of Editor.js, the top toolbar similar to Word or other traditional editors will not be displayed.
Let me tell you my experience: The official documentation is extremely unfriendly to Chinese. It is not recommended to use this editor unless you have a lot of time to develop and research
Editor.js is an open source library for building modern editors with a fully customizable block structure. It provides a clean, extensible, and easy-to-use interface that enables developers to create content-rich and interactive editors.
Here are some Editor.js features and benefits:
-
Block Structure: Editor.js adopts the concept of block structure, breaking content into different blocks that can be manipulated and styled independently, such as paragraphs, headings, images, lists, etc. This structure makes editing and expanding content more intuitive and flexible.
-
Nested blocks: Not only can you create a single block of content, but you can also create nested structures within blocks to build complex content combinations. For example, you can nest headings, lists, or quote blocks within paragraph blocks.
-
Simple UI: Editor.js’s user interface is designed to be clean, intuitive, and easy to use. Users can create, edit, and delete blocks with simple operations, without having to worry about complex markup syntax or styling details.
-
Open plug-in system: Editor.js provides a powerful plug-in system that allows developers to create custom block types and extend editor functionality. You can write your own block plugins if needed and integrate them into the editor to meet your specific editing needs.
-
Rich content preservation: Editor.js uses JSON format to save the editor’s content. This format is simple and easy to understand, easy to store and transfer, while retaining block structure and style information. You can save the editor’s contents to a database and reload it when needed.
-
Extensible themes and styles: Editor.js’s look and feel can be customized to fit your brand and design needs. You can create your own theme or use an existing theme to change the look of the editor.
-
Multi-language support: Editor.js supports multiple languages, making it easy to switch the editor’s display language or customize the translation of specific terms.
All in all, Editor.js is a powerful, flexible and easy-to-use editor library suitable for building rich text editing capabilities in various applications, such as content management systems, blogging platforms, e-commerce platforms, etc. It provides a modern editing experience while giving developers the freedom to customize the editor to suit individual needs.