Issue #1220Opened June 19, 2018by JulyanoF0 reactions

[Question] 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)

artfJune 20, 20180 reactions

var myImg = editor.find('img') there is no editor.find method

lock[bot]September 17, 20190 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.