This example shows how to get an added block and manipulate it. Add a paragraph via plus button on the toolbar.
<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">
<h2>...</h2>
<div class="noneditable">
<p>Content</p>
</div>
</textarea>
<!-- js -->
<script src="/your-article-dist-path/article-editor.min.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
css: '/your-article-dist-path/',
subscribe: {
'block.add': function(event) {
var instance = event.get('instance');
if (instance.isType('paragraph')) {
var $block = instance.getBlock();
// example of manipulation of a block
$block.html('My text');
// set caret to the end
this.app.caret.set($block, 'end')
}
}
}
});
</script>
</body>
</html>
The example shows how to get a block by setting event observation when the editor starts. Another way is to make a plugin and catch the event in it.
// plugin code
ArticleEditor.add('plugin', 'observe-add', {
subscribe: {
'block.add': function(event) {
this.observe(event);
}
},
observe: function(event) {
var instance = event.get('instance');
if (instance.isType('paragraph')) {
var $block = instance.getBlock();
// example of manipulation of a block
$block.html('My text');
// set caret to the end
this.app.caret.set($block, 'end')
}
}
});
// run Article with plugin
ArticleEditor('#entry', {
css: '/your-article-dist-path/',
plugins: ['observe-add']
});