それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript
CodeMirrorって何!?
JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ!GitHubやCodePenでも使われてる
また、カスタマイズもできるらしく、面白そう!!!!
実装してみた
以下の動画を見るとわかるが、本当にすごい簡単に実装できる。3分もあればできちゃう。
動画をみながら実際にやってみた
準備
CodeMirrorのページからCodeMirrorを動作させるためのファイルをZIPでダウンロードする
ダウンロードし、解凍したら、lib
とmode
という2つのフォルダをコピーしてくる
こんな感じ
. ├── index.html // 作成する ├── lib └── mode
libはCodeMirrorを動作させるために必須な物が入っている。modeは言語のシンタックスの設定ファイル。(themeというものもあるが、これはエディタのテーマ)
次にindex.htmlを編集する
コアとなるCSSとJavaScriptを読み込む
以下の2つはCodeMirrorを使うときには必ず読み込むファイル
- lib/codemirror.css
- lib/codemirror.js
mode
フォルダのファイルには言語のシンタックスの情報が記述されている
<head> ... <!-- 以下の2つは必ず読み込む --> <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> ... </head>
エディタの生成
エディタの生成するにはCodeMirror
オブジェクトを作るだけ
CodeMirrorのコンストラクタである要素を渡すと、その要素の中にエディタを生成してくれる(内側にできるんだね...てっきり外側に出来てるのかと思ってた...)
以下の例では、idがcodeeditor
のdiv要素の中にエディタを生成している
<body> <div id="codeeditor"></div> <script> const editor = CodeMirror(document.getElementById("codeeditor")); </script> </body>
HTMLが読み込まれると、以下のようにエディタができる!!!
(テキストは入力した)
全体のソース
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CodeMirror</title> <!-- 以下の2つは必ず読み込む --> <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <style> body { background-color: #ccc; } </style> </head> <body> <div id="codeeditor"></div> <script> const editor = CodeMirror(document.getElementById("codeeditor")); </script> </body> </html>
参考文献
CodeMirrorを使ってみた - JavaScript
コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた
textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた
まずは、http://codemirror.net/ にアクセスしてダウンロードする。(gitでcloneするのもいいらしい)
コーディング
まず、CodeMirrorを使うために必要なファイルをheadで読み込む
<head> <script src="lib/codemirror.js"></script> <link rel="stylesheet" href="lib/codemirror.css"> <!-- ハイライトしたい言語を選んで読み込むらしい --> <script src="mode/javascript/javascript.js"></script> </head>
第1引数に設定した要素の中にテキストエリアを作成する。第2引数にはテキストエリアの設定をdictionaryで渡すことができる。
CodeMirror(要素, テキストエリアの設定);
body内にテキストエリアを作成してみる
CodeMirror(document.body);
mode
で言語の指定、value
で初期値を設定できる
CodeMirror(document.body, { mode: "javascript", value: "const text = () => {return 0;}" });
縦、横幅の指定
setSize()
で指定できるらしい。
横を100px、縦を200pxに指定する場合
const cm = CodeMirror(elem); cm.setSize("100px", "200px");
すでにある要素と置き換え
/** * CodeMirrorに置き換える * @param {Object} 置き換えるHTMLElement */ const replaceCodeMirror = (elem) => { // 行数の表示 const conf = { lineNumbers: true, }; // 置き換え const editor = CodeMirror(elt => { elem.parentNode.replaceChild(elt, elem); }, conf); editor.setSize("100%", "100%"); }; replaceCodeMirror(document.getElementById("editor1"));
公式ページに乗ってた方法を使って置き換えをしてみた
idがeditor1の要素をCodeMirrorに置き換えている
普通の使い方はtextareaとリンクさせるらしい
いろんな設定ができるらしいから少しずつやっていこう
参考文献
ある要素の前に追加 insertBefore - JavaScript
指定要素の前に要素を追加するにはelement.insertBefore()
を使う
element.insertBere(追加要素, 起点要素)
elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ
実際にやってみた
sub2の前に要素(青い要素)を追加する
See the Pen 指定の要素の前に追加 by tamago (@tamago324) on CodePen.
<div class="main"> <div class="sub default">sub1</div> <div class="sub default" id="ref">sub2</div> <div class="sub default">sub3</div> </div>
// 親要素 const main = document.querySelector(".main"); // 追加要素の作成 const sub4 = document.createElement("div"); sub4.classList.add("sub", "add"); // 起点要素 const ref = document.querySelector("#ref"); main.insertBefore(sub4, ref);
mainの中にあるrefの前にsub4を追加
参考文献
classを操作 - JavaScript
element.classList
を使うことでclassの操作ができる
GItHubのページでもclassList
を使っていた
add
classの追加ができる
element.add("class-name");
また、一度に複数追加することもできる
element.add("class-name1", "class-name2");
remove
classの削除ができる
element.remove("class-name");
item
使う時が来たら書く
toggle
classがすでにあれば削除、なければ追加
element.toggle("class-name");
contains
classが含まれていれば、True
replace
使う時が来たら書く
参考文献
親要素の取得 - JavaScript
element.parentNode
を使う
<div class="main"> main <div class="sub">sub</div> </div>
const subElem = document.querySelector('.sub'); const mainElem = subElem.parentNode; alert(mainElem.innerText);
参考文献
タブの表示 2 - CSS
CSSだけでタブを表示するやつを昨日書いたけど、他にもいい方法がないか探していたところ、JavaScriptで追加し他要素にも対応できそうな書き方があったため、実装してみた
↓昨日書いたやつ
See the Pen dmEGry by tamago (@tamago324) on CodePen.
<ul> <li id="tab1"><label for="radio1">TAB 1</label></li> <li id="tab2"><label for="radio2">TAB 2</label></li> <li id="tab3"><label for="radio3">TAB 3</label></li> </ul> <div> <input id="radio1" class="tab-input" type="radio" name="tab-input"> <div class="content">CONTENT 1</div> <input id="radio2" class="tab-input" type="radio" name="tab-input"> <div class="content">CONTENT 2</div> <input id="radio3" class="tab-input" type="radio" name="tab-input"> <div class="content">CONTENT 3</div> </div>
.tab-input { display: none; } .content { display: none; } [id^="radio"]:checked + div { display: block; }
ポイント
ラジオボタンとコンテンツは隣同士にする
関連するラジオボタンとコンテンツを隣同士にすることでCSSで+
が使えるようになる
+
は隣の要素という意味
ラジオボタンにチェックが付いたら隣のdivを表示する といったような事ができる
<input id="radio1" class="tab-input" type="radio" name="tab-input"> <div class="content">CONTENT 1</div>
[id^="radio"]:checked + div { display: block; }
正規表現的なセレクタを使う
[id=^"radio"]
のような正規表現みたいな感じでスタイルを設定できる
[id=^"radio"]
は「idがradioで始まる要素」というセレクタになる
[id^="radio"]:checked + div { display: block; }
参考文献
タブの表示 - CSS
こっちの書き方のほうが好き
こんな感じのタブ!!!
See the Pen qowGpN by tamago (@tamago324) on CodePen.
ポイント
ラジオボタンの非表示
ラジオボタンは見せなくていいから非表示にする
input[type="radio"] { display: none; }
ラベルを横並びにしてタブっぽく
横並びにすることでタブっぽくなる
.tab-item { /* 横並びにしている */ display: block; float: left; }
コンテンツのデフォルトは非表示
デフォルトは非表示にすることで、一つだけ表示ができるようになる
.tab-content { display: none; }
clear-fixでfloatの解除
clear-fixという技術を使うとfloatの解除ができる
clear-fixについてはfloatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17を参考にした
.clearfix:after { content: ""; clear: both; display: block; }
選択されたものに紐付けてコンテンツを表示
xxx:checked ~ yyyy
でxxx
にチェックがついているときのyyy
のスタイルを設定する
IDじゃないといけないのかな??JavaScriptで追加した要素に対してはどうしようかな...
#tab1:checked ~ #tab1-content, #tab2:checked ~ #tab2-content, #tab3:checked ~ #tab3-content{ display: block; }
テキストディタにタブを付けたい!!!タブの作成とか、削除とかもやりたい!!!