Manipulate elements into a selected block in command
Question
How can I manipulate elements into a block content?
For example: My block:
bm.add('img-text', {
label: 'Image + Text',
content: {
type: 'img-text',
content: '<table class="table"><tr><td style="width:50%;height:100%"><img style="width:100%;height:100%" /></td><td style="width:50%;height:100%"><span>Text<span></td></tr></table>'
}
});
My component:
domComps.addType('img-text', {
// Define the Model
model: defaultType.model.extend({
defaults:{
tagName: "div",
type: "",
name: "",
removable: !0,
draggable: !0,
droppable: !0,
badgable: !0,
stylable: !0,
"stylable-require": "",
unstylable: "",
highlightable: !0,
copyable: 0,
resizable: !1,
editable: !0,
layerable: !0,
selectable: !0,
hoverable: !0,
void: !1,
state: "",
status: "",
content: "",
icon: "",
style: "",
attributes: "",
classes: "",
script: "",
traits: ["id", "title"],
propagate: "",
toolbar: null
},
}
),
// Define the View
view: defaultType.view.extend({
events: {
'click': function(){
var openSmBtn = editor.Panels.getButton('views', 'options');
openSmBtn.set('active', 1);
}
},
})
});
Command:
editor.Commands.add('options', {
run: function(editor, sender){
const myContent = document.createElement('div');
var myText = editor.getSelected().find('span');
// Here I'm tring to change Text content
myText.set('content', 'New Content');
var myImg = editor.find('img')
const button = document.createElement('input');
button.type = "button";
button.className = "btn btn-success";
button.style = "margin-top:10px";
button.value = "Add a Image";
button.onclick = function () {
editor.runCommand("open-assets", {
// Here I'm tring to trigger assets toimg
target: myImg,
onSelect: function () {
editor.Modal.close(), editor.AssetManager.setTarget(null)
}
});
};
myContent.appendChild(botao);
}
});
Answers (2)
var myImg = editor.find('img') there is no editor.find method
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 #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Issue #1134
Add custom style in the style-sheet for a new class of existing block.
Hello @artf _("map") && i.add("map", { label: n.labelMap, category: n.category, attributes: { class: "fa fa-map-o" }, content: { type: "map...
Issue #854
Table block
I don't see any basic blocks that you can create a table. Even if I do the block, it is impossible to edit the text. Block example with thi...
Issue #1819
[Question]: Block content attributes (ngModel in my case) forced to lowercase
I am trying to use angular directive. On any of the block content, for example bm.add('radio-block',{ label:'Basic Form Element', category:...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.