ガレコレ [Garage Collection]
2017年7月12日(水)
HTML5 Editor #HTML5&CSS3&JavaScript
 Webページ上で、文字に修飾できるエディター(編集機能)が完成したので、再度お知らせ。いくつかの問題が残されているものの、パソコンおよびスマホのいずれのブラウザでも利用できる。いよいよ『子猫の手 Ver.3』の作成に取り掛かれる。



【問題点】

(1) Windows10+Microsoft Edge,IEにおいて、CSSによる書き出しに対応していない。HTML5で廃止された<font>タグ、<strike>タグを使用してしまう。それらのタグは、ブラウザの方でサポートされているので、問題は回避できている。

--
・Windows10+Microsoft Edge,IE

<font color="red" size="5"><strike>赤色</strike></font>


・CSS書き出しに対応しているブラウザ

<span style="color: red; font-size: x-large; text-decoration-line: line-through;">赤色</span>
--

(2) Windows10+Microsoft Edge,IEにおいて、修飾を繰り返すことによって、不要なタグが残る場合がある。表示に影響しないので、問題は回避できている。

(3) 上付き、下付きでは、Windows10+Microsoft Edge,IEにおいて文字が小さくなるが、その他のブラウザでは同じサイズであり、表示に違いがある。

(4) Windows10+Google Chromeにおいて、全角文字が斜体で表示できない。

(5) パソコンでは、文字選択中は文字が反転したままなので、特に文字色の反映が確認しにくい。

(6) スマホでは、画面が小さいので使いづらい。



【プログラミングのポイント】

※ソースは、ブラウザからご確認下さい。


(1) 編集エリアを指定する。

--
<body>

<div id="id_html" contentEditable="true"></div>

</body>
--


(2) CSSによる書き出しに設定する。

 styleWithCSSコマンドに対応していないブラウザがあることは、悲しむべきことである。

 加えて、ページ更新するとフォームのラジオボタンで不可解な挙動をするブラウザに対処するために、checkedを記述した文字色の方にわざわざチェックを入れている。

 編集エリアをフォーカスすることで、パソコンではカーソルが明示される。

--
<script>

window.onload = _setup;

function _setup(){
  document.execCommand("styleWithCSS",0,true);
  document.forms[0].color[0].checked = true;
  document.getElementById("id_html").focus();
}

</script>
--


(3) 修飾用のボタンにフォームのボタンを使用することで、文字選択が外れない。

 今回は、簡易的に<input type="button" value="文字">を利用して、ボタン内に文字を表示した。ボタンに画像を表示するには、<input type="image" src="ファイル名">や<button type="button"><img src"ファイル名"><br>文字</button>を利用すれば良い。

--
<body>

<form>

<input type="button" class="btn" style="font-weight:bold;" value="B" title="Bold" onclick="_exec('bold')">

</form>

</body>
--


(4) 修飾関数_exec()の設定

 createLinkコマンドの場合、リンク先のアドレスをprompt()で入力させている。なお、カラー指定は別にしている。

--
<script>

function _exec($cmd,$val){
  switch($cmd){
  case "createLink":
    $val = prompt("link","http://");
    if($val==null || $val==""){
      break;
    }
  default:
    document.execCommand($cmd,false,$val);
  }
}

</script>
--

 下記のコマンドを_exec()で利用した。

--
justifyLeft
justifyCenter
justifyRight
outdent
indent
insertUnorderedList
insertOrderedList

bold
italic
underline
strikeThrough

superScript
subScript

createLink
unlink

fontSize

insertText
--

 createLinkに関して、さらに開発中。またもや、EdgeやIEが邪魔をする。Microsoft最低!

 insertTextが利用できるようになっていたのには驚いた。簡単に、文字の挿入および置換ができた。


(5) カラー関数_color()の設定

 文字色と背景色には、基本17色を含む35色をパレットにした。ガレコレのイメージカラーであるPink345(#ff0040)、サンズイのイメージカラーであるAqua170(#00ffd5)を、独断と偏見で入れてある。

 ラジオボタンで[文字色]と[背景色]を切り替えて、パレットを使用する。

--
<script>

function _color($val){
  if(document.forms[0].color[1].checked){
    $cmd = "backColor";
    
    if($val == "white"){
      $color = "transparent";
    }
    
  }else{
    $cmd = "foreColor";
  }
  
  document.execCommand($cmd,false,$val);
}

</script>
--

 カラー指定のコマンドは下記の2つである。

--
foreColor
backColor
--

 今回、初期値が、文字色black、背景色無しtransparentである。初期値を指定した場合、ブラウザが自動的に判断してくれて、HTMLタグが削除される。ゴミが残るブラウザは、言わずと知れたMicrosoft社のものである。


(6) HTMLタグを書き出す関数_html()の設定

 innerTextが利用できるようになっていたのには驚いた。簡単に記述できた。HTMLタグ書き出しエリアを、別に設けている。

 createLinkコマンドで作成した<a>タグに、setAttribute()でtarget="_blank"を追記して、リンクを新しいウインドウ(タグ)で表示するようにした。

--
<script>

function _html(){
  $target = document.getElementsByTagName("a");
  
  for($i=0; $i < $target.length; $i++){
    $target[$i].setAttribute("target","_blank");
  }
  
  document.getElementById("id_text").innerText = document.getElementById("id_html").innerHTML;
}

</script>
--


(7) コマンドをリセットする関数_reset()の設定

 実は、(6)と逆のことをやっているだけである。編集エリア自身に書き出している。

--
<script>

function _reset(){
  if( confirm("Do you reset commands?") ){
    document.getElementById("id_html").innerHTML = document.getElementById("id_html").innerText;
  }
}

</script>
--


(8) その他の修飾方法

 パソコンでは、下記のショートカットキーが利用できる。

--
 [Ctrl]+[B]: Bold
 [Ctrl]+[I]: Italic
 [Ctrl]+[U]: Underline
 [Ctrl]+[C]: Copy
 [Ctrl]+[V]: Paste
 [Ctrl]+[Z]: Undo
 [Ctrl]+[Y]: Redo
--

 iPhone (Safari)では、文字を選択したあと、ダイアログの右側▶をクリックすると[BIU]が表示される。これをタップすると[ボールド|イタリック|アンダーライン]に切り替わり、いずれかをタップする。
http://neconote.jp/prg/editor.html
 
お問い合わせ


by Network Communication Note