Hi,

I'm trying to make markitup work with Markdown. I'm running in to the fact that drupal_add_js() doesn't support passing in a function to evaluate at run time. I know that bigger things are in store for configs, but for now I'm just trying to get something functional. What I've done so far is create a new editor include for the markdown-version of markitup. Then, in the wysiwyg settings, you can choose between "markitup" and "markitup (markdown)" as needed.

To attempt to make functions work, the attached simply looks for strings starting with 'function' and attempts to eval() them. Obviously a better key would need to be used :). The problem though is that the for() loop breaks the anonymous function, as the value is the same for all applied instances.

Any suggestions for how to make this work? Or am I going off track? I really hope that your TODO note means you know how to do it and just haven't done it yet :)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sun’s picture

Interesting approach.

No, I don't have a master-plan for that @todo yet. However, since markItUp does

								eval(button.call)();

...a possible approach would be to define a call interceptor in JS

var Drupal.wysiwyg.markitup.call = function () {
  var tryToDetermineClickedButton = this.caller;
  ...
};

But honestly, I don't know.

@see https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Ob...

deviantintegral’s picture

FileSize
12.34 KB

Well, I got closer. To get it to work you have to "seal" variables by copying. However, I then ran into issues of scope; the closure didn't have access to the markItUp object so it couldn't properly query it.

Here what I have so far:

for (var ms in settings['markupSet']) {
    if (typeof(settings['markupSet'][ms].openWith) != 'undefined' && settings['markupSet'][ms].openWith.indexOf("function(") == 0) {
      var current = ms;
      var openString = settings['markupSet'][ms].openWith.substring(9, settings['markupSet'][ms].openWith.length - 1);
      settings['markupSet'][ms].openWith = function() {
        return eval(openString);
      };
    }

@sun, I couldn't determine what objecto to try attaching that to, as the 'markitup' object doesn't exist.

As I need this working now, I've hard-coded settings into the JS. I've attached that in case anyone else finds it interesting. While this implements the UI still for settings, if you use this note that none of them are actually used.

sun’s picture

Title: Enable buttons requiring functions in Drupal.settings » markItUp Markdown editor integration
deviantintegral’s picture

No major changes, just rerolling from the module folder as it should be.

jide’s picture

Great to see we go towards more supported editors !

kunago’s picture

FileSize
785 bytes
4.97 KB

I added more buttons. Namely the picture button, color palette, lorem ipsum and preview. The files placed in "markitup-markdown.zip" should go to the "sites/.../modules/wysiwyg/editors" folder. Then I also attached the button pictures (placed in "images.zip") that should go to "all/libraries/markitup/markitup/sets/markdown/images/".

a_c_m’s picture

I think the patch in #5 is the best solution so far (however it has one small mistake, on line 13 it had an extra */). However both #5 #6 make assumptions about the location of the libraries folder relative to their current position and so break on my install (were i have contrib. in sites/.../contrib/), so some thought might need to be given to this.

#5 implements all the buttons made available by the stock markdown set available on the markitup site. However i think we should look for a more complete button set (as http://drupal.org/project/markdowneditor has).

Additionally (for what its worth), i REALLY dont like the popup method of adding URLS (i think just injecting some text with areas to edit would be better) and the code/blockquote button seems not to work?

a_c_m’s picture

whoops, forgot the patch :)

Encarte’s picture

subscribe

tnanek’s picture

Subscribe

nrambeck’s picture

I took the patch from comment 8 and refactored it to work with the latest 7.x-2.x branch.

Jean-Philippe Fleury’s picture

Subscribing

smithmilner’s picture

subscribing

rerooting’s picture

Suprisingly, this still works, somewhat.

You have to create blank files: editors/markitup_markdown.inc and editors/js/markitup_markdown.js. In a linux environment you can use 'touch path/filename' to do this quickly.

Then, for better support for the icons, markitup's default set no longer comes with header element icons. Thus, grab the markdown set and put it in the appropriate folder in the markitup library.

Then, go to edit editors/js/markitup_markdown.js and change line 64 from:

.css({ backgroundImage: 'url(' + settings.root + 'sets/default/images/' + button + '.png' + ')' })

to:

.css({ backgroundImage: 'url(' + settings.root + 'sets/markdown/images/' + button + '.png' + ')' })

Make sure to clear your cache if you are using javascript aggregation. Enjoy!

ar-jan’s picture

Version: 6.x-2.x-dev » 7.x-2.x-dev

This seems to be the main issue for Markdown support. Has there been any progress?

Does #1650416: Allow editor specific changes to be made to the profile settings form allow improvement for an implementation that lets us chose Markitup sets (or a workaround approach maybe)?

eric.chenchao’s picture

I have made makeItUp to support more buttons.

Here is the button picture

makeItUp buttons

Here is the setting form. There is a extra field added in the output area called markup type. At the moment, default HTML and markdown are available in the option list.

I have also added a custom button called kbd which will insert . This is very handy when I am documenting some instructions.

makeItUp settings

How to install

  1. Apply the patch attached
  2. Extrac the zip file and copy it to the path "sites/all/libraries/markitup/markitup/sets", so there will be the "markdown" folder besides "default" folder

Known issue:

Numeric list button does not work at all, as its "open with" parameter is a function which will become a string in the JavaScript.

ar-jan’s picture

Status: Needs work » Needs review

Not sure how this relates to the earlier patches, but I guess this needs review.

eric.chenchao’s picture

no this one does not relate to the earlier patches.

The patch in #11 provide a new editor called makeitup_markdown with markitup_markdown.inc and markitup_markdown.js

This patch does not support button management, which means it will display all regular buttons.

The patch in #16 uses a different approach:

It provides an extra select field - markup type - in the wysiwyg markitup profile admin. So user can switch between default type HTML and markdown. We could add support for other format like BB code in the future for example.

So all buttons could be managed to show up in the admin UI.

eric.chenchao’s picture

The updates in patch including:

  • move markupSet to the javascript file
  • fix list issue mentioned in #16
  • Add multiple line support for numeric list, short-cut key: ctrol + shift+ click
  • Add support for separator

Also upload the markup set attached in #169 zip file and apply this patch.

eric.chenchao’s picture

Add multiple line support for code.

loominade’s picture

@#20

I applied your patch with the current dev (7.x-2.2+23-dev) and observed these errors:

Notice: Undefined index: markup_type in wysiwyg_markitup_settings() (Line 137 of sites/all/modules/contrib/wysiwyg/editors/markitup.inc)

Uncaught TypeError: Cannot call method 'substr' of undefined markitup.js:27

eric.chenchao’s picture

@loominade

I have added isset check to fix issue 1:

Uncaught TypeError: Cannot call method 'substr' of undefined markitup.js:27

Regarding the second issue, could you go to `admin/config/content/wysiwyg/profile/filtered_html/edit`, select buttons and choose output as markdown and save the form?

Also clear your cache of js and have a try.

loominade’s picture

@eric.chenchao

so far it works fine for me. maybe the Buttons and plugins that are not supported by markItUp! shouldn't be available in the settings form.

redndahead’s picture

I'm trying this out and it seems that there are missing images in your zip file. Is there a place to download them?

h1.png
h2.png
h3.png
h4.png
h5.png
h6.png
ol.png
ul.png
Clean.png

redndahead’s picture

Whoops I was wrong. My problem is that the images are pointing to default directory and not the markdown directory. Also since it asks for ol and ul and not list-bullet and list-numeric I think something else is up. Any ideas?

eric.chenchao’s picture

FileSize
12.18 KB

@redndahead you are right. I have renamed these two images.

redndahead’s picture

Issue summary: View changes
FileSize
8.96 KB
13.24 KB

I have made a couple of changes with this patch. With this combined patch I was able to add a plugin with some changes to footnotes_wysiwyg so this much more extensible. Thanks eric.chenchao for gettings this going.

  1. I added an option to turn off adding the images to the buttons. This will help with theming because it will allow modules to add other buttons and it won't require a bunch of !important
  2. I added a hook_wysiwyg_markitup_markup_type_info. This let's other modules define markup types.
  3. I added a helper function that gets the default buttons. There seemed to be no reason to declare them twice.
  4. In that helper function I defined the groups seemed to be the right place to say what group it's in instead of a separate helper function.
  5. Renamed First Level Heading and Second Level Heading to Heading 1 and Heading 2 to match the rest.

I have created an example project on how one can add plugins to this also. You can find it here: https://www.drupal.org/sandbox/redndahead/2294249

redndahead’s picture

FileSize
21.12 KB
16.37 KB

Here is another patch with a few changes.

  1. Changed anywhere that said markup type to sets as this fits the markitup website terminology better.
  2. Added more options to hook_markitup_sets_info. supported_buttons: Which of the default buttons are supported, js: javascript to add, css: css to add. Also documented the hook in api.php
  3. Moved the sets javascript to their own files so it fits more with the api. I think we should not add markdown to this patch, although I understand that this is what this issue is about, but this should probably be in a helper module now that you can with this patch.
  4. Changed the set HTML to default since it matches the real set name. The HTML set on the markitup website is actually a different set of buttons than default.
  5. If a set doesn't support the button it is disabled in the button selection UI when you are flipping through the different sets.

This example module shows how to add additional sets: https://www.drupal.org/sandbox/redndahead/2294887

redndahead’s picture

FileSize
17 KB

Now hopefully the last patch. I have updated my plugin example module to support the newest features. https://www.drupal.org/sandbox/redndahead/2294249

  1. Added support for plugins to add buttons to all sets via Drupal.wysiwyg.editor.markitup.sets.all If you also set Drupal.wysiwyg.editor.markitup.sets.[setname] then it will use the specific version for the set name.
  2. Fixed ul, ol buttons not showing up.

This patch is getting pretty large and probably very difficult to review. I'm not sure what the best way to break this up would be though.

redndahead’s picture

FileSize
17 KB

Of course it wasn't the last patch. Clean-up didn't work and link had the wrong class name.

redndahead’s picture

redndahead’s picture

FileSize
16.33 KB

While thinking about this issue #2025625: Allow for custom icon paths in MarkItUp editor and I think I can handle that issue in a better way than I am doing it here. So I have stripped out the part that removes the buttons and it can be dealt with in that other issue. The patch for that issue can be found here: https://www.drupal.org/node/2025625#comment-8931461

TwoD’s picture

Thanks for your effort on this! I don't have time to review it right now, but I just wanted to let you know I'm not ignoring this topic. =)

skh’s picture

FileSize
16.29 KB

Great patch, was looking to add this functionality myself. I can confirm it's working.

There was one warning when configuring the editor for the first time (missed an empty check). Same patch as #32 attached, with that check and newlines in the .js files.

Other issue I'm noticing is with the preview button. Since it doesn't run through drupals text formatting it's just showing plain text. Didn't have any quick ideas for how to remedy this, but if anyone has an idea I'd be willing to give it a shot.

Leeteq’s picture

(PS. I am unfamiliar with MarkitUp, but curious if there exist a tool that unites "Markdown" and WYSIWYG.)

Will the outcome of this be true WYSIWYG with real bullets instead of stars in the body text edit field as we type, yet saved with a special input format that actually saves bullet lists with stars instead of HTML markup?

C-Logemann’s picture

Status: Needs review » Needs work

I can also confirm that the #34 patch is working except the preview button.

I believe the preview function needs a lot of work. It currently shows html but not markdown code. Especially the linebreak-conversion – which is identical to the core filter for linebreaks-converts – is not displayed. So it is completely useless. Either we remove the preview button or we fix this. So I switch the status to "needs work".
In my opinion we should get the main support of markItup committed soon and maybe discuss and work on the preview functionality in an extra issue.

@Leeteq: Maybe this Editor not really a "wysiwyg"-Editor and I am not sure if this really makes sense. But it's helpful to get this editor working with the "wysiwyg-module" to get this easy working together with other editors.

jrbeeman’s picture

Re-rolling patch from #34 against latest 7.x-2.x. Applies successfully against wysiwyg-7.x-2.4.