Adding a working Import Panel Button without the presets
Question
I want to add the Import button at the panel for importing templates, but I don't want to use the presets. I have already added the following code:
... { id: 'import', className: 'fa fa-download', attributes: {title: 'Import Your Template'}, command: function(editor, sender){ ???? } } ...
I don't know what should be in the command. Please, could you tell me the function to use for command?
Answers (2)
Oh, I just figured it out. So, for those who might be curious about how to solve this, this is how I went about it (by the way, this is thanks to the answer in Issue #324 :
var pfx = editor.getConfig().stylePrefix;
var modal = editor.Modal;
var cmdm = editor.Commands;
var codeViewer = editor.CodeManager.getViewer('CodeMirror').clone();
var pnm = editor.Panels;
var container = document.createElement('div');
var btnEdit = document.createElement('button');
codeViewer.set({
codeName: 'htmlmixed',
readOnly: 0,
theme: 'hopscotch',
autoBeautify: true,
autoCloseTags: true,
autoCloseBrackets: true,
lineWrapping: true,
styleActiveLine: true,
smartIndent: true,
indentWithTabs: true
});
btnEdit.innerHTML = 'Import';
btnEdit.className = pfx + 'btn-prim ' + pfx + 'btn-import';
btnEdit.onclick = function() {
var code = codeViewer.editor.getValue();
editor.DomComponents.getWrapper().set('content', '');
editor.setComponents(code.trim());
modal.close();
};
cmdm.add('html-import', {
run: function(editor, sender) {
sender && sender.set('active', 0);
var viewer = codeViewer.editor;
modal.setTitle('Edit code');
if (!viewer) {
var txtarea = document.createElement('textarea');
container.appendChild(txtarea);
container.appendChild(btnEdit);
codeViewer.init(txtarea);
viewer = codeViewer.editor;
}
modal.setContent('');
modal.setContent(container);
codeViewer.setContent('');
modal.open();
viewer.refresh();
}
});
pnm.addButton('options',
[
{
id: 'import',
className: 'fa fa-download',
command: 'html-import',
attributes: {
title: 'Import Your Template'
}
}
]
);
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1496
issue in adding new row cell in grapejs not working
i am using grapejs version 0.14.33 with angular 6 i want to add a section with 2 blocks on block manager as created on grapejs demo. and fo...
Issue #1671
[Question] Adding html once canvas is cleared.
Hey Artur I'd like to add some default html code when users click clear button. for instance 1 section by default. for clear command, i'm d...
Issue #835
Update the Canvas with a custom function
I'm trying to create a function that replaces all the attributes of link, these make the change in the canvas, but don't save it when I try...
Issue #921
[QUESTION] Select and focus an html element from a panel button
Hi everyone, Is it possible to set focus in a section html with Grapes, like as an anchor? I have a panel button and it just select the sec...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.