haskell - yesod 教程、nicEdit 和静态 gif 引用

Question

博客示例和 yesodweb 教程中的 nicEditor 可以正常工作。为了学习一些关于 yesod 和脚手架等的知识，我下载了 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 

进入 cabal ，

/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. 是否可以告诉 yesod 让 nicEdit 找到 gif 而无需编辑 nicEdit.js 文件(通过使用路由或句柄或其他方式)？

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-',
   

   现在图标出现了!然而，从某种意义上说，让小部件(Field 函数)自动找出 etag-part 会好得多。 Etag部分可以在没有显示图标的网页源码中找到。

   实际上，在 nicEdit.js 中，可以使用以下前两个中的任何一个，图标将会显示:

    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. Julius-case，也取得了部分成功。

   与第一种情况(静态)一样，通过使用

    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")});
    |]
   

   对应的template/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 源...

即使这几乎已解决，但如果有人对此有更好的替代方案，我想听听它......上面的案例二，我怀疑它目前离任何可用的东西还很远。

Answer 1

很可能为时已晚，但答案如下:

新的 nicEditor( {iconsPath : "your_path"} )

在这里看到:http://nicedit.com/demos.php?demo=2