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

Hi there- I’m very thankful that there are really good programmers in the world like you all. I’m, unfortunately, not one of them. I’ve installed the markitup files with the textile set and in the publish or edit modes the textile markitup shows up in the fields I’ve set them up with…which is great!

But when I go to use it the output I get is not good. what happens is if I type in a header style (h1, for example) it perpetuates throughout the whole posting. paragraph tags never appear and only the first styling shows up (with the exception of inline items like <strong> or <em> - they all show up fine).

Am I doing something wrong to get these effects? I know e-man said that he got textile to work flawlessly, but I’m not having the same luck. Any help would be appreciated!

Josh

You have a the field formatting on your custom field set to textile? That is, after having installed the textile plugin, which is entirely different than the textile set for Markitup.

You installed the “tweaked” Textile plugin that I included with the extension files?

Wait a sec - you use textile much? Are you sure you have an empty line after your h1?! And between your paragraphs?

I guess I’m not up with Textile…I pu in the empty lines and everything works great! Thanks!

Josh

I tried to follow the instructions by bcartier to get preview for Textile, but nothing works. Anyone get it to show?!

I’m trying to get this extension to work on a production server within a folder root. I’ve been successful in getting it to run on a normal live site (www.livinghopeineugene.com), but this site - with the same installation procedures it just doesn’t work.

I’m more of a designer than a developer, but I believe that what I’ve read above suggests that there are problems when attempting to install on a production server within a folder. Does anyone have any advice on how to get this up and running in such a scenario…or am I even barking up the right tree?

Josh

I have been really liking using Textile for quick post entries. It makes it just SO much simpler.

Okay, I found that when entering links like so renders just fine:

http://somesite.com

But the following causes a small error:

"Link Text":http://somesite.com

What I mean is, for instance, on other parts of my site (and also one of my favorites, Boyink!), links would render as: http://www.boyink.com/splaat?URL=http://somesite.com -OR- http://organizedfellow.com/?URL=http://somesite.com

Mine do too, except when parsed like:

"Link Text":http://somesite.com

http://somesite.com renders as http://somesite.com and not http://organizedfellow.com/?URL=http://somesite.com

know whatta mean? 😊

ADD: I will fix that System folder path issue, too. I know exactly what you mean. The way most exteensions are written that include files, they wouldn’t even work with a masked control panel. Thanks for pointing it out.

Have you had a chance to update the paths in the extension so that it will work in a development site folder? Unfortunately, i’ve don’t have the know-how to do this myself, but would find the new version super useful.

Ryan, this is great. Thank you.

One thing that I noticed is I missed being able to specify the number of rows of the text area as I liked that control over publish form matching text area size to the amount of content expected.

After a bit of tinkering, I noticed that when I removed the height style from the MarkItUp skin, that it was rendered by the number of rows. I then noticed you hid the number of rows select form, so I had to toggle back and forth to the textarea to set the rows and then go back to MarkItUp and save to record my selection.

Not sure I am making a feature request, but thought to share in case anyone else missed the feature. Maybe that could be a config option in setting?

Yeah, this thing could probably use a little love. I’m reticent to do so at the moment because…because…OK, because I’m lazy. The closer it gets to the end of Summer ‘08, the less I want to work on EE add-ons.

Really, probably all that needs to be done is to allow you to set the number of rows…which means I would unhide that option on the custom field screen.

Got some pressing client work this week, but I’ll see if I can add that to the add-on to-do list.

Finally got around to playing with this, works great so far. Nice work.

Note: I tried this on an install with a massive weblog list, and the publish dropdown z-index clashed with the Markitup buttons. Easy fix, just added z-index: 10; to #publishdropmenu in the css for my cp theme.

I was looking for an easy way to switch from the default skin, and thought it was about time for me to get my hands dirty with an extension, so I added a new setting ‘skin_dir’:

Could not get this to work at all on a site with url of /~clientname. Spent plenty of frustrating time trying to get it to work but with no luck. I tried it on a site with a normal domain name, where EE is installed at root level and did manage to get it to work OK. Now I just have to figure out if its what I’m looking for… although anything to avoid having to install a WYSIWYG must surely be a good thing!

@angstmann: Did you see Chuchi’s post above about this? I have to update the extension to reflect this change, but maybe you can make the tweak and it will work for you?

I will say that this extension has some rough spots. It was whipped together relatively quickly, and I haven’t had a ton of time to update my extensions lately.

I was loving the Markitup extension so much, I couldn’t resist.

Big ups to K-Swed for help on this one.

I’m using LG Image Manager and LG File Manager pretty much exclusively for file/image uploads. When they have their own field it worked great, but I wanted a way for them to enter an image or file link directly into a body field. Initially I just had a “Place File” link that called the MCFilemanager dialog, let you do your uploading, and inserted the url into the textarea.

When I started using the Markitup extension, I wanted to integrate the two. So we came up with this, in the textile set.js:

{
      name: 'Picture', 
      beforeInsert: function(h) {
        var ta = h.textarea,
          thisId = ta.id,
          thisVal = ta.value,
          cp = h.caretPosition,
          pre = thisVal.slice(0, cp),
          aft = thisVal.slice(cp, thisVal.length);
                    mcImageManager.open('entryform',thisId,'',function(url) {
                      ta.value = pre + '!' +  url + '!' + aft;
                      cp += 2 + url.length;
                      if (ta.setSelectionRange) {
                        ta.focus();
                        ta.setSelectionRange(cp,cp);
                      } else if (ta.createTextRange) {
                        var range = ta.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', cp);
                        range.moveStart('character', cp);
                        range.select();
                      }
                    },
                    {remove_script_host : true});
      }  
    },
    {
      name: 'File', 
      beforeInsert: function(h) {
        var ta = h.textarea,
          thisId = ta.id,
          thisVal = ta.value,
          cp = h.caretPosition,
          pre = thisVal.slice(0, cp),
          aft = thisVal.slice(cp, thisVal.length);
                    mcFileManager.open('entryform',thisId,'',function(url) {
                      ta.value = pre + '"Link text here...":' + url + aft;
                      cp += 2 + url.length;
                      if (ta.setSelectionRange) {
                        ta.focus();
                        ta.setSelectionRange(cp,cp);
                      } else if (ta.createTextRange) {
                        var range = ta.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', cp);
                        range.moveStart('character', cp);
                        range.select();
                      }
                    },
                    {remove_script_host : true});
      }
    },

Creates a button for image, which prompts MCimagemanager and inserts the !imageurl! textile markup with whatever you inserted. Same for file. but it just makes it a link to the inserted file.

Glad you’re digging this extension. Tim, if you have any ideas on how to make it better (a la the addition of the Skin Directory field) which I can add to an update - or even ideas on how to simplify the install, PM me or email me and let’s get those updates into the extension for everyone to use.

You’ve probably noticed there are some issues if you have more than one Markitup field of different types on a single Publish page, among other small things (I’m sure K-Swed could take a look at some of the JS under the hood and suggest how it might be optimized). Thanks!