Extension: MD Markitup custom field type for EE Control Panel - add Markitup to EE!

MCImageManager problem fixed! I was using the url, not the file path. Works seamlessly with Markitup now. Yay!

Any ideas about a potential fix for the

tag problem?

I’m not sure there’s any way to automate the conversion of <br /> to <p></p> on submit, short of creating or modifying an extension. You may be able to select all the text and click a button for the conversion, though.

If you go to Markitup’s Advanced samples, you’ll see that the fifth button over is the “Encode HTML special chars”. You can look below on that page for the JSON code that actually drives that button.

It might be as simple as a replace along these lines (taken from teh “Clean” button (which I have hidden by default with some CSS:

{name:'Clean', className:'clean', replaceWith:function(markitup) { 
return markitup.selection.replace(/<(.*?)>/g, ""); } 
},

You can see how you can pretty easily use javascript to do what you want with selected text inside a Markitup field. I’m no regular expression expert, but you might try something like (untested):

{name:'Br to P because Word is silly', className:'brtop', replaceWith:function(markitup) { 
return markitup.selection.replace(/
/g, ""); } 
},

But I don’t know how you’d necessarily wrap the paragraph. This is something you could look for on a site specific to javascript, and not necessarily Markitup or EE. As long as there is a function out there in JS that can do something, you should be able to use it in a function for MDMIU fields.

Does anybody know if there’s a way to use the advanced image options using MCimageManger with MDMarkitUp? I need to allow the client to add titles and alt info as well as type in the class name.

Kyle, you can make your own functions, more or less. There are a couple very useful functions included in the sets (provided by Karl Swedberg of learningjquery.com) that help do advanced things with the Image Manager. You could make a nested list of different kinds of image inserts (which is what I do) and I provide an example in the set (looking at the default set right now for the sake of argument). Take this MIU button for example:

{
      name: 'Picture [Moxiecode]',
      className:'moxiePic',
      openWith:'[img]',
      closeWith:Qybv9BblnQY1Dwd1MHFkmiQB2GU4Zewmtypography_img_src_end alt=" [/img]', 
      beforeInsert: function(h) {
        moxieInsert(h, {
          dimensions: true,
          replaceText: 'alt text'
        });
      }

Go ahead an start with that and modify it to be more in line with what you need:

{
      name: 'Basic Picture',
      className:'moxiePicBasic',
      openWith:'[img]',
      closeWith:Qybv9BblnQY1Dwd1MHFkmiQB2GU4Zewmtypography_img_src_end alt=" title="" [/img]', 
      beforeInsert: function(h) {
        moxieInsert(h, {
          dimensions: true,
          replaceText: 'alt text'
        });
      }

I added that to the textile set “inside” the default supplied image dropdown, and now I see the extra image insert type when I hover (see attached pic).Dimensions are true, so it will get the dimensions for you, and I added the title in there. If I add a pic with this button, I get this:

<img src=”/uploads/sample.jpg” width=”1018” height=”405” alt=”alt text” title=”” />

I could add a class as well, either making a custom button specifically for a class (and hardcoding the class in there (which I’ll do below), or just leave class blank like I did for the title. For every new button, try to remember to give it a unique class name.

{
          name:'Insert Image (Float Left)', 
          className:'moxiePicBasicFLeft',
          openWith:'[img]', 
          closeWith:Qybv9BblnQY1Dwd1MHFkmiQB2GU4Zewmtypography_img_src_end alt=" title="" class="imageleft" [/img]',
          beforeInsert: function(h) {
            moxieInsert(h, {
              dimensions: false,
              replaceText: 'alt text'
            });
          }
        },

I set dimensions to false just to mix things up. That outputs:

<img src=”/uploads/sample.jpg alt=”alt text” title=”” class=”imageleft” />

Does that make sense, or are you trying to do something else?

Ryan,

thanks for the reply, Yes, worked absolutely beutiful now. I’m struggling a bit with the css (switching on and of various settings and making my own).

Is there any chance to add this input-manager to the wiki-module? I can choose to have textile but not md-markitp, it looks like the wiki-module only looks after plugins, not extensions, so md-markitup would be overlooked. Eventually it must be easy to have the md-markitup-fieldtype for the wiki too, maybe its just a fake-plugin needed which fetches md-markitup for the textarea, loading jquery in the header of the wiki and some custom code in the wiki-theme?

any chance?

Thanks for this great plugin!

Bernd

Bernd: I don’t have any plans to get this to work with the Wiki. What might work is just using Markitup by itself (without the MD extension) and modifying the wiki in some way so that the textareas there have a special class - then tack on a bit of jQuery that applies Markitup to the Wiki textareas.

You don’t need my extension to get Markitup to work with EE on the front end - only as a custom field type in the Control Panel.

Bernd: I don’t have any plans to get this to work with the Wiki. What might work is just using Markitup by itself (without the MD extension) and modifying the wiki in some way so that the textareas there have a special class - then tack on a bit of jQuery that applies Markitup to the Wiki textareas.

OK, i will try these, hope to get imagemanager integrated there as well…

Thanks!

Ryan, Thanks for all your hard work on this Extension - it’s excellent.

I’ve searched this forum and this thread but can’t find an answer. Please excuse me if I’ve overlooked something obvious.

MCFileManager and MCImageManager with MD MarkItUp! appear to work OK in Firefox 3.0.7 but in Safari 3.2.1 the pop-up appears and then hangs with the message “Loading…”

I was using older versions but updating to the latest versions hasn’t fixed it: -

EE 1.6.7 MCFileManager 3.1.0.7 MarkItUp! 1.1.5 MD MarkItUp! 1.6.1 Moxiecode Authentication 0.2.0

The Moxiecode FAQ wasn’t much help, the suggestion to disable the mod_security engine with a .htaccess file just stopped the buttons working entirely.

Any ideas would be most welcome Thanks

I’m trying to integrate md markitup with MCimagemanager. I’m nearly there, just one small issue with the textile set and image captions.

Instead of replacing & highlighting “Caption” inside the image code, it’s adding “Caption” outside. So instead of this (correct):

!</images/image.jpg(Caption)!

I get this (incorrect):

!</images/image.jpg(Caption)!Caption

Inside set_textile.js I have:

{name:'Image Manager', className:'images', dropMenu: [
    {name:'Left', className:'imageLeft', openWith:'!<', closeWith:'(Caption)!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}, 
    {name:'Center', className:'imageCenter', openWith:'!', closeWith:'(Caption)!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}, 
    {name:'Right', className:'imageRight', openWith:'!>', closeWith:'(Caption)!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}
]},

I’m new to markitup so any thoughts very much appreciated 😊

I’m trying to integrate md markitup with MCimagemanager. I’m nearly there, just one small issue with the textile set and image captions. Instead of replacing & highlighting “Caption” inside the image code, it’s adding “Caption” outside. So instead of this (correct):

!</images/image.jpg(Caption)!

I get this (incorrect):

!</images/image.jpg(Caption)!Caption

Inside set_textile.js I have:

{name:'Image Manager', className:'images', dropMenu: [
    {name:'Left', className:'imageLeft', openWith:'!<', closeWith:'(Caption)!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}, 
    {name:'Center', className:'imageCenter', openWith:'!', closeWith:'(Caption)!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}, 
    {name:'Right', className:'imageRight', openWith:'!>', closeWith:'(Caption)!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}
]},

I’m new to markitup so any thoughts very much appreciated 😊

Hi Rick,

i got this working with help from a friend. Look how mine looks:

I couldn’t help much on the code yet (my friend has done it), but i think you have to look at “{replace}” my friend has implemented md-markitup in a way so that i can use md-markitup/textile with all sets not only on the CP but also on the ee-wiki as input-method with moxie-imagemanager integrated.

So i have one central markitup textile-installation which i could use on both, the CP and the ee-wiki. If there is interest i will gladly ask him if he allows me to put his work as a help for others here or ask ryan if he would like to post it to his tips and tricks-section for md-markitup on his page.

Bernd

Wow, that was easy. This works as expected:

{name:'Images', className:'images', dropMenu: [
    {name:'Left', className:'imageLeft', openWith:'!<', closeWith:'({replace})!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}, 
    {name:'Center', className:'imageCenter', openWith:'!', closeWith:'({replace})!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}, 
    {name:'Right', className:'imageRight', openWith:'!>', closeWith:'({replace})!', beforeInsert: function(h){moxieInsert(h,{dimensions: false,replaceText: 'Caption'});}}
]},

Any markitup tips and tricks would be appreciated - thank you!

In response to my own question…

MCFileManager and MCImageManager with MD MarkItUp! appear to work OK in Firefox 3.0.7 but in Safari 3.2.1 the pop-up appears and then hangs with the message “Loading…”

I was experiencing a couple of problems:

1. Not enough (777) permissions on the upload directories (/files and /images/uploads)
2. Some corrupted files on the server in imagemanager/classes/

Kyle, you can make your own functions, more or less. There are a couple very useful functions included in the sets (provided by Karl Swedberg of learningjquery.com) that help do advanced things with the Image Manager. You could make a nested list of different kinds of image inserts (which is what I do) and I provide an example in the set (looking at the default set right now for the sake of argument). Take this MIU button for example:

{
      name: 'Picture [Moxiecode]',
      className:'moxiePic',
      openWith:'[img]',
      closeWith:Qybv9BblnQY1Dwd1MHFkmiQB2GU4Zewmtypography_img_src_end alt=" [/img]', 
      beforeInsert: function(h) {
        moxieInsert(h, {
          dimensions: true,
          replaceText: 'alt text'
        });
      }

Go ahead an start with that and modify it to be more in line with what you need:

{
      name: 'Basic Picture',
      className:'moxiePicBasic',
      openWith:'[img]',
      closeWith:Qybv9BblnQY1Dwd1MHFkmiQB2GU4Zewmtypography_img_src_end alt=" title="" [/img]', 
      beforeInsert: function(h) {
        moxieInsert(h, {
          dimensions: true,
          replaceText: 'alt text'
        });
      }

I added that to the textile set “inside” the default supplied image dropdown, and now I see the extra image insert type when I hover (see attached pic).Dimensions are true, so it will get the dimensions for you, and I added the title in there. If I add a pic with this button, I get this:

<img src=”/uploads/sample.jpg” width=”1018” height=”405” alt=”alt text” title=”” />

I could add a class as well, either making a custom button specifically for a class (and hardcoding the class in there (which I’ll do below), or just leave class blank like I did for the title. For every new button, try to remember to give it a unique class name.

{
          name:'Insert Image (Float Left)', 
          className:'moxiePicBasicFLeft',
          openWith:'[img]', 
          closeWith:Qybv9BblnQY1Dwd1MHFkmiQB2GU4Zewmtypography_img_src_end alt=" title="" class="imageleft" [/img]',
          beforeInsert: function(h) {
            moxieInsert(h, {
              dimensions: false,
              replaceText: 'alt text'
            });
          }
        },

I set dimensions to false just to mix things up. That outputs:

<img src=”/uploads/sample.jpg alt=”alt text” title=”” class=”imageleft” />

Does that make sense, or are you trying to do something else?

So six weeks later I finally got to this part of the project. I have mcImageManager and mcFileManager working with it. The code above allows for placing default text in a single area and places the cursor in the text to be replaced… which would be fine except I ultimately need the user to fill in 2 items, a photo caption and a photo credit. So if there was a way to get javascript drop down fields (like you get when using the “link” or default “email” or “image” button) that would be ideal.

In the meantime I’m also wishing for mcImageManger and mcFileManager FF Matrix fields, but… one pipe-dream at a time.

Spellcheck doesn’t seem to be working for me. When I click it, I get a javascript error “ReferenceError: Can’t find variable: toggle_spellcheck”. It seems to be working just fine on standard EE textareas.