4

yesodweb のチュートリアルの blog-example と nicEditor は正常に動作します。yesod や scaffolding などについて学ぶために、nicEdit をダウンロードして解凍し、/static/js/nicEdit.js に入れました。

次に、Handler/Blog.hs を編集し、そこに以下を追加しました (Yesod.Form.Nic から少し変更 + いくつかのインポート):

-- nicHtmlField2 :: YesodNic master => Field sub master Html
nicHtmlField2 = Field
    { fieldParse = \e _ -> return . Right . fmap (preEscapedText . sanitizeBalance) . listToMaybe $ e
    , fieldView = \theId name attrs val _isReq -> do
        toWidget [shamlet|
$newline never
    <textarea id="#{theId}" *{attrs} name="#{name}" .html>#{showVal val}
|]
        -- addScript' urlNicEdit
        addScript $ StaticR js_nicEdit_js
        -- addScript $ StaticR img_nicEditorIcons_gif
        master <- lift getYesod
        toWidget $
          case jsLoader master of
            BottomOfHeadBlocking -> [julius|
bkLib.onDomLoaded(function(){new nicEditor({fullPanel:true}).panelInstance("#        {rawJS theId}")});
|]
            _ -> [julius|
(function(){new nicEditor({fullPanel:true}).panelInstance("#{rawJS theId}")})();
|]
    , fieldEnctype = UrlEncoded
    }
  where
    showVal = either id (pack . renderHtml)

次に、entryForm で Handler/Blog.hs 内の上記の関数を使用し、その後、

Settings.StaticFiles

カバルに、

/static StaticR Static getStatic

config/routes に移動し、Settings/StaticFiles に触れました。

すべての手順を思い出すと、エディターはローカルの静的な javascript ファイルを使用して表示されます。

問題は、static/js/nicEdit.js が nicEditorIcons.gif を参照していることです。現時点では、yesod にどのように gif ファイルを見つけるかを教えてください。エディターは機能し、ボタンはアイコンなしで表示されます。静的アイコン ファイル img_nicEditorIcons_gif へのルートを追加して、それらを取得しようとしました。現在、yesod のログには、yesod がアイコンを見つけたと書かれています。ただし、フォームの nicEdit ではアイコンが表示されません。

これは基本的なことだと思いますが、問題の答えが見つからなかったので...

  1. nicEdit.js の img_nicEditorIcons_gif を直接参照することはできますか? もしそうなら、どのように？

  2. nicEdit.js ファイルを編集せずに (ルートやハンドルなどを使用して) nicEdit に gif を検索させるように yesod に指示することは可能ですか?

  3. シェイクスピアのアプローチを使用し、nicEdit.js のコンテンツを julius ファイルに配置し、gif を静的ルートとして配置します...これは、js ファイルが静的ではないことを意味しますか? とにかく、これもやってみます。

これまでに発見したことは何ですか？

  1. nicEdit.js の変更

     iconsPath : './nicEditorIcons.gif',

    @{Img_nicEditorIcons_gif} または #{} を使用しても機能しませんでした。(Gif は static/img-dir にあり、現在は他の多くの場所にもあります。)

    部分的な答えは nicEdit.js で使用することです

     iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif?etag=gUsMv6k-',

    アイコンが表示されるようになりました！ただし、これは、ウィジェット (フィールド関数) が etag 部分を自動的に見つけられるようにする方がはるかに優れているという意味で不器用です。etag-part は、アイコンが表示されていない Web ページのソース コードから見つけることができます。

    実際、nicEdit.js では、次の最初の 2 つのいずれかを使用でき、アイコンが表示されます。

     iconsPath : './static/img/nicEditorIcons.gif',
 // iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif',
 // iconsPath : './nicEditorIcons.gif',

    これは現在、ほとんど受け入れられています。まだ残っている唯一の苛立たしいことは、ライブラリのユーザーとして、元のソースを少し編集する必要があるということです。

  2. 次のハンドラーはどうですか:

    module Handler.Img_nicEditorIcons_gif where

import Import
getImg_nicEditorIcons_gif :: Handler RepHtml
getImg_nicEditorIcons_gif = do 
    defaultLayout $ do
        -- $(widgetFile "img_nicEditorIcons_gif")
        -- [whamlet|@{StaticR img_nicEditorIcons_gif}|]
        [whamlet|<img src=@{StaticR img_nicEditorIcons_gif}>|]

    現在、サーバーは次のように言っています。

     GET /blog
 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
 11/Jan/2013:22:05:09 +0200 [Debug#SQL] "SELECT \"id\",\"title\",\"content\" FROM     \"article\" ORDER BY \"title\" DESC" [] @(persistent-   1.1.3.2:Database.Persist.GenericSql.Raw ./Database/Persist/GenericSql/Raw.hs:121:12)
 Status: 200 OK. /blog
 GET /nicEditorIcons.gif
 Accept: image/png,image/*;q=0.8,*/*;q=0.5
 Status: 200 OK. /nicEditorIcons.gif

    しかし、エディターはまだアイコンを見つけられません。ブラウザに入れた場合、ルートは機能します。Img-tag は、アイコンを別のページにうまく表示します。同様に、StaticR を使用している場合、アイコンは JavaScript 部分 (フッターのリンク) から見つけることができますが、エディターでは見つけることができません...

  3. ジュリアス事件も部分的成功。

    最初のケース (静的) と同様に、

     iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif',

    blog3.julius ファイルでは、アイコンが表示されました。この場合、Handler/Blog3.hs の blog3-handler は

     getBlog3R :: Handler RepHtml
 getBlog3R = do
   defaultLayout $ do
     setTitle "Trial to find the icons"
     $(widgetFile "articles3")
     $(widgetFile "blog3")
     toWidget $ [julius|
 bkLib.onDomLoaded(function(){new nicEditor({fullPanel:true}).panelInstance("h3")});
 |]

    対応テンプレート/articles3.hamletは

     <h1> Articles3
 $if null articles
   -- Show a standard message if there is no article
   <p> There are no articles in the blog
 $else
   -- Show the list of articles
   <ul>
     $forall Entity articleId article <- articles
       <li> 
          <a href=@{ArticleR articleId} > #{articleTitle article}

    ファイル blog3.hamlet は

     <hr>
   <form method="post" enctype="application/x-www-form-urlencoded">
     <input type="hidden" name="_token" value="8mFKLWnKcn">
     <div class="required ">
       <label for="h2">Title
       <input id="h2" name="f2" type="text" required value="">
     <div class="required ">
       <label for="h3">Content
       <textarea id="h3" name="f3">
     <div>
      <input type="submit" value="Post New Article">

    しかし、すでに述べたように、このソリューションでも nicEdit.js ソースを少し編集する必要があります...

これはほぼ解決されていますが、誰かがこれに代わるより良い方法を持っている場合は、それについて聞いてみたいです...そして、上記のケース2については、現時点で使用できるものとはかけ離れていると思います.

4

1 に答える 1