#1
  1. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Sep 2006
    Posts
    1,938
    Rep Power
    533

    Implementing Markdown, BBCode, etc


    I am trying to get my hands around implementing markdown, or some similar alternative. Below is what I envision are the typical steps (for Markdown, BBCode can be similar). Are these the correct steps? Any recommendation for a clientside JavaScript based markdown parser and a serverside PHP based markdown parser? Thank you

    1. User types in a text box.
    2. Clientside JavaScript based markdown plugin changes the markdown text real time into HTML, and displays the HTML below the text box.
    3. User submits the text box (not the HTML), the markdown is sanitized using htmlspecialchar()?, and the markdown is stored in the DB.
    4. To later display the markdown, the markdown is retrieved from the DB, is parsed via a server-side markdown PHP based parser, and the HTML is echo'd on the page.
  2. #2
  3. Mad Scientist
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2007
    Location
    North Yorkshire, UK
    Posts
    3,661
    Rep Power
    4123
    That was my thought process, so that's what I implemented.

    It's pretty much how stackoverflow works
    I said I didn't like ORM!!! <?php $this->model->update($this->request->resources[0])->set($this->request->getData())->getData('count'); ?>

    PDO vs mysql_* functions: Find a Migration Guide Here

    [ Xeneco - T'interweb Development ] - [ Are you a Help Vampire? ] - [ Read The manual! ] - [ W3 methods - GET, POST, etc ] - [ Web Design Hell ]
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Sep 2006
    Posts
    1,938
    Rep Power
    533
    Thanks Northie!

    Please confirm that you store the user provided markdown unsanitized in the DB , and then when displaying it, first apply htmlspecialchar() and then parse it to HTML. My original post stated using htmlspecialchar() before storing in the DB, but that probably isn't the best idea.

    Also, any recommendation for a clientside JavaScript based markdown parser and a serverside PHP based markdown parser? There seems to be no de facto standard.
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Hi,

    what's the point of the live preview? If you want a rich text editor, then you should use one (TinyMCE or whatever). If find it odd to have the user write markup language to "remote control" some preview HTML in a window below.

    Rich text editing and markup languages are incompatible concepts in my opinion. The reason to use a markup language is to focus on the semantic structure and not get distracted by fancy visuals. The reason to use rich text editing is to directly control the output without any intermediate stuff. When you use both at the same time, you have none of those advantages.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Sep 2006
    Posts
    1,938
    Rep Power
    533
    what's the point of the live preview?
    Two points...

    First, I kind of like having the visual aid, and not having to click preview to see if it looks like I expect.

    Second and more important, I didn't include this requirement in my original post, but I will have the ability to add "meta data" in the text which will later be converted to the appropriate value. For instance, I might have Hello {firstname}, have a good day. If "firstname" was included in the available meta data list, the preview mode will show it with a box around it. Then, I could send off multiple emails to different people, and automatically update their names. I described this portion earlier at here. See any problems?
  10. #6
  11. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Originally Posted by NotionCommotion
    First, I kind of like having the visual aid, and not having to click preview to see if it looks like I expect.
    Then don't use markup at all. When you write markup, you're supposed to focus on the content of your text and not care about how it looks like. If you wanna fumble with font sizes, colors and whatever while you write your text, you want a rich text editor.

    Like I said, those are two different approaches. There's the "I want my Comic Sans 24pt" approach popularized by word processors like Word, OpenOffice.org etc. And there's the semantical approach represented by languages like HTML or LaTeX. Don't mix them, or you'll get terrible results. It's like the people hitting F5 all the time to see if their <blink> looks pretty.



    Originally Posted by NotionCommotion
    Second and more important, I didn't include this requirement in my original post, but I will have the ability to add "meta data" in the text which will later be converted to the appropriate value.
    Why should that not be possible with a rich text editor? Why not click on a button to insert a meta data box?

    Of course it means you have to customize the standard editors, whereas the markup stuff only requires a simple regex. But the easy solution isn't always the best one.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Sep 2006
    Posts
    1,938
    Rep Power
    533
    Why should that not be possible with a rich text editor?
    I would rather do it with a rich text editor, and ideally TinyMCE. I wasn't sure, however, about the feasibility to implement it? Any ideas? I just posted the question in the JavaScript forum so we wouldn't get too far off topic. Thank you
  14. #8
  15. Mad Scientist
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2007
    Location
    North Yorkshire, UK
    Posts
    3,661
    Rep Power
    4123
    I use this in a CMS where the styles for the front of the site cannot be replicated in tinymce. In fact tinymce is not a wysiwyg editor as you rarely get what you see.

    I would have preferred a full markdown only editor but feed back from clients was that they wanted to know what it would look like before saving rather than trial and error editing and cross checking with the front of the site. Tinymce gives too much control. My designers come up with a style sheet and getting that to work with tinymce us just a nightmare. Let alone the fact that one can copy and paste into tinymce from something like word - and how this really screws things up. Sure there's a paste from word button - but what do clients know, huh? They only remember so much of their training!

    As for htmlspecialchars, I can't remember. I think the php implementation of markdown does this for me. You could test with and without it - it would only take 5 minutes. And yes, the markdown is stored in the database, sanitised for MySQL obviously.
    I said I didn't like ORM!!! <?php $this->model->update($this->request->resources[0])->set($this->request->getData())->getData('count'); ?>

    PDO vs mysql_* functions: Find a Migration Guide Here

    [ Xeneco - T'interweb Development ] - [ Are you a Help Vampire? ] - [ Read The manual! ] - [ W3 methods - GET, POST, etc ] - [ Web Design Hell ]
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Sep 2006
    Posts
    1,938
    Rep Power
    533
    Thanks Northie,

    Did you use a 3rd party clientside JavaScript based markdown parser and a serverside PHP based markdown parser, or build your own? If a 3rd party, which one, and would you recommend it?

    Thanks
  18. #10
  19. Mad Scientist
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2007
    Location
    North Yorkshire, UK
    Posts
    3,661
    Rep Power
    4123
    3rd party for both. The php one is the one recommended on the markdown website. I seem to remember there are two, one adds functionality not currently in markdown.

    It was trickier to find a matching JS one. I experimented with calling the server side one with Ajax
    I said I didn't like ORM!!! <?php $this->model->update($this->request->resources[0])->set($this->request->getData())->getData('count'); ?>

    PDO vs mysql_* functions: Find a Migration Guide Here

    [ Xeneco - T'interweb Development ] - [ Are you a Help Vampire? ] - [ Read The manual! ] - [ W3 methods - GET, POST, etc ] - [ Web Design Hell ]
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Sep 2006
    Posts
    1,938
    Rep Power
    533
    The php one is the one recommended on the markdown website.
    Which "markdown website"? Is there a single authoritative website? http://daringfireball.net/projects/markdown/ seems to be as good as it gets. There is also JavaScript version (however, much of the script is hard to find) and a C# verision (I don't know what to do with this version). This has been kind of a strange experience researching this topic...

IMN logo majestic logo threadwatch logo seochat tools logo