Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using jade with wysiwyg markdown to allow users to edit content

I believe don't re-invent the wheel unless you absolutely have to. So I don't want to start coding away something that has already been coded, or a lot of people are contributing to it already.

I have just recently emigrated to planet Node.js (sorry php/apache), and need to put resources together to bring things up to speed with other languages.

I am using Node.js as a server listener, with Express.js as middle-ware, and jade js as a template engine.

I would like to use a TinyMCE like features but instead of the code being the usual ugly HTML markup, I would like the code to be the markdown and allow jade to do its majic. I suppose it more or less like stackoverflow edit (which I am typing in) but maybe a little more advanced UI wise.

So for instance if I click on a button B it should make the selected text bold as you would, with any WYSIWYG editors.

References:

  • http://nodejs.org/api/
  • http://expressjs.com/api.html
  • https://github.com/visionmedia/jade#readme-contents
  • http://www.tinymce.com/wiki.php
like image 336
Val Avatar asked Apr 18 '13 10:04

Val


People also ask

What is WYSIWYG Markdown editor?

WYSIWYG (What You See is What You Get) editor. Markdown editor lets writers use Markdown syntax and HTML to customize articles. WYSIWYG editor uses Rich Text formatting and includes an extensive formatting toolbar, however you cannot use custom code in articles.

How do you integrate WYSIWYG HTML editor?

Essentially the steps are: Download and install the editor JavaScript code. Create or edit a Web form that contains one or more textarea elements. Add a small chunk of JavaScript to convert the textarea element(s) into WYSIWYG editor(s)

Is Markdown a WYSIWYG?

Markdown syntax allows users to embed markups within the text and it is automatically converted to rich text with formatting by a WYSIWYG Markdown editor. Most web browsers also support Markdown.


1 Answers

You could use any of the HTML generating WYSIWYG editors, and on "save", allow the HTML to pass to the server where you convert it to Jade syntax before storing it.

You could easily integrate this package, for example, into your Express server:

https://www.npmjs.org/package/html2jade

html2jade.convertHtml(html, {}, function (err, jade) {
   // save jade to the DB
});
like image 165
jasonpincin Avatar answered Oct 07 '22 06:10

jasonpincin