Blog-example and the nicEditor on the tutorial on yesodweb work as they should. To learn something about yesod & scaffolding etc, I downloaded nicEdit, unzipped it, and put it into /static/js/nicEdit.js.
Then I edited Handler/Blog.hs and added the following there (modified a bit from Yesod.Form.Nic + some imports):
-- 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)
Then, entryForm to use the above function in the Handler/Blog.hs, after which
Settings.StaticFiles
into cabal,
/static StaticR Static getStatic
into config/routes and touched Settings/StaticFiles.
If I recalled all the steps, the editor shows up now using local static javascript-file.
The problem is that static/js/nicEdit.js references nicEditorIcons.gif. At the moment, I do not know, how say to yesod, how to find the gif-file. The editor works and the buttons are there without any Icons. I tried to get them by adding a route to static icon file img_nicEditorIcons_gif. Now yesod log says yesod finds the icons. However, the icons are not visible in the nicEdit in the form.
I guess this is a basic thing, but couldn't find an answer to the problem ... so
Is it possible to refer to img_nicEditorIcons_gif in nicEdit.js directly? If so, how?
Is it possible to tell to yesod to let the nicEdit find the gif without editing the nicEdit.js-file (by using routes or handles or something)?
Use Shakespearean approach, put nicEdit.js contents to a julius-file and gif as a static route... which would mean that the js-file is not static anymore? Anyhow, I'll try this, too.
What I have discovered so far?
A change on nicEdit.js
iconsPath : './nicEditorIcons.gif',to use @{Img_nicEditorIcons_gif} or with #{} did not work. (Gif is in static/img-dir and also on a number of other places now.)
A partial answer is to use in nicEdit.js
iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif?etag=gUsMv6k-',Now the icons show up! However, this clumsy in the sense that it would be much better to let the widget (Field -function) to find out the etag-part automatically. Etag-part can be found from the source code of the web-page that didn't show the Icons.
Actually, in nicEdit.js one can use either of the first two of the following and icon's will show up:
iconsPath : './static/img/nicEditorIcons.gif', // iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif', // iconsPath : './nicEditorIcons.gif',This is almost acceptable now. The only irritating thing still left is that as a library user, I still should edit the original source a bit.
What about the following handler:
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}>|]Now the server says:
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.gifBut the editor still does not find the icons. Route works, if put into the browser. Img-tag shows the icons nicely on a separate page. Similarly, if using StaticR, the icons can be found from the javascript part (a link in the footer), but not in editor...
Julius-case, also a partial success.
As in the first case (static), by using
iconsPath : 'http://localhost:3000/static/img/nicEditorIcons.gif',in the blog3.julius file, the icons showed up. In this case, blog3-handler in Handler/Blog3.hs is
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")}); |]Corresponding template/articles3.hamlet is
<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}File blog3.hamlet is
<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">But as stated already, also in this solution there is a need to edit nicEdit.js sources a bit...
Even though this is almost solved, if anybody has a better alternative to this, I'd like hear about it... And case two above, I'll quess it's quite far from anything usable at the moment.
