yesod教程，nicEdit和一個靜態gif參考

博客示例和nicoditor上的教程yesodweb工作，因爲他們應該。爲了學習一些關於yesod &腳手架等的知識，我下載了nicEdit，將其解壓縮並放入/static/js/nicEdit.js。yesod教程，nicEdit和一個靜態gif參考

然後我編輯處理程序/ 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使用上述功能的處理程序/Blog.hs，之後

Settings.StaticFiles

成小集團，

/static StaticR Static getStatic

進入配置/路線和觸摸編輯設置/ StaticFiles。

如果我回想了所有步驟，編輯器現在使用本地靜態javascript文件顯示。

問題是，靜態/ js/nicEdit.js引用nicEditorIcons.gif。目前，我不知道，如何說yesod，如何找到gif文件。編輯器的作品和按鈕都沒有任何圖標。我試圖通過添加一個路由到靜態圖標文件img_nicEditorIcons_gif來獲取它們。現在yesod日誌說yesod找到圖標。但是，圖標在窗體中的nicEdit中不可見。

我想這是一個基本的東西，但無法找到這個問題的答案...所以

是否有可能直接引用img_nicEditorIcons_gif在nicEdit.js？如果是這樣，怎麼樣？
是否可以告訴yesod讓nicEdit在沒有編輯nicEdit.js文件（通過使用路由或句柄或其他）的情況下找到gif？
使用莎士比亞的方法，將nicEdit.js的內容放到一個julius文件中，並將gif作爲一個靜態路由......這意味着js文件不再是靜態的了？無論如何，我也會試試這個。

我到目前爲止發現了什麼？

上nicEdit.js
```
iconsPath : './nicEditorIcons.gif', 
```
改變使用@ {} Img_nicEditorIcons_gif或＃{}沒有工作。（GIF是靜態/ IMG-DIR還取決於其他一些地方現在。）

的部分答案是nicEdit.js
```
iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif?etag=gUsMv6k-', 
```
現在的圖標顯示使用！然而，這樣做很笨拙，因爲讓小部件（Field-function）自動查找etag-part會更好。 Etag部分可以從沒有顯示圖標的網頁的源代碼中找到。

其實，在nicEdit。js可以使用以下任何一項，圖標將顯示：
```
iconsPath : './static/img/nicEditorIcons.gif', 
// iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif', 
// iconsPath : './nicEditorIcons.gif', 
```
現在幾乎可以接受了。唯一令人惱火的是，作爲一個圖書館用戶，我仍然應該編輯原始源代碼。

什麼如下處理：

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 [email protected]{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部分（頁腳中的鏈接）找到圖標，但不能在編輯器中找到圖標...

Julius-case，也是部分成功。

正如在第一種情況（靜態），通過在blog3.julius文件中使用

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

，圖標出現了。在這種情況下，blog3處理程序的處理程序/ Blog3.hs是

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 [email protected]{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源文件...

即使這幾乎解決了，如果有人有更好的替代方案，我想聽聽它......上面的情況二，我會說它離目前可用的任何東西都很遠。

來源

2013-01-10 Gspia