🐈

Vue3.js(Tauri vue3) から始めるディスクトップアプリ #7[monaco Editor の導入をしようその1]

2023/07/05に公開

editor

はじめに

前回から時間がたってしまいました。待っている人少ないと思いますが再開します。
今回は、monaco Editorの組み込みをします。

自作ツールにEditorを組込に関する考察

Editorを自作するのは時間がいくらあっても足りないと思いますし、努力に見合うリターンが得られると思いません。のでライブラリを探します。
有償のものから、MITライセンスのものまで探すとたくさんあります。
今回は、商用利用可能なライブラリで、かつ無償なライブラリを採用したいと思います。
WYSIWYGのEditorが多く検索に引っ掛かりますが、SQLを中心に記述するEditorにしたいため、WYSIWYGは不要です。時間をかけて検索し実績とサンプルの多さでAceEditorとMonacoEditorあたりが候補なりました。メリデメとか見てもさっぱりわからないので、見た目の好みを優先し、みんな大好きVisualStadioCodeで利用されているMonacoEditorを採用します。

2023/7/4 時点最新の　MonacoEditor v0.39.0を利用します。

MonacoEditor の組み込み

適当にインストールしてください。

npm install monaco-editor@0.39.0

monaco vue3 とかで検索すると、monaco-editor-vue3やら多様なパッケージがでてきますが、メンテが継続されておらず導入は避けた方が無難かと思います。（2023.07.04時点）

package.json

{
  "name": "myproject",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tauri-apps/api": "^1.2.0",
    "monaco-editor": "^0.39.0",
    "vite-plugin-vuetify": "^1.0.0",
    "vue": "^3.2.41",
    "vuetify": "^3.0.2"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.2.1",
    "@vitejs/plugin-vue": "^3.2.0",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "typescript": "^4.6.4",
    "vite": "^3.2.3",
    "vue-tsc": "^1.0.9"
  }
}

MonacoEditor Vueコード

下記のようなコードを書けば動作します。
特に解説いらんとおもいますので略しますが、実はこのコードはGPT様に記述いただきました。
なのでGPT様質問はそちらにお願いします。あと忘れてましたがTSでリクエストしていないです。

MonacoEditor.vue

<template>
  <div ref="editor" class="editor-container"></div>
</template>

<script>
import * as monaco from "monaco-editor";

export default {
  name: "Editor",
  mounted() {
    this.editor = monaco.editor.create(this.$refs.editor, {
      value: `// Type source code in your language here...
class MyClass {
  @attribute
  void main() {
    Console.writeln( "Hello world\n");
  }
}`,
      language: "javascript", // テキストエディタ言語
      lineNumbers: "on", // 行番号表示
      roundedSelection: true, // 選択範囲を角丸に
      scrollBeyondLastLine: false, // 最終行以降のスクロール
      readOnly: false, // 読取専用
      theme: "vs-dark", // テーマ
    });
  },
  beforeUnmount() {
    this.editor.dispose();
  },
};
</script>

<style scoped>
.editor-container {
  height: 400px;
}
</style>

実行結果

日本語の入力なども問題ありません。

お疲れさまでした。