Fix Editor.js plugin loading errors in blog admin
- Add multiple fallback global variable names for Editor.js plugins - Add debug logging to track plugin availability - Add error handling for editor initialization - Ensure at least paragraph tool is available before initializing - Fix ReferenceError: List is not defined when opening post modal
This commit is contained in:
@@ -280,32 +280,79 @@ function initEditor(savedContent = null) {
|
||||
editor.destroy();
|
||||
}
|
||||
|
||||
const editorConfig = {
|
||||
holder: 'editor',
|
||||
tools: {
|
||||
header: {
|
||||
class: Header,
|
||||
// Check if Editor.js and plugins are loaded
|
||||
if (typeof EditorJS === 'undefined') {
|
||||
console.error('EditorJS is not loaded');
|
||||
showStatus('Editor failed to load. Please refresh the page.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Map plugin names to their global variables with multiple possible names
|
||||
const HeaderClass = window.Header || window.EditorJSHeader;
|
||||
const ParagraphClass = window.Paragraph || window.EditorJSParagraph;
|
||||
const ListClass = window.List || window.EditorjsList || window.EditorJSList;
|
||||
const LinkToolClass = window.LinkTool || window.Link || window.EditorJSLink;
|
||||
const ImageToolClass = window.ImageTool || window.Image || window.EditorJSImage;
|
||||
const EmbedClass = window.Embed || window.EditorJSEmbed;
|
||||
const CodeToolClass = window.CodeTool || window.Code || window.EditorJSCode;
|
||||
const QuoteClass = window.Quote || window.EditorJSQuote;
|
||||
const TableClass = window.Table || window.EditorJSTable;
|
||||
const MarkerClass = window.Marker || window.EditorJSMarker;
|
||||
|
||||
// Log available plugins for debugging
|
||||
console.log('Editor.js plugins availability:', {
|
||||
EditorJS: typeof EditorJS,
|
||||
Header: typeof HeaderClass,
|
||||
Paragraph: typeof ParagraphClass,
|
||||
List: typeof ListClass,
|
||||
LinkTool: typeof LinkToolClass,
|
||||
ImageTool: typeof ImageToolClass,
|
||||
Embed: typeof EmbedClass,
|
||||
CodeTool: typeof CodeToolClass,
|
||||
Quote: typeof QuoteClass,
|
||||
Table: typeof TableClass,
|
||||
Marker: typeof MarkerClass
|
||||
});
|
||||
|
||||
// Build tools object dynamically, only including available plugins
|
||||
const tools = {};
|
||||
|
||||
if (HeaderClass) {
|
||||
tools.header = {
|
||||
class: HeaderClass,
|
||||
config: {
|
||||
levels: [2, 3, 4, 5, 6],
|
||||
defaultLevel: 2
|
||||
}
|
||||
},
|
||||
paragraph: {
|
||||
class: Paragraph,
|
||||
inlineToolbar: true
|
||||
},
|
||||
list: {
|
||||
class: List,
|
||||
inlineToolbar: true
|
||||
},
|
||||
link: {
|
||||
class: LinkTool,
|
||||
config: {
|
||||
endpoint: '/api/fetch-url' // Optional: for link previews
|
||||
};
|
||||
}
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
|
||||
if (ParagraphClass) {
|
||||
tools.paragraph = {
|
||||
class: ParagraphClass,
|
||||
inlineToolbar: true
|
||||
};
|
||||
}
|
||||
|
||||
if (ListClass) {
|
||||
tools.list = {
|
||||
class: ListClass,
|
||||
inlineToolbar: true
|
||||
};
|
||||
}
|
||||
|
||||
if (LinkToolClass) {
|
||||
tools.link = {
|
||||
class: LinkToolClass,
|
||||
config: {
|
||||
endpoint: '/api/fetch-url'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (ImageToolClass) {
|
||||
tools.image = {
|
||||
class: ImageToolClass,
|
||||
config: {
|
||||
endpoints: {
|
||||
byFile: '/api/admin/blogs/upload-image'
|
||||
@@ -313,9 +360,12 @@ function initEditor(savedContent = null) {
|
||||
field: 'image',
|
||||
types: 'image/*'
|
||||
}
|
||||
},
|
||||
embed: {
|
||||
class: Embed,
|
||||
};
|
||||
}
|
||||
|
||||
if (EmbedClass) {
|
||||
tools.embed = {
|
||||
class: EmbedClass,
|
||||
config: {
|
||||
services: {
|
||||
youtube: true,
|
||||
@@ -324,30 +374,53 @@ function initEditor(savedContent = null) {
|
||||
codepen: true
|
||||
}
|
||||
}
|
||||
},
|
||||
code: {
|
||||
class: CodeTool
|
||||
},
|
||||
quote: {
|
||||
class: Quote,
|
||||
};
|
||||
}
|
||||
|
||||
if (CodeToolClass) {
|
||||
tools.code = {
|
||||
class: CodeToolClass
|
||||
};
|
||||
}
|
||||
|
||||
if (QuoteClass) {
|
||||
tools.quote = {
|
||||
class: QuoteClass,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
quotePlaceholder: 'Enter a quote',
|
||||
captionPlaceholder: 'Quote\'s author'
|
||||
}
|
||||
},
|
||||
table: {
|
||||
class: Table,
|
||||
};
|
||||
}
|
||||
|
||||
if (TableClass) {
|
||||
tools.table = {
|
||||
class: TableClass,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
rows: 2,
|
||||
cols: 2
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
class: Marker
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
if (MarkerClass) {
|
||||
tools.marker = {
|
||||
class: MarkerClass
|
||||
};
|
||||
}
|
||||
|
||||
// Ensure at least paragraph tool is available
|
||||
if (!tools.paragraph) {
|
||||
console.error('No paragraph tool available');
|
||||
showStatus('Editor tools failed to load. Please refresh the page.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const editorConfig = {
|
||||
holder: 'editor',
|
||||
tools: tools,
|
||||
placeholder: 'Start writing your post...',
|
||||
data: savedContent || {
|
||||
blocks: [
|
||||
@@ -362,7 +435,13 @@ function initEditor(savedContent = null) {
|
||||
readOnly: currentEditingPost?.source === 'repo'
|
||||
};
|
||||
|
||||
try {
|
||||
editor = new EditorJS(editorConfig);
|
||||
console.log('Editor.js initialized successfully');
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Editor.js:', error);
|
||||
showStatus('Failed to initialize editor: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Handle post form submission
|
||||
|
||||
Reference in New Issue
Block a user