Jul312012

MarkItUp Editor Plugins

Posted in Web Design

So while building this website, I wanted wanted to use some sort of wysiwyg editor to make it somewhat easy to add new posts and pages. I messed around with the HtmlBox, CLEditor, jwysiwyg, and CKEditor editors, and liked them but they were kinda buggy and would take a lot of time to customize. While building the site in the beginning I went with SKEditor because it did have a lot of features that I liked, but still i was stuck on how to add different things or how to change some things, including makign it HTML5 compatible.


Then I found MarkItUp and practically fell it love. Its so easy to use, and customize which I did a lot of. I think for programmers this is a good one to use as it will make it easy to add coding to you textarea box and still understand it. As for clients websites, it should help them learn how to code if they would use it, you just have to let them know how to use the preview button correctly to check their posts before they submit it.


Anyways, I added a few things that I figured some people would like to add to their own as well. Some of the features i added include the blockquote / quote tag, youtube videos, syntax highlighter, Map Quest, images floating to the left or right, font styles, and my own gallery with help from the mark it up website. Below are my changes, and I'll also describe how I got everything working.

My CSS Stylesheet

/* -------------------------------------------------------------------
// markItUp!
// By Jay Salvat - markitup.jaysalvat.com/
// ------------------------------------------------------------------*/
.markItUp .Heading a, .markItUp .Heading1 a {
	background-image:url(images/h1.png); line-height:20px; height:20px;
}
.markItUp .Heading2 a {
	background-image:url(images/h2.png); 
}
.markItUp .Heading3 a {
	background-image:url(images/h3.png); 
}
.markItUp .Header3 a h3 { 
	background-color: transparent;
}
.markItUp .Heading4 a {
	background-image:url(images/h4.png); 
}
.markItUp .Heading5 a {
	background-image:url(images/h5.png); 
}
.markItUp .Heading6 a {
	background-image:url(images/h6.png); 
}

.markItUp .pTag a {
	background-image:url(images/paragraph.png); 
}
.markItUp .pQuote a {
	background-image:url(images/quote.png); 
}
.markItUp .pPagebreak a {
	background-image:url(images/application_tile_vertical.png); 
}
.markItUp .pHr a {
	background-image:url(images/text_horizontalrule.png); 
}
.markItUp .pMaps a {
	background-image:url(images/map.png); 
}

.markItUp .pBold a {
	background-image:url(images/bold.png);
}
.markItUp .pItalic a {
	background-image:url(images/italic.png);
}
.markItUp .pStrike a {
	background-image:url(images/stroke.png);
}
.markItUp .pUnderline a {
	background-image:url(images/underline.png);
}
.markItUp .pFontFamily a {
	background-image:url(images/fonts.png);
}

.markItUp .listU a {
	background-image:url(images/list-bullet.png);
}
.markItUp .listO a {
	background-image:url(images/list-numeric.png);
}
.markItUp .listL a {
	background-image:url(images/list-item.png);
}

.markItUp .PicTag a {
	background-image:url(images/picture.png); 
}
.markItUp .GalPic a {
	background-image:url(images/images.png);
}
.markItUp .LinkTag a {
	background-image:url(images/link.png);
}

.markItUp .pImgLeft a {
	background-image:url(images/image_left.png); 
}
.markItUp .pImgRight a {
	background-image:url(images/image_right.png); 
}
.markItUp .pImgCenter a {
	background-image:url(images/image_center.png); 
}

.markItUp .clean a {
	background-image:url(images/clean.png);
}
.markItUp .preview a {
	background-image:url(images/preview.png);
}
.markItUp .encodechars a {
	background-image:url(images/encodechars.png);
}
.markItUpHeader .sort a {
	background-image:url(images/sort.png);
}
.markItUp .youtube a {
	background-image:url(images/youtube.png);
}

.markItUp .pCode a {
	background-image:url(images/script_code.png);
}

.markItUp .Cphp a {
	background-image:url(images/php.gif);
}
.markItUp .Cjs a {
	background-image:url(images/JavaScript.png);
}
.markItUp .Chtml a {
	background-image:url(images/html.png);
}
.markItUp .Cxml a {
	background-image:url(images/rss.png);
}
.markItUp .Cplain a {
	background-image:url(images/page_text.png);
}
.markItUp .Ccss a {
	background-image:url(images/css.png);
}
.markItUp .Csql a {
	background-image:url(images/database.png);
}

.markItUp .mAlign a	{
	background-image:url(images/align_center.png);
}
.markItUp .mCenter a	{
	background-image:url(images/align_center.png);
}
.markItUp .mJustify a	{
	background-image:url(images/align_justify.png);
}
.markItUp .mLeft a	{
	background-image:url(images/align_left.png);
}
.markItUp .mRight a	{
	background-image:url(images/align_right.png);
}

.markItUp .pFonts a	{
	background-image:url(images/fonts.png);
}

.markItUp .palette a {
    background-image: url(images/colors.png);
}

.markItUp .palette ul {
    width: 81px;
    padding: 1px;
}

.markItUp .palette li {
    border: 1px solid white;
    width: 25px;
    height: 25px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    float: left;
}

.markItUp .palette ul a {
    width: 25px;
    height: 25px;
}

.markItUp .palette ul a:hover {
/*    background-color: transparent; */
}

.markItUp .palette .col1-1 a {
    background: #FCE94F;
}

.markItUp .palette .col1-2 a {
    background: #EDD400;
}

.markItUp .palette .col1-3 a {
    background: #C4A000;
}

.markItUp .palette .col2-1 a {
    background: #FCAF3E;
}

.markItUp .palette .col2-2 a {
    background: #F57900;
}

.markItUp .palette .col2-3 a {
    background: #CE5C00;
}

.markItUp .palette .col3-1 a {
    background: #E9B96E;
}

.markItUp .palette .col3-2 a {
    background: #C17D11;
}

.markItUp .palette .col3-3 a {
    background: #8F5902;
}

.markItUp .palette .col4-1 a {
    background: #8AE234;
}

.markItUp .palette .col4-2 a {
    background: #73D216;
}

.markItUp .palette .col4-3 a {
    background: #4E9A06;
}

.markItUp .palette .col5-1 a {
    background: #729FCF;
}

.markItUp .palette .col5-2 a {
    background: #3465A4;
}

.markItUp .palette .col5-3 a {
    background: #204A87;
}

.markItUp .palette .col6-1 a {
    background: #AD7FA8;
}

.markItUp .palette .col6-2 a {
    background: #75507B;
}

.markItUp .palette .col6-3 a {
    background: #5C3566;
}

.markItUp .palette .col7-1 a {
    background: #EF2929;
}

.markItUp .palette .col7-2 a {
    background: #CC0000;
}

.markItUp .palette .col7-3 a {
    background: #A40000;
}

.markItUp .palette .col8-1 a {
    background: #FFFFFF;
}

.markItUp .palette .col8-2 a {
    background: #D3D7CF;
}

.markItUp .palette .col8-3 a {
    background: #BABDB6;
}

.markItUp .palette .col9-1 a {
    background: #888A85;
}

.markItUp .palette .col9-2 a {
    background: #555753;
}

.markItUp .palette .col9-3 a {
    background: #000000;
}

I used icons from FamFamFam's Silk Icon Set with some modified icons to do the float image tricks.

My JavaScript Settings

// ----------------------------------------------------------------------------
// markItUp!
// ----------------------------------------------------------------------------
// Copyright (C) 2011 Jay Salvat
// markitup.jaysalvat.com/
// ----------------------------------------------------------------------------
// Html tags
// en.wikipedia.org/wiki/html
// ----------------------------------------------------------------------------
// Basic set. Feel free to add more tags
// ----------------------------------------------------------------------------
var mySettings = {
	onEnter:  	{keepDefault:false, replaceWith:'\n'},
	onShiftEnter:  	{keepDefault:false, openWith:'n

', closeWith:'

'}, onCtrlEnter: {keepDefault:false, replaceWith: '
'}, onTab: {keepDefault:false, replaceWith:' '}, resizeHandle: true, previewAutoRefresh: true, markupSet: [ {name: 'Text Sizes and Headings', className: 'Heading', dropMenu: [ {name:'

Heading

', className: 'Heading1', key:'1', openWith:'

', closeWith:'

', placeHolder:'Your title here...' }, {name:'

Heading 2

', className: 'Heading2', key:'2', openWith:'

', closeWith:'

', placeHolder:'Your title here...' }, {name:'

Heading 3

', className: 'Heading3', key:'3', openWith:'

', closeWith:'

', placeHolder:'Your title here...' }, {name:'

Heading 4

', className: 'Headin4', key:'4', openWith:'

', closeWith:'

', placeHolder:'Your title here...' }, {name:'
Heading 5
', className: 'Heading5', key:'5', openWith:'
', closeWith:'
', placeHolder:'Your title here...' }, {name:'
Heading 6
', className: 'Heading6', key:'6', openWith:'
', closeWith:'
', placeHolder:'Your title here...' }, ] }, {name: 'Align Text', className: 'mAlign', dropMenu: [ {name: 'Cente', className: 'mCenter', openWith: '

', closeWith: '

'}, {name: 'Justify', className: 'mJustify', openWith: '

', closeWith: '

'}, {name: 'Left', className: 'mLeft', openWith: '

', closeWith: '

'}, {name: 'Right', className: 'mRight', openWith: '

', closeWith: '

'} ] }, {name:'Horizonal Line', className: 'pHr', openWith:'
' }, {name:'Paragraph', className: 'pTag', openWith:'

', closeWith:'

' }, {name:'Quote', className: 'pQuote', openWith:'
', closeWith:'
' }, {name:'Read More/cut off page', className: 'pPagebreak', openWith:'' }, {separator:'---------------' }, {name:'Bold', key:'B', className: 'pBold', openWith:'', closeWith:'' }, {name:'Italic', key:'I', className: 'pItalic', openWith:'', closeWith:'' }, {name:'Strike through', className: 'pStrike', key:'S', openWith:'', closeWith:'' }, {name:'Underline', className: 'pUnderline', key:'U', openWith:'', closeWith:'' }, {name: 'Font Family', className: 'pFontFamily', dropMenu: [ {name: 'Comic Sans MS', openWith:'', closeWith:''}, {name: 'Georgia', openWith:'', closeWith:''}, {name: 'Times New Roman', openWith:'', closeWith:''}, {name: 'Palatino', openWith:'', closeWith:''}, {name: 'Garamond', openWith:'', closeWith:''}, {name: 'Bookman', openWith:'', closeWith:''}, {name: 'Verdana', openWith:'', closeWith:''}, {name: 'Impact', openWith:'', closeWith:''}, {name: 'Papyrus', openWith:'', closeWith:''}, {name: 'Avant Garde', openWith:'', closeWith:'' } ]}, {name: 'Font Color', className:'palette', dropMenu: [ {name: 'yellow', openWith:'', closeWith: '', className:"col1-1" }, {name: 'yellow', openWith:'', closeWith: '', className:"col1-2" }, {name: 'yellow', openWith:'', closeWith: '', className:"col1-3" }, {name: 'orange', openWith:'', closeWith: '', className:"col2-1" }, {name: 'orange', openWith:'', closeWith: '', className:"col2-2" }, {name: 'orange', openWith:'', closeWith: '', className:"col2-3" }, {name: 'brown', openWith:'', closeWith: '', className:"col3-1" }, {name: 'brown', openWith:'', closeWith: '', className:"col3-2" }, {name: 'brown', openWith:'', closeWith: '', className:"col3-3" }, {name: 'green', openWith:'', closeWith: '', className:"col4-1" }, {name: 'green', openWith:'', closeWith: '', className:"col4-2" }, {name: 'green', openWith:'', closeWith: '', className:"col4-3" }, {name: 'blue', openWith:'', closeWith: '', className:"col5-1" }, {name: 'blue', openWith:'', closeWith: '', className:"col5-2" }, {name: 'blue', openWith:'', closeWith: '', className:"col5-3" }, {name: 'purple', openWith:'', closeWith: '', className:"col6-1" }, {name: 'purple', openWith:'', closeWith: '', className:"col6-2" }, {name: 'purple', openWith:'', closeWith: '', className:"col6-3" }, {name: 'red', openWith:'', closeWith: '', className:"col7-1" }, {name: 'red', openWith:'', closeWith: '', className:"col7-2" }, {name: 'red', openWith:'', closeWith: '', className:"col7-3" }, {name: 'gray', openWith:'', closeWith: '', className:"col8-1" }, {name: 'gray', openWith:'', closeWith: '', className:"col8-2" }, {name: 'gray', openWith:'', closeWith: '', className:"col8-3" }, {name: 'gray', openWith:'', closeWith: '', className:"col9-1" }, {name: 'gray', openWith:'', closeWith: '', className:"col9-2" }, {name: 'gray', openWith:'', closeWith: '', className:"col9-3" } ]}, {separator:'---------------' }, {name:'Ul', className: 'listU', openWith:'
    n
  • ', closeWith:'
  • n
n', placeHolder:'' }, {name:'Ol', className: 'listO', openWith:'
    n
  1. ', closeWith:'
  2. n
n', placeHolder:'' }, {name:'Li', className: 'listL', openWith:'
  • ', closeWith:'
  • ' }, {separator:'---------------' }, {name: 'My Gallery Files', className: 'GalPic', beforeInsert:function() { $('').modal( {overlayClose:true, autoResize:true, minHeight:500, minWidth:800, onOpen: function (dialog) { dialog.overlay.fadeIn('slow', function () { dialog.container.slideDown('slow', function () { dialog.data.fadeIn('slow'); }); }); }}); } }, {name:'Picture', className:'PicTag', dropMenu: [ {name: 'Image Left', className: 'pImgLeft', replaceWith:']!]" alt="[![Alternative text]!]" style="float:left; padding:5px;" />' }, {name: 'Centered Image', className: 'pImgCenter', replaceWith:'

    ]!]" alt="[![Alternative text]!]" />

    ' }, {name: 'Image Right', className: 'pImgRight', replaceWith:']!]" alt="[![Alternative text]!]" style="float:right; padding:5px;" />' } ]}, {name:'Link', className: 'LinkTag', key:'L', openWith:']!]"(!( title="[![Title]!]")!)>[![Link Name]!]', closeWith:'' }, // , placeHolder:'Your text to link...' { name:'Insert You Tube Video', className: 'youtube', replaceWith: function(mark){ var nameYT = prompt('Enter You Tube URL', 'http://'); if (nameYT != null && nameYT != "" && nameYT != 'http://'){ var YTUrl = nameYT.replace('http://www.youtube.com/watch?v=', ''); $.markItUp( { replaceWith: '' } ); } else { return false; } } }, { name:'Insert Google Map', className: 'pMaps', replaceWith: function(mark){ var address = prompt('Address:', ''); if(address != null && address != ''){ var addr = address.replace(/s/g, '+'); $.markItUp( { replaceWith: 'map' } ); } else { return false; } } }, {separator:'---------------' }, { name:'Sort', className:"sort", replaceWith:function(h) { var s = h.selection.split((($.browser.mozilla) ? "n" : "rn")); s.sort(); if (h.altKey) s.reverse(); return s.join("n"); } }, { name:'Encode Html special charsn make ready for display', className:"encodechars", replaceWith:function(markItUp) { var container = document.createElement('div'); container.appendChild(document.createTextNode(markItUp.selection)); return container.innerHTML; } }, {name:'Code', className: 'pCode', dropMenu: [ {name: 'PHP', className: 'Cphp', openWith:'
    ', closeWith: '
    ' }, {name: 'CSS', className: 'Ccss', openWith:'
    ', closeWith: '
    ' }, {name: 'JavaScript', className: 'Cjs', openWith:'
    ', closeWith: '
    ' }, {name: 'SQL', className: 'Csql', openWith:'
    ', closeWith: '
    ' }, {name: 'HTML', className: 'Chtml', openWith:'
    ', closeWith: '
    ' }, {name: 'XML', className: 'Cxml', openWith:'
    ', closeWith: '
    ' }, {name: 'Plain', className: 'Cplain', openWith:'
    ', closeWith: '
    ' } ]}, {name:'Erase Coding', className:'clean', replaceWith:function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } }, {name:'Preview', className:'preview', call:'preview'} ] }

    Now the above javascript code has been modified a lot to include the features that I was looking for. For the syntax highlighter part, I grabbed a modified version of the Syntax Highlight code to work with jquery which you can grab from my source. For mapquest, when you click on the button you'll get a popup asking for the address. After you put in the address the code will go into the textarea box with a close up image of the address, and a link to mapquest to get the directions.For youtube, you put in the fill url to the youtube video and it will insert the embed codes for youtube to display the video on your site.


    The image gallery code included here came from Markitup's source for how to do it, and from Simple Modal project page. We're able to load up an iframe that you'll have to create to show a list of images. From there, you'll need the following code on your iframe page to click on, close the box, and insert the code for the images.

    
    
    And then the html for the images is as follows..
    alt
    Hope this helps some people! good luck getting everything to work for you. If you have any questions leave them in the comments below, and I'll try my best to help out.

    6 Comment(s)

    Gravatar

    0cx ~ 03/12/15, 8:59pm
     

    ok,I am sending an email, I go for beers, thanks. :))

    Gravatar

    0cx ~ 03/12/15, 8:50pm
     

    try to insert into a cms, but I think it is a disaster :)

    www.pirataslibres.net

    Gravatar

    0cx ~ 03/12/15, 8:25pm
     

    kasperskylab_antibanner="on">]

    This I believe is left in the code right?

    Gravatar

    Yohn ~ 03/12/15, 8:46pm
     

    I'm not able to find that in the above codes..

    Gravatar

    0cx ~ 03/12/15, 8:18pm
     

    all the time looking for examples of markItUp and finally I managed a good example, congratulations, but I have some doubts, can help a little?

    Gravatar

    Yohn ~ 03/12/15, 8:51pm
     

    I really havent messed with MarkItUp in a few years but it was relatively easy to set up after I figured it out.. If you need assistance I can try to help a little, I'm not sure if the contact page on this site works anymore, but it should! lol.. my email is - john.skem9.at.gmail
    just replace the .at. with @

    Leave a Comment Below







    If someone replies to your comment you'll get an email about it (optional)

    About Commenting

    • You're email address will not be shown
    • HTML is disabled
    • Fields marked with (*) are required
    • If you have a Gravatar account, you gravatar will be displayed here.
    • All comments have to be approved before showing up on the site