Question

博客示例和yesodweb教程中的nicEditor可以正常工作。了解有关yesod＆amp ;;的事情脚手架等，我下载了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中不可见。

我想这是一个基本的东西，但找不到问题的答案......所以

是否可以直接在nicEdit.js中引用img_nicEditorIcons_gif？如果是这样，怎么样？
是否可以告诉yesod让nicEdit找到gif而不编辑nicEdit.js文件（通过使用路由或句柄或其他东西）？
使用莎士比亚的方法，将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-part可以从未显示图标的网页源代码中找到。

实际上，在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 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部分（页脚中的链接）找到图标，但不能在编辑器中找到...

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

对应的模板/ 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

最有可能为时已晚，但答案是：

new nicEditor（{iconsPath：“your_path”}）

见到这里：http://nicedit.com/demos.php?demo=2

yesod教程，nicEdit和静态gif-reference

1 个答案: