4

博客示例和 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

进入阴谋集团，

/static StaticR Static getStatic

进入配置/路由并触摸设置/静态文件。

如果我回想所有步骤，编辑器现在会使用本地静态 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 -function）自动找出 etag-part 会好得多。Etag-part 可以从没有显示图标的网页的源代码中找到。

    实际上，在 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. 朱利叶斯案，也部分成功。

    与第一种情况（静态）一样，通过使用

     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 源...

即使这几乎解决了，如果有人有更好的选择，我想听听......上面的案例二，我会怀疑它目前还没有任何可用的东西。

4

1 回答 1

1

很可能为时已晚，但这是答案：

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

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

于 2017-07-12T07:42:32.457 回答