【Vue.js】ブロックエディタのブロックっぽいモノを作る

　ブロックエディタはCMS（コンテンツ管理システム）のwebページエディタの一形態です。これは次スクリーンショットの様にある一塊の形式のHTMLを編集しつつ並べていきます。HTMLやCSSの知識なしにも崩れないデザインで好きにコンテンツを作れます。

　これを作る側の人の記事なのでブロックエディタの使い方でなくVue.jsでこのブロックの素体を作る方法を紹介します。
　Vue.jsにはコンポーネント指向の考え方が含まれています。HTML、JavaScript、CSSをブロック単位で切り分けて考える次スクショの様なものです。

　この考えがそのままブロックエディタに使えます。必要なデータのみ編集でき、編集される値に紐づいた値を持つHTMLタグを生成するコンポーネントを作り、複数個のそれを取り扱うのみです。コンポーネントの例が次です。

重要な点は2点あります。
　一つは次の :style=”style” による style 構造体のバインドです。この書き方をすることで出力部を一切触ることなくスタイルの変更機能を追加、削除できます。コードもすっきりします。

    <h2>プレビュー画面</h2>
    <div class="border" ref="tgt" >
        <label for="input-1" :style="style">{{ label }}</label><input type="text">
    </div>

    data: {
        label: 'デフォルトラベル',
        style:{
            fontSize: '32px'
        },
        code: '',
    },

　もう一つは ref=”tgt” と this.$refs[‘tgt’].outerHTML による参照です。Vue.jsのHTML生成コンポーネントのルートのouterHTMLを参照することで編集結果の静的HTMLを取得できます。

    <h2>プレビュー画面</h2>
    <div class="border" ref="tgt" >
        <label for="input-1" :style="style">{{ label }}</label><input type="text">
    </div>

    methods: {
        dumpHtml() {
            this.code = this.$refs['tgt'].outerHTML;
        }
    }

　こんな感じでいくつかの部分を編集できるブロックを多数用意して、それを増やしたり減らしたり、好きに配置できるようにして、編集とプレビューをやりやすいようにすればブロックエディタになります。