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:
southseact-3d
2026-02-10 18:13:13 +00:00
parent c38dc20733
commit 8e8129d71c

View File

@@ -279,75 +279,148 @@ function initEditor(savedContent = null) {
if (editor) { if (editor) {
editor.destroy(); editor.destroy();
} }
// 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
}
};
}
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'
},
field: 'image',
types: 'image/*'
}
};
}
if (EmbedClass) {
tools.embed = {
class: EmbedClass,
config: {
services: {
youtube: true,
vimeo: true,
twitter: true,
codepen: true
}
}
};
}
if (CodeToolClass) {
tools.code = {
class: CodeToolClass
};
}
if (QuoteClass) {
tools.quote = {
class: QuoteClass,
inlineToolbar: true,
config: {
quotePlaceholder: 'Enter a quote',
captionPlaceholder: 'Quote\'s author'
}
};
}
if (TableClass) {
tools.table = {
class: TableClass,
inlineToolbar: true,
config: {
rows: 2,
cols: 2
}
};
}
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 = { const editorConfig = {
holder: 'editor', holder: 'editor',
tools: { tools: tools,
header: {
class: Header,
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,
config: {
endpoints: {
byFile: '/api/admin/blogs/upload-image'
},
field: 'image',
types: 'image/*'
}
},
embed: {
class: Embed,
config: {
services: {
youtube: true,
vimeo: true,
twitter: true,
codepen: true
}
}
},
code: {
class: CodeTool
},
quote: {
class: Quote,
inlineToolbar: true,
config: {
quotePlaceholder: 'Enter a quote',
captionPlaceholder: 'Quote\'s author'
}
},
table: {
class: Table,
inlineToolbar: true,
config: {
rows: 2,
cols: 2
}
},
marker: {
class: Marker
}
},
placeholder: 'Start writing your post...', placeholder: 'Start writing your post...',
data: savedContent || { data: savedContent || {
blocks: [ blocks: [
@@ -361,8 +434,14 @@ function initEditor(savedContent = null) {
}, },
readOnly: currentEditingPost?.source === 'repo' readOnly: currentEditingPost?.source === 'repo'
}; };
editor = new EditorJS(editorConfig); 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 // Handle post form submission