I am composing a document using Editor.js.
https://editorjs.io/
I want the document to be partially read-only. Like some portions of the document, I want the user to be able to edit, and for the other blocks, I want the user to be restricted from editing, by making it read-only.
Here’s my Editor.js configuration:
this.editor = new EditorJS({
readOnly: this.userRole ? true: false,
holder: 'editorjs',
tools: {
header: Header,
image: {
class: ImageTool,
config:{
uploader:{
async uploadByFile(file) {
// Create a form data
const formData = new FormData();
formData.append('image', file);
try {
const response = await axios.post('upload_image_file', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
console.log("???? ~ uploadByFile ~ response.data:", response.data)
return {
success: 1,
file: {
url: response.data.file.url
}
};
} catch (error) {
console.error('Image upload error:', error);
return {
success: 0,
error: 'Image upload failed'
};
}
},
async uploadByUrl(url) {
try {
const response = await axios.post('upload_image_url', {
url: url
});
if (response.data.success && response.data.file && response.data.file.url) {
return {
success: 1,
file: {
url: response.data.file.url
}
};
} else {
return {
success: 0,
error: 'Image upload failed'
};
}
} catch (error) {
console.error('Image upload error:', error);
return {
success: 0,
error: 'Image upload failed'
};
}
}
}
}
},
textVariant: TextVariantTune,
checklist: {
class: Checklist,
inlineToolbar: true,
},
list: {
class: NestedList,
inlineToolbar: true,
config: {
defaultStyle: 'unordered'
},
},
embed: Embed,
Marker: {
class: Marker,
shortcut: 'CMD+SHIFT+M',
},
table: {
class: Table,
inlineToolbar: true,
config: {
rows: 2,
cols: 3,
},
},
warning: {
class: Warning,
inlineToolbar: true,
shortcut: 'CMD+SHIFT+W',
config: {
titlePlaceholder: 'Title',
messagePlaceholder: 'Message',
},
},
translator: {
class: Translate,
config: {
endpoint: 'http://localhost:5000/translate?text=',
}
},
attaches: {
class: AttachesTool,
config: {
endpoint: 'http://localhost:8008/uploadFile'
}
}
},
tunes: ['textVariant'],
data:this.contractData
});