how to use editor.getSelected().append(`<div>...`);

Question

WARNING

READ and FOLLOW next 5 steps, then REMOVE them before posting the issue

Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
Use the GitHub Issues EXCLUSIVELY for BUGS, FEATURE REQUESTS or QUESTIONS. Prefix the title of the issue with its context, eg. [Bug]: ....
Do a quick SEARCH first, to see if someone else didn't open the same issue
DON'T ASK to create examples/code for you, read DOCS and APIs first, then you can post what you have tried (we'd like to see your code) and what you're unable to achieve
All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED

Are you using the latest release (older versions are NOT supported)?
1. If you're not sure, type grapesjs.version in console and press ENTER
Are you facing the bug with your local copy of GrapesJS or with the current demo?
If a local copy
1. Indicate all informations about your OS, browser and GrapesJS version.
2. Are you able to reproduce the bug from the demo?
What is the expected behavior?
What happens instead?
If you're able to reproduce the bug indicate all the necessary steps
Attach screenshots (using KAP/LICEcap), screencasts or live demo
1. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
2. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl

Be sure to work on the latest version, as the feature might be already there
Keep in mind that the feature should be considered valid to use for everyone, not only for your case

Answers (2)

pouyamiralayi• March 3, 20204 reactions

@Rasazna in below example, i am using it inside a selected event, so when ever you click on an item, your changes apply!

editor.on('component:selected', model => {
        editor.getSelected().append('<div>BOO!</div>')
})

Cheers!

Rasazna• March 3, 20200 reactions

i did not understand how to use editor.getSelected().append(<div>...); feature . can someone give an example for it