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

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

wysiwygとは？
vue-trix
使い方
1. 注意点
動作確認
1. 所感

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形式で書くのでいらないか、、、となりました🥳笑

👋