You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
14 KiB
371 lines
14 KiB
//
|
|
//! MarkdownDeep - http://www.toptensoftware.com/markdowndeep
|
|
//! Copyright (C) 2010-2011 Topten Software
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this product except in
|
|
// compliance with the License. You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software distributed under the License is
|
|
// distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and limitations under the License.
|
|
//
|
|
|
|
var MarkdownDeepEditorUI=new function(){
|
|
|
|
// private:priv.
|
|
// private:.m_*
|
|
// private:.m_listType
|
|
// private:.m_prefixLen
|
|
|
|
this.HelpHtmlWritten=false;
|
|
|
|
this.HelpHtml=function(help_location)
|
|
{
|
|
// Start with nothing
|
|
var str='';
|
|
str+='<div class="mdd_modal" id="mdd_syntax_container" style="display:none">\n';
|
|
str+='<div class="mdd_modal_frame">\n';
|
|
str+='<div class="mdd_modal_button">\n';
|
|
str+='<a href="' + help_location + '" id="mdd_help_location" style="display:none"></a>\n';
|
|
str+='<a href="#" id="mdd_close_help">Close</a>\n';
|
|
str+='</div>\n';
|
|
str+='<div class="mdd_modal_content">\n';
|
|
str+='<div class="mdd_syntax" id="mdd_syntax">\n';
|
|
str+='<div class="mdd_ajax_loader"></div>\n';
|
|
str+='</div>\n';
|
|
str+='</div>\n';
|
|
str+='</div>\n';
|
|
str+='</div>\n';
|
|
return str;
|
|
}
|
|
|
|
// Helper function that returns the HTML content of the toolbar
|
|
this.ToolbarHtml = function() {
|
|
// Start with nothing
|
|
var str = '';
|
|
|
|
//// The toolbar div
|
|
//str += '<div class="mdd_links">\n';
|
|
//str += '<a href="#" class="mdd_help" tabindex=-1>How to Format</a>\n';
|
|
//str += '</div>\n';
|
|
//str += '<ul>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_undo" title="Undo (Ctrl+Z)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_redo" title="Redo (Ctrl+Y)" tabindex=-1></a></li>\n';
|
|
//str += '<li><span class="mdd_sep"></span></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_heading" title="Change Heading Style (Ctrl+H, or Ctrl+0 to Ctrl+6)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_code" title="Preformatted Code (Ctrl+K or Tab/Shift+Tab on multiline selection)" tabindex=-1></a></li>\n';
|
|
//str += '<li><span class="mdd_sep"></span></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_bold" title="Bold (Ctrl+B)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_italic" title="Italic (Ctrl+I)" tabindex=-1></a></li>\n';
|
|
//str += '<li><span class="mdd_sep"></span></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_ullist" title="Bullets (Ctrl+U)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_ollist" title="Numbering (Ctrl+O)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_outdent" title="Unquote (Ctrl+W)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_indent" title="Quote (Ctrl+Q)" tabindex=-1></a></li>\n';
|
|
//str += '<li><span class="mdd_sep"></span></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_link" title="Insert Hyperlink (Ctrl+L)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_img" title="Insert Image (Ctrl+G)" tabindex=-1></a></li>\n';
|
|
//str += '<li><a href="#" class="mdd_button" id="mdd_hr" title="Insert Horizontal Rule (Ctrl+R)" tabindex=-1></a></li>\n';
|
|
//str += '</ul>\n';
|
|
//str += '<div style="clear:both"></div>\n';
|
|
//return str;
|
|
|
|
////KRZE
|
|
// The toolbar div
|
|
str += '<div class="mdd_links">\n';
|
|
str += '</div>\n';
|
|
str += '<ul>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_undo" title="Rückgängig (Ctrl+Z)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_redo" title="Wiederholen (Ctrl+Y)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_heading" title="Kopfzeilen (Ctrl+H, oder Ctrl+0 bis Ctrl+6)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_code" title="Vorformatiert (Ctrl+K oder Tab/Shift+Tab bei mehreren Zeilen)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_bold" title="Fett (Ctrl+B)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_italic" title="Kursiv (Ctrl+I)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_ullist" title="Ungeordnete Liste (Ctrl+U)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_ollist" title="Geordnete Liste (Ctrl+O)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_link" title="Hyperlink (Ctrl+L)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_img" title="Bild (Ctrl+G)" tabindex=-1></a></li>\n';
|
|
str += '<li><a href="#" class="mdd_button" id="mdd_hr" title="Horizontale Linie (Ctrl+R)" tabindex=-1></a></li>\n';
|
|
str += '</ul>\n';
|
|
return str;
|
|
|
|
};
|
|
|
|
// Handle click on resize bar
|
|
this.onResizerMouseDown=function(e)
|
|
{
|
|
// Initialize state
|
|
var textarea=$(e.srcElement).prevAll("textarea")[0];
|
|
var iOriginalMouse = e.clientY;
|
|
var iOriginalHeight = $(textarea).height();
|
|
|
|
// Bind to required events
|
|
$(document).bind("mousemove.mdd", DoDrag);
|
|
$(document).bind("mouseup.mdd", EndDrag);
|
|
|
|
// Suppress default
|
|
return false;
|
|
|
|
// End the drag operation
|
|
function EndDrag(e)
|
|
{
|
|
$(document).unbind("mousemove.mdd");
|
|
$(document).unbind("mouseup.mdd");
|
|
return false;
|
|
}
|
|
|
|
// Handle drag operation
|
|
function DoDrag(e)
|
|
{
|
|
var newHeight=iOriginalHeight + e.clientY - iOriginalMouse;
|
|
if (newHeight<50)
|
|
newHeight=50;
|
|
$(textarea).height(newHeight);
|
|
return false;
|
|
}
|
|
|
|
}
|
|
|
|
// Used to store the scroll position of the help
|
|
var scrollPos=0;
|
|
var contentLoaded=false;
|
|
|
|
////KRZE
|
|
//// Show the popup modal help
|
|
//this.onShowHelpPopup=function()
|
|
//{
|
|
// // Show the help
|
|
// $("#mdd_syntax_container").fadeIn("fast");
|
|
|
|
// // Restore the scroll position
|
|
// $(".modal_content").scrollTop(scrollPos);
|
|
|
|
// // Hook escape key to close
|
|
// $(document).bind("keydown.mdd", function(e){
|
|
// if (e.keyCode==27)
|
|
// {
|
|
// MarkdownDeepEditorUI.onCloseHelpPopup();
|
|
// return false;
|
|
// }
|
|
// });
|
|
|
|
// // Load content
|
|
// if (!contentLoaded)
|
|
// {
|
|
// contentLoaded=true;
|
|
|
|
// var help_location=$("#mdd_help_location").attr("href");
|
|
// if (!help_location)
|
|
// help_location="mdd_help.htm";
|
|
|
|
// $("#mdd_syntax").load(help_location);
|
|
// }
|
|
|
|
// return false;
|
|
//}
|
|
|
|
//// Close the popup help
|
|
//this.onCloseHelpPopup=function()
|
|
//{
|
|
// // Save scroll position
|
|
// scrollPos=$(".modal_content").scrollTop();
|
|
|
|
// // Hide help
|
|
// $("#mdd_syntax_container").fadeOut("fast");
|
|
|
|
// // Unhook escape key
|
|
// $(document).unbind("keydown.mdd");
|
|
// $(document).unbind("scroll.mdd");
|
|
|
|
// return false;
|
|
//}
|
|
|
|
// Toolbar click handler
|
|
this.onToolbarButton=function(e)
|
|
{
|
|
// Find the editor, grab the MarkdownEditor.Editor class from it's data
|
|
var editor=$(e.target).closest("div.mdd_toolbar").nextAll("textarea.mdd_editor").data("mdd");
|
|
|
|
// Invoke the command
|
|
editor.InvokeCommand($(e.target).attr("id").substr(4));
|
|
|
|
// Supress default
|
|
return false;
|
|
}
|
|
}();
|
|
|
|
/*
|
|
MarkdownDeep jQuery plugin
|
|
|
|
Markup:
|
|
|
|
<div class="mdd_toolbar"></div>
|
|
<textarea class="mdd_editor">markdown content here</textarea>
|
|
<div class="mdd_resizer"></div>
|
|
<div class="mdd_preview"></div>
|
|
|
|
Note: the associated divs are all optional and if missing, the plugin will create them. However...
|
|
you might experience the page jumping around during load if you do this. ie: it's recommended to
|
|
explicitly include them.
|
|
|
|
Example:
|
|
|
|
$("textarea.mdd_editor").MarkdownDeep({
|
|
help_location: "/Content/mdd_help.html",
|
|
disableTabHandling:true
|
|
});
|
|
|
|
Plugin options:
|
|
|
|
* resizebar - boolean to include the resize bar (default:true)
|
|
* toolbar - boolean to include the toolbar (default:true)
|
|
* help_location - URL of where the help syntax reference should be loaded from (default:"mdd_help.html")
|
|
|
|
Transform options:
|
|
|
|
* SafeMode - boolean to enable only safe markup (default:false)
|
|
* ExtraMode - boolean to enable MarkdownExtra extensions (default:true)
|
|
* MarkdownInHtml - boolean to allow markdown in nested html (eg: divs) (default:false)
|
|
* AutoHeadingIDs - boolean to automatically generate IDs for headings (default:false)
|
|
* UrlBaseLocation - string base location of document (default:null)
|
|
* UrlRootLocation - string root location of document (default:null)
|
|
* NewWindowForExternalLinks - boolean to add target=_blank for links to urls starting with http:// (default:true)
|
|
* NewWindowForLocalLinks - boolean to add target=_blank for local relative links (good for preview mode) (default:true)
|
|
* NoFollowLinks - boolean to add rel=nofollow to all external links (default:false)
|
|
* HtmlClassFootnotes - string, html class name for footnotes div (default:nul)
|
|
* HtmlClassTitledImages - string, html div class name to wrap single paragraph images in (default:null)
|
|
|
|
Editor options/hooks:
|
|
|
|
* disableShortCutKeys - boolean, disables Ctrl+key shortcuts (default:false)
|
|
* disableAutoIndent - boolean, disables auto tab-indent on pressing enter (default:false)
|
|
* disableTabHandling - boolean, disables tab key working in the editor (default:false)
|
|
* onPreTransform=function(editor, markdown)
|
|
* onPostTransform=function(editor, html)
|
|
* onPostUpdateDom=function(editor)
|
|
|
|
How the associated UI components are located:
|
|
|
|
1. If toolbar option true:
|
|
|
|
* looks for a preceeding div.mdd_toolbar and load toolbar into it
|
|
* if can't find the div, creates it
|
|
* it's better to include the div in your markup as it prevents jumping on page load
|
|
|
|
2. If resizerbar option is true:
|
|
|
|
* looks for a div.mdd_resizer bar immediately after the text area
|
|
* creates it can't be found
|
|
* it's better to include the div in your markup as it prevents jumping on page load
|
|
|
|
3. Looks for, or creates a div to show the HTML preview in:
|
|
|
|
* looks for an attribute on the text area 'data-mdd-preview'. If found, uses it
|
|
as a jQuery selector to locate a the preview div.
|
|
* if data attribute not found, uses '.mdd_preview' - ie: looks for any class with
|
|
mdd_preview class
|
|
* if no preview div found by the above selector, creates one immediately after the
|
|
resize bar
|
|
|
|
4. Applies the passed options to both the MarkdownDeep text transform object and the Markdown
|
|
editor so the one options array can be used to set any supported option
|
|
|
|
*/
|
|
|
|
|
|
(function($){
|
|
|
|
$.fn.MarkdownDeep = function( options ) {
|
|
|
|
// Default settings
|
|
var settings=
|
|
{
|
|
resizebar: true,
|
|
toolbar: true,
|
|
help_location: 'mdd_help.html'
|
|
};
|
|
|
|
// Apply options
|
|
if (options)
|
|
{
|
|
$.extend(settings, options);
|
|
}
|
|
|
|
// Create each markdown editor
|
|
return this.each(function() {
|
|
|
|
// Create the toolbar
|
|
if (settings.toolbar)
|
|
{
|
|
var toolbar=$(this).prev(".mdd_toolbar");
|
|
if (toolbar.length==0)
|
|
{
|
|
toolbar=$("<div class=\"mdd_toolbar\">" + MarkdownDeepEditorUI.ToolbarHtml() + "</div>");
|
|
toolbar.insertBefore(this);
|
|
}
|
|
else
|
|
{
|
|
toolbar.append($(MarkdownDeepEditorUI.ToolbarHtml()));
|
|
}
|
|
$("a.mdd_button", toolbar).click(MarkdownDeepEditorUI.onToolbarButton);
|
|
$("a.mdd_help", toolbar).click(MarkdownDeepEditorUI.onShowHelpPopup);
|
|
|
|
if (!MarkdownDeepEditorUI.HelpHtmlWritten)
|
|
{
|
|
var help=$(MarkdownDeepEditorUI.HelpHtml(settings.help_location));
|
|
help.appendTo($("body"));
|
|
$("#mdd_close_help").click(MarkdownDeepEditorUI.onCloseHelpPopup);
|
|
MarkdownDeepEditorUI.HelpHtmlWritten=true;
|
|
}
|
|
}
|
|
|
|
// Create the resize bar
|
|
var resizer;
|
|
if (settings.resizebar)
|
|
{
|
|
resizer=$(this).next(".mdd_resizer");
|
|
if (resizer.length==0)
|
|
{
|
|
resizer=$("<div class=\"mdd_resizer\"></div>");
|
|
resizer.insertAfter(this);
|
|
}
|
|
resizer.bind("mousedown", MarkdownDeepEditorUI.onResizerMouseDown);
|
|
}
|
|
|
|
// Work out the preview div, by:
|
|
// 1. Look for a selector as a data attribute on the textarea
|
|
// 2. If not present, assume <div class="mdd_preview">
|
|
// 3. If not found, append a div with that class
|
|
var preview_selector=$(this).attr("data-mdd-preview");
|
|
if (!preview_selector)
|
|
preview_selector=".mdd_preview";
|
|
var preview=$(preview_selector)[0];
|
|
if (!preview)
|
|
{
|
|
$("<div class=\"mdd_preview\"></div>").insertAfter(resizer ? resizer : this);
|
|
preview=$(".mdd_preview")[0];
|
|
}
|
|
|
|
// Create the editor helper
|
|
var editor=new MarkdownDeepEditor.Editor(this, preview);
|
|
|
|
// Apply options to both the markdown component and the editor
|
|
// (Yes lazy but easier for client)
|
|
if (options)
|
|
{
|
|
jQuery.extend(editor.Markdown, options);
|
|
jQuery.extend(editor, options);
|
|
}
|
|
|
|
// Notify editor that options have changed
|
|
editor.onOptionsChanged();
|
|
|
|
// Attach the editor to the text area in case we want to get it back
|
|
$(this).data("mdd", editor);
|
|
|
|
|
|
});
|
|
};
|
|
})( jQuery ); |