htmltagseditormarkitup

Force HTML editor to recognize/tolerate CMS specific tags

I'm planning on using an instance of Markitup (http://markitup.jaysalvat.com/home/) to format HTML on a site, but was hoping to include buttons/settings specific to the CMS I'll be pulling content from. The problem being that, while said elements are formatted as HTML tags, the editor won't recognize them or allow them to be wrapped around content/text.

I don't need the tags to be parsed, I simply need the editor to be able to insert them, but identifying them as HTML in the settings is unsuccessful, as is identifying them as text.

Is there any way to use an editor such as this to wrap custom tags around existing content?

What I'm trying to accomplish is, essentially, to hit the button in the editor, respond with a prompts asking for a few different parameters and then wrapping the remaining, selected HTML with the tags, with the result looking something like this:

<box title="EXAMPLE" align="LEFT">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl id sem volutpat interdum. Donec ante sapien, tincidunt nec venenatis at, posuere a magna. Suspendisse id metus sapien. Nullam sed rutrum tellus. Integer laoreet sem non lorem elementum ultricies.</box>
Solution

  • Having never used Markitup, it turned out to be fairly simple to do. Starting from the html demo, you'll need to modify 3 things in markitup/sets/html/:

    1. Add an image for your button to the images folder (or pick an existing one for now).
    2. Add a reference to the image in style.css. It seems like each button gets a class based on its order in the row of buttons (.markItUpButton1, .markItUpButton2, etc.). Some used a different class (clean/preview), but were still counted. So I added a button on the end, it was the 18th, and the code was simply: .markItUp .markItUpButton18 a { background-image:url(images/box.png);} Alternatively, you use the "className" attribute in set.js and reference that.
    3. Add an object to set.js. Use the existing buttons for comparison.

    You can start out with something as simple as this:

    {name:'Box', openWith:'<box>', closeWith:'</box>'}

    The syntax to add attributes is a bit funky, but again you can basically get the gist by looking at the other buttons:

    {name:'Box', openWith:'<box title="[![Title]!]" align="[![Align]!]" >', closeWith:'</box>' }

    Tested and works as you described! Let me know if you have questions. The hardest part for me was realizing that I couldn't run any of the examples without downloading extra "sets" (e.g. html).