[javascript]electron-vueでvue-trixを使ってみた

electron

wordpressに投稿するためのデスクトップアプリをelectron-vueで書いてます😎
WYSIWYGエディタのvue-trixを使ってみました。

wysiwygとは?

WYSIWYG(アクロニム: ウィジウィグ)とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容(特に印刷結果)が一致するように表現する技術。What You See Is What You Get(見たままが得られる)の頭文字をとったものであり、「is」を外したWYSWYG(ウィズウィグ)と呼ばれることもある。
by wikipedia

wikipedia見るとなんか難しい感じで書いてますね。
wordpressのエディタについている、押したら大文字になったり、リンクが貼れたりするあの便利機能です。

vue-trix

trixが簡単な機能だけののwysiwygエディタみたいだったので、これなら使いやすそうだなと、
vue用のvue-trixをnpm installして使ってみました。

tinymceも使ってみようとしたんですが、viewに書いたらapi-keyを求められたのでやめましたw

使い方

npm install --save vue-trix

でモジュールを落としてきて、

import VueTrix from "vue-trix";
export default {
    ・・・
    components: {
        VueTrix
    },
    ・・・
}

使うvueファイルでimportしてcomponentsに定義しておきます。

<VueTrix placeholder="Enter content" rows="18" />

あとは上記のように定義すると表示されます。

注意点

そのままだとCSSが効かないので読み込んであげる必要がありました。
src/renderer/App.vue に

import '../../node_modules/vue-trix/dist/vue-trix.css'

としました…

モジュールの中でやってくれないのか…😅

動作確認

こんな感じで打ち消し、太字、コード表示、リストなどを作れます。
hiddenに内容が保持されます。(HTML形式)

所感

入れてはみたものの、結局はmarkdown形式で書くのでいらないか、、、となりました🥳笑

👋

コメント

タイトルとURLをコピーしました