joppot

コピペで絶対動く。説明を妥協しない

プログラミング

wysiwygエディタのSquire editorのサンプルを作成する

投稿日:

Pocket

fea09j0pfaew

概要

みなさんこんにちはcandleです。
今回オープンソースのsquireエディタをhtmlに手動で導入したいと思います。

squireはオープンソースの便利なwysiwygエディタです。
カスタマイズ性に特に優れていています。

Squireは基本的にデザインがありません。
wysiwygエディタを作るためのエンジンみたいなものです。
デザインは各自、自分で作るのですが、これが以外に難しいので、
squireの公式ページにもあるようにtwitter bootstrapにそったデザインを導入して解説します。


前提

linuxの最低限のコマンド

SPONSORED LINK


基本ファイルを作成する

それでは基本ファイルを作成します。
適当なフォルダを作成します。
私はホームディレクトリにhtmlprojectフォルダを作り、そこに作って行きます。

mkdir ~/htmlproject

次に基本構成ファイルを作ります。

touch index.html
mkdir css js

squirestructfiles


squireをダウンロードする

githubからライブラリをダウンロードします。

https://github.com/neilj/Squire

サイトの「Donwload ZIP」からダウンロードします。

neiljSquiredownloadzip

zipを解凍したら、
buildの中の「squire-raw.js」を使用します。

squirerawjs

これを先ほど作成したjsフォルダ「htmlproject/js/」に配置します。

putonjshtmlproject

squireの公式ページにあるサンプルが使用しているjsとcssを取ってきます。
下の2つをダウンロードしてください。

http://neilj.github.io/Squire/build/Squire-UI.js

http://neilj.github.io/Squire/build/Squire-UI.css

これをそれぞれ
jsは「htmlproject/js/」
cssは「htmlproject/css/」
に配置します。

putongoodhtmlproject

Squireのメニューのhtmlをダウンロードします。
サンプルではメニューのhtmlを切り離して、
jsで呼び込みそれを表示しています。

htmlをダウンロードします。

http://neilj.github.io/Squire/build/Squire-UI.html

これをindex.htmlがある場所におきます。

squirehtmlmenu

squire自体の必要なファイルはそろいました。

bootstrap3をダウンロードする

squireのサンプルはtiwtter bootstrapを使用しているので、それをダウンロードします。

http://getbootstrap.com

gooo

「Download Bootstrap」を押します。

downloadthis

ダウンロードページに移動したら「Download Bootstrap」を押します。

zipがダウンロードされるので、それを解凍します。

以下をhtmlprojectに移動させます。

rawdataofbootstrap

それぞれをjsとcssフォルダに移動させます。

marindabootstrap

font-awesomeをダウンロードする

続いて、font-awesomeをダウンロードします。
Squireのサンプルではアイコンの表示にこれを使用しています。
公式サイトからダウンロードしてください。

http://fortawesome.github.io/Font-Awesome/

downloadfontawesome

解凍したら、そのフォルダの「fonts」フォルダをそのままhtmlprojectフォルダに移動させます。

font-awesome430moved

font-awesomeのcssフォルダの中にあるfont-awesome.min.cssを移動させます。

smovefontawesomecss

jqueryを用意する

bootstrap3はjqueryを使用しているのでそれをダウンロードしましょう。

http://jquery.com

downloadjqueryfromgeneral

圧縮されたjqueryをダウンロードしましょう

choisedownloadjquerycompress

ダウンロードしたら、htmlprojectのjsフォルダに移動して、名前を「jquery.min.js」
に変更しておいてください。
最終的に以下の様なファイル構成になっていればよいと思います。

samplesquireexampl-1

index.htmlを編集する

index.htmlに以下のコードを書いてください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>Squire Editor</title>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link href="css/font-awesome.min.css" rel="stylesheet"/>
    <link href="css/Squire-UI.css" rel="stylesheet"/>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/squire-raw.js"></script>
    <script src="js/Squire-UI.js"></script>

    <script>
      $(function () {
        var UI = new SquireUI({
          replace: 'textarea#seditor',
          buildPath: "",
          height: 300
        });
      });
    </script>

  </head>
  <body>
    <form action=""  id="squire_form" method="post">
      <div class="form-group">
        <textarea id="seditor"></textarea>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </body>
</html>

exampledoit

コードの最初に必要なcssとjavascriptを呼び出しています。

htmlの記述はformの部分のみです。textareaタグにseditorというidを割り振り、それをSquireのエディタにしています。

javascriptは上から解説すると、
replaceオプションで#seditorをsquireエディタに変換しています。
buildオプションはSquire-UI.htmlが置かれている場所を参照させます。今回は空文字を宣言する事で、Squire-UI.htmlにアクセスできます。
heightはエディタの高さです。

これで完成です。
サイトにアクセスしてみましょう。

squireeditviews

まとめ

実は厳密にはこのままだとformからsquireの内容は送れません。
というのもデータはsquireのiframeの中に書かれているので、
これをformの送信で送っても例えばphpやrailsなどのサーバーサイドでは受け止められません。
そのやり方は次回試してみましょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

gemspecのsummary項目とdescription項目の違いに付いて

概要 みなさんこんにちはcandleです。 gemを自作していたら、gemspecのところでsummaryとdescriptionの違いが分からなかったので、 調べたら、公式ページに書いてあったので、 …

MAMPにCakePHPを導入して動かす

概要 みなさんこんにちはcandleです。今回はMAMPでCakePHPを動かす環境設定を行いましょう。 条件 MAMPがインストールされている CakePHPをダウンロードする 下のCakePHPの …

Rails pluginでengineを使ったgemの作り方[5](view helper編)

概要 みなさんこんにちはcandleです。今回はgemのview helperの作り方です。 helperというのは様はgemにすることで便利になる関数を作るとというイメージです。 よくあるのが、こん …

phpのsnappyライブラリをmacで使用して、webサイトのサムネイルを取得する

概要 みなさんこんにちはcandleです。今回はsnappyを使用して、ウェブサイトのサムネイルを自動的に取得したいとおもいます。 snappyはそれ自体がhtmlを画像にするスクリプトではなく、wk …

railsでsvgをviewに表示する

概要 みなさんこんにちはcandleです。 今回はrailsでsvgを出力します。 レスポンシブウェブデザインから始まり、最近ではwebでもsvgの使用が増えてきたような気がします。 手こずらずにsv …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ