Get a block after pressing a key

This example shows how to get a block after pressing the enter key and manipulate it. Press enter in any text block to see the result.

    Code

    <!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: {
                'editor.keyup': function(event) {
                    var e = event.get('e');
                    var key = e.which;
                    if (key === 13 && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
                        var instance = this.app.block.get();
                        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>

    Usage

    The example shows how to get a block after pressing a key 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-enter', {
        subscribe: {
            'block.add': function(event) {
                this.observe(event);
            }
        },
        observe: function(event) {
            var e = event.get('e');
            var key = e.which;
            if (key === 13 && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
                var instance = this.app.block.get();
                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-enter']
    });