joppot

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

プログラミング

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

投稿日:

Pocket

fea09j0pfaew

概要

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

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

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


前提

linuxの最低限のコマンド



基本ファイルを作成する

それでは基本ファイルを作成します。
適当なフォルダを作成します。
私はホームディレクトリに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

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

関連記事

fabricでvagrantのデフォルトの秘密鍵を使ってサーバにアクセスする

概要 みなさんこんにちはcandleです。今回はfabricを使ってvagrant上のvmにアクセスする方法を紹介します。様々なサイトを閲覧すると、あまりvagrantのデフォルトの鍵を使用して、fa …

React NativeでGoogle Chrome上でのデバッグ時に動作が遅くなる場合の対処

English 日本語 概要 みなさんこんにちはcandleです。 今回はReact NativeのデバッグでChromeを使うと シミュレーターの動作が遅くなってしまう問題を対処します。 とは言って …

Mysqlのdatetime型とtimestanp型で保存されているデータを年月日だけを指定して任意の日にちのデータを取得する方法

概要 みなさんこんにちはcandleです。今日はmysqlのdatetime型とtimestanp型におさめられているデータの取得を紹介します。 datetimeやtimestanpは多くの場合下のよ …

railsのroutesでhttpのGETやPOSTを指定してルーティングを表示する

概要 みんさんこんにちはcandleです。今回は少し頭をひねれば分かる事ですが、少し迷ったので、記事にまとめました。 railsですごいwebアプリケーションを作っていると、ルーティングが複雑きわまり …

Stinger3のURLまたはタブの横にあるロゴを変更する

概要 みなさんこんにちはcnadleです。Stinger3のカスタマイズをしましょう。どんなwebサイトでもURLの周辺にロゴがありますよね。今回はそれを変更します。 条件 WordPressを利用し …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ