I know this might seem a simple question, but with all the WMD versions out there, I need to know how to include WMD Editor in my website, and is there a server control to include in server-side or there is only WMD classes to manage and sanitize input content?
I recently wrote an article in my blog with a simple discussion on how to get derobins wmd editor (same one as the SO wmd editor) in your web site: http://codesprout.blogspot.com/2011/03/wysiwyg-derobins-wmd-markdown-editor-in.html In my blog I provide the links for downloading the latest WMD editor, the instructions and a test page provided with the WMD download.
Installation
The installation instructions were quite good, so the installation went without a hitch!
Usage
I found it useful to muck with the wmd test page a little, just to get a feel for the editor (which should be pretty familiar to people who are already familiar with StackOverflow).
Implementation
Suppose you've already added/merged the wmd style sheet to your web site's style sheet, now you just need to add the proper references in your master page, create a partial view with the wmd editor, and finally display the partial view on a page of your choice.
Step 1: Follow the installation instructions for wmd.
The installation are in the readme file of the wmd download.
Step 2: Create a partial view for the editor (I called mine MarkdownControl).
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>
Step 3: Display the control in a page of your choice:
<% Html.RenderPartial("MarkdownControl"); %>
And there you have it: a WYSIWYG editor in a partial view which you can display anywhere on your web site! You can see my implementation in action here: www.mydevarmy.com/Competition/Propose
Related
I am only just starting to program and in my code I have a lot of silly comments (<!-- comment -->) that are really only meant for myself. For example lots of links to stackoverflow articles to understand my own code as well as explanations to myself why I wrote the code the way I did.
This code is included in views (html) as well as server-side code (e.g., controller and model files).
For a visitor of my website these comments might look silly and amateuristic. So if they'd visit my website and looked at the source code I would like to not have those comments included.
Is there a way to publish a site without its comments in production? (while keeping the comments in development)
I am using Rails4 and Heroku.
Update: I understand now that comments in model and controller files won't be visible to visitors of my web page, anyway. So then it only concerns the comments in my view pages (.html.erb), i.e., embedded html comments in your webpages. It could also concern Javascript, but currently my website hardly contains any of that. Does anyone have an example of a script for removing these comments when pushing to production/heroku?
If you're trying to omit html comments from the source code, you can convert your html comments to erb comments as erb comments wont get rendered to the markup
so convert your html comments:
<!-- comment -->
to erb comments:
<%# comment %>
its a little hacky, but it should work for you. this will keep the comments in your code base viewable from the editor or github, but will omit them from being visible from the client (in any environment, not just production)
I need an editor for html tags, i want to make it for next developer to edit pages online, so, an editor with highlighter tags feature and IntelliSense needed.
Something like this:
http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html
but with format and IntelliSense features.
I found this editor, great and powerful.
http://ace.c9.io/
I am relatively new to Rails, having recently completed Hartl's Rails Tutorial, and am now embarking on my first full fledged project. What I am interested in adding to my web app is something similar to the text input feature in SO, where you could type, and see directly how your text will turn out. After some digging around on SO, I have decided on using the gem bluecloth, which is Markdown implemented in Ruby, but now have the following questions:
I am unsure about how to tie what bluecloth outputs to the form_for helper. My understanding was that you could convert to strings via the function html = BlueCloth.new(str).to_html(), but I am unsure what to do when you have a text field as part of form_for, where I should plug in the bluecloth part? In other words, I am still a bit confused about the magic of typing in one box and seeing the item show elsewhere on the page.
Are the WMD bar button items and functions included Markdown editors (such as bluecloth), or would this be something I have to build manually? If so, how would I get something like the bold button to show "** **" in the editor as you type?
Thanks for your help!
As comments have noted, Markdown is a markup language like HTML, so its not easy to do WYSIWYG.
There are probably two approaches to getting this kind of functionality.
Server side
Post your markdown text to a server and get the server to return HTML. I've done this a lot in Python, but for Ruby this SO answer suggests maruku. The disadvantage of this approach is that it requires a server request every time you want to view the preview, and then some way to integrate that back into your UI without disrupting the user. Stackoverflow uses this approach with the WMD editor and some C# on the server.
Client side
Another option is to use a client side library to take your markdown "code" and generate html which you can then integrate into your page using javascript. An example of this is dillinger. This uses a textarea and something like showdown to render the HTML in the browser. I'm taking this approach one step further in a WYSIWYG Markdown editor I'm developing called demarcate.js
Or... ditch Markdown
The comments have already suggested alternative WYSIWYG editors... most of these are not markdown editors but rich text editors which produce HTML at the end. TinyMCE and wysihtml5 are good options and I've also used CKeditor before with some success - it has a cool "in-place" feature in the latest version which inspired my Markdown editor above.
I'm looking to use markdown in my website, and I'd like the editor (or something similar to) the one used here at Stackoverflow. As far as I can see, I can get this from the google code site.
What I want to know is, how do I then use this in my site? I see perl files etc included with this.
Anyone done this before, or have links to good documentation (the site of the original WMD appears to have disappeared).
Here is StackOverflows fork/branch:
https://blog.stackoverflow.com/2008/12/reverse-engineering-the-wmd-editor/
https://meta.stackexchange.com/questions/4168/can-i-use-stack-overflows-reengineered-wmd-editor
i have tinymce embedded in my website, so if users want to edit content, then can click on an "EDIT" link and it brings up the content in tinymce editor. when they click "Save", i save the html to a database. this works perfect and avoids them calling me when they need content changes as they can go in directly and next time they reload the main page, it loads up their changed content.
they now want to be able to add their own images. I see there is some image support in tinymce as seen here, but in my case, the images would be on their computer.
So i am looking for some advice on how to handle image support using tinymce on my asp.net mvc website similar to how stackoverflow allows you to upload and include an image in your question all in one step
any suggestions?
I guess you need to take a look here:
Best TinyMce editor Image Manager / File upload for Asp.net Mvc
it has a list of tinyMCE file browsers/uploaders/managers which work with MVC :)
I had a similar issue and solved it by;
Allowing the user to upload images which i then stored in the file system.
Once the image was saved then you could use tinyMCE to link to it.
It's a round-about way of doing it but it worked. If your images are stored on a users computer then you're going to need to implement something like this me thinks as you can't assume you can link to the image and if you can you can't be sure the computer will be on.
Maybe you can give this TinyMCE-plugin a try (the official Moxiecode plugins are quite expensive):
http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/
I haven't tested it yet, but it's a free add on that allows uploading and selecting files.
HTML 5 supports embedded images. You can embed image in html code as a base64 string.
Example Code:
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQYmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150"/>
There is a opensource TinyMCE plugin available in github:
https://github.com/buddyexpress/bdesk_photo