javascript – 物欲にまみれたにしふなばし

ちょっと色を変えたいとか、ちょっと太字にしたいとか、その程度のことだけ実現できるwysiwygエディタがあるといいんですが、そういう低機能（？）なエディタはそうそうあるもんじゃないんですね。

でもやっと見つけました。jqueryなしで動くという触れ込みの「wysihtml5」です。

wysihtml5 – A better approach to rich text editing

デモサイトのエディタのアイコンは最低限の機能だけに抑えられています。シンプルでいいですね(´∀｀*)

早速リファレンスを見ながら導入してみました。ちなみに俺が導入したバージョンは0.3.0です。

jquery非依存だからなのかもしれませんが、導入の手順が他のエディタと比べて少々込み入ってるかも？？

Getting Started · xing/wysihtml5 Wiki · GitHub

早速テストしてみました。……が、早々におかしな箇所を発見。日本語を入力してから変換するためにスペースキーを押すと、入力した文字が消えてしまいます。

試しに「変換」キーを押したら、問題なく変換されます。スペースキーの時だけおかしくなるみたいですね。

wysihtml5のコードを見てみると、スペースキーが絡む処理が書かれているのは8536行付近にある以下の部分だけみたいです。

dom.observe(element, "keyup", function(event) {
      var keyCode = event.keyCode;
      if (keyCode === wysihtml5.SPACE_KEY || keyCode === wysihtml5.ENTER_KEY) {
        //that.parent.fire("newword:composer");
      }
    });

dom.observe(element, "keyup", function(event) {

var keyCode = event.keyCode;

if (keyCode === wysihtml5.SPACE_KEY || keyCode === wysihtml5.ENTER_KEY) {

//that.parent.fire("newword:composer");

}

});

一箇所だけなので、試しにこのブロックをコメントアウトしてから再度動かしてみたら、今度は問題なく変換できるようになりました。これでまた変な問題が出たら考えますが、今のところは何とか動いているのでよしとしましょう。

それではでは(´・ω・)ﾉｼ

かなり行き詰ったポイントなので、メモ代わりに書き込み。

最近、Google Chromeの拡張機能（Extension）の制作をしてます。実装言語はJS＋HTMLで、Webページを作るような（？）感覚で出来上がるので簡単にできます。
・・・・・と思ったのが1か月程前。やってみると独自のメソッドがよー分からんかったり、日本語で書かれてるめぼしいドキュメントがあまりなかったりと、かなり苦労しました。英語がスラスラ読めるようになりたいっ＞＜
あ、ちなみにExtensionのリファレンスの非公式日本語訳のページはあります。しかし、俺がそれを発見したのは苦労して原文リファレンスを読み切った後でしたorz

そして、本題である開発中にハマった部分についてのメモ。
ブラウザーアクション（browserAction）で、右上に出るバッジをクリックするとポップアップメニューを出すように設定してあると、バッジをクリックしたときのイベントを受け取るリスナー chrome.browserAction.onClicked.addListener(function(tab)) が発動しなくなるんですね。

実例を出してみます。ここで取り上げているソースは、Chrome Extensionの公式リファレンスのSamplesにある、「A browser action which changes its icon when clicked.」からの引用です。
まず、manifest.jsonを見てみます。

{
  "name": "A browser action which changes its icon when clicked.",
  "version": "1.0",
  "background_page": "background.html",
  "permissions": [
    "tabs", "http://*/*"
  ],
  "browser_action": {
      "name": "Click to change the icon's color"
  }
}

{

"name": "A browser action which changes its icon when clicked.",

"version": "1.0",

"background_page": "background.html",

"permissions": [

"tabs", "http://*/*"

"browser_action": {

"name": "Click to change the icon's color"

}

そして、background.htmlがこちら。

<html>
<head>
<script>
  var min = 1;
  var max = 5;
  var current = min;

  function updateIcon() {
    chrome.browserAction.setIcon({path:"icon" + current + ".png"});
    current++;

    if (current > max)
      current = min;
  }

  chrome.browserAction.onClicked.addListener(updateIcon);
  updateIcon();
</script>
</head>
</html>

<html>

<head>

var min = 1;

var max = 5;

var current = min;

function updateIcon() {

chrome.browserAction.setIcon({path:"icon" + current + ".png"});

current++;

if (current > max)

current = min;

}

chrome.browserAction.onClicked.addListener(updateIcon);

updateIcon();

</script>

</head>

</html>

バッジをクリックするたびにバッジの色が変わる、という動きしかない分かりやすいソースです。background.htmlにクリックイベントを受け取るリスナーが登録されていて正常に動くのですが、manifest.jsonにこんな風に書き加えると、とたんに動かなくなります。

{
  ...
  "browser_action": {
      "name": "Click to change the icon's color",
      "popup": "popup.html"  //バッジをクリックしたらpopup.htmlが現れるよう設定。
  }
}

{

...

"browser_action": {

"name": "Click to change the icon's color",

"popup": "popup.html" //バッジをクリックしたらpopup.htmlが現れるよう設定。

}

もちろん、popup.htmlはあるものとして書いてあります。
このように書き加えると、chrome.browserAction.onClicked.addListener(updateIcon);は反応してくれなくなるんですよね。
まぁクリックしたときの処理はpopup.html内に書き込めってことかもしれませんが、それだと処理が各所に分散しちゃいますね。popupにはロジックをあまり書き込みたくないです。
でもgetBackgroundPage()を使えば、popupからバックグラウンドのファイルの中を見れるので分散は防げますね。それでも余計な呼び出しがpopupに残るので納得行きませんが・・・！

バッジをクリックしたときに、XmlHttpRequestで別のページを非同期的に読み込む処理をbackground.htmlで行って、取得したデータをpopup.html内に組み込もうとしたのですが、popupとonClickedのリスナーが同時に使えないとなると、他に使えるかもしれないのはsendMessageとonRequestイベントでの通信ですかね・・・　まだ試してないので明日トライしてみますorz

タグ: javascript

jqueryなしで動くwysiwygエディタ「wysihtml5」を使ってみたよ＆気がついたこと。

chrome.browserAction.onClicked.addListenerとpopupが共存してくれない件。