261 lines
13 KiB
HTML
261 lines
13 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" /><title>Mergely Manual</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
<meta name="description" content="Merge and Diff your documents with diff online and share" />
|
|
<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence" />
|
|
<meta name="author" content="Jamie Peabody" />
|
|
<link rel="shortcut icon" href="http://www.mergely.com/favicon.ico" />
|
|
<link rel="canonical" href="http://www.mergely.com" />
|
|
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
|
|
|
<style type="text/css">
|
|
body { font-family: Droid Sans, Arial, sans-serif; }
|
|
pre.code { border: 1px solid #37AFFF; background-color: #fafafa; padding: 12px; }
|
|
dt { color: #3FA6EA; font-weight: bold; }
|
|
dd { margin-bottom: 1em; }
|
|
h1 { margin-top: 0px; font-size: 2.4em; display: inline-block;}
|
|
#logo { display: inline-block; width: 110px; height: 110px; background: transparent url(http://www.mergely.com/images/mergely_lg.png) no-repeat 0 center; }
|
|
.code { border-radius: 8px; }
|
|
span.code { font-family: "courier new", courier, fixed }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="main">
|
|
|
|
<div id="body">
|
|
<div id="bodycontent" style="margin-right:0px;">
|
|
<a id="logo" title="Back to Mergely" href="http://www.mergely.com"><div id="logo"></div></a>
|
|
<!--START-->
|
|
<h1>Mergely Reference Manual</h1>
|
|
|
|
<h2>Overview</h2>
|
|
<p>
|
|
The core of mergely is a javascript-based Longest Common Subsequence diff algorithm (LCS)
|
|
and customizable markup engine. Mergely provides a rich API that enables integration into
|
|
your own application. It can be used as a diff tool (read-only) or as both a diff and merge
|
|
tool for plain text, CSS, HTML, XML, javascript, PHP, C, C++, etc.
|
|
</p>
|
|
|
|
<h2>Basic Usage</h2>
|
|
<p>
|
|
Mergely requires <a href="http://jquery.com">jQuery</a> and <a target="_blank" href="http://codemirror.net">CodeMirror</a>.
|
|
A supported implementation of CodeMirror is provided in the <a href="http://www.mergely.com/download">Mergely download</a>.
|
|
</p>
|
|
<p>
|
|
To use Mergely, you need to first load the required javascript and css files:
|
|
</p>
|
|
<pre class="code">
|
|
<script type="text/javascript"
|
|
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../lib/codemirror.min.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="../lib/codemirror.css" />
|
|
|
|
<script type="text/javascript" src="../lib/mergely.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="../lib/mergely.css" />
|
|
</pre>
|
|
<p>
|
|
Then, create a div for the editor:
|
|
</p>
|
|
<pre class="code"><div id="compare"></div></pre>
|
|
<p>
|
|
Then, initialize the 'compare' div with the mergely jquery plugin, setting
|
|
options as required:
|
|
</p>
|
|
<pre class="code">
|
|
$(document).ready(function () {
|
|
$('#compare').mergely({
|
|
cmsettings: { readOnly: false, lineNumbers: true },
|
|
lhs: function(setValue) {
|
|
setValue('the quick red fox\njumped over the hairy dog');
|
|
},
|
|
rhs: function(setValue) {
|
|
setValue('the quick brown fox\njumped over the lazy dog');
|
|
}
|
|
});
|
|
});
|
|
</pre>
|
|
|
|
<h2>Options</h2>
|
|
<p>
|
|
The following options are available on initialization:
|
|
</p>
|
|
<dl>
|
|
<dt id="autoresize">autoresize</dt>
|
|
<dd>Enables/disables the auto-resizing of the editor. Defaults to <span class="code">true</span>.</dd>
|
|
<dt id="autoupdate">autoupdate</dt>
|
|
<dd>Enables/disables the auto-updating of the editor when changes are made. Defaults to <span class="code">true</span></dd>
|
|
<dt id="bgcolor">bgcolor</dt>
|
|
<dd>The background color that mergely fills the margin canvas with. Defaults to <span class="code">'#eeeeee'<span></dd>
|
|
<dt id="change_timeout">change_timeout</dt>
|
|
<dd>The timeout, after a text change, before Mergely calcualtes a diff. Only used when readonly enabled. Defaults to <span class="code">500</span>.</dd>
|
|
<dt id="cmsettings">cmsettings</dt>
|
|
<dd>CodeMirror settings (see <a target="_blank" href="http://codemirror.net/doc/manual.html#option_value">CodeMirror</a>). Defaults to <span class="code">{mode: 'application/xml', readOnly: false, lineWrapping: false, lineNumbers: true}</span>.</dd>
|
|
<dt id="editor_width">editor_width</dt>
|
|
<dd>Starting width. Defaults to <span class="code">'400px'</span>.</dd>
|
|
<dt id="editor_height">editor_height</dt>
|
|
<dd>Starting height. Defaults to <span class="code">'400px'</span>.</dd>
|
|
<dt id="fadein">fadein</dt>
|
|
<dd>A jQuery fade-in value to enable the editor to fade in. Set to empty string to disable. Defaults to <span class="code">'fast'<span></dd>
|
|
<dt id="fgcolor">fgcolor</dt>
|
|
<dd>
|
|
The foreground color that mergely marks changes with on the canvas. Defaults to <span class="code">{a:'#4ba3fa',c:'#cccccc',d:'#ff7f7f'}</span>.
|
|
The '<span class="code">a</span>' option is the color for additions, the '<span class="code">c</span>' option is the color for
|
|
changes, and the '<span class="code">d</span>' option is the color for deletions.
|
|
</dd>
|
|
<dt id="ignorews">ignorews</dt>
|
|
<dd>Ignore white-space. Defaults to <span class="code">false</span>.</dd>
|
|
<dt id="lcs">lcs</dt>
|
|
<dd>Enables/disables LCS computation for paragraphs (word-by-word changes). Disabling can give a performance gain for large documents. Defaults to <span class="code">true</span>.</dd>
|
|
<dt id="line_numbers">line_numbers</dt>
|
|
<dd>Enables/disables line numbers. Enabling line numbers will toggle the visibility of the line number margins. Defaults to <span class="code">true</span>.</dd>
|
|
<dt id="resize_timeout">resize_timeout</dt>
|
|
<dd>The timeout, after a resize, before Mergely auto-resizes. Only used when autoresize enabled. Defaults to <span class="code">500</span>.</dd>
|
|
<dt id="rhs_margin">rhs_margin</dt>
|
|
<dd>Location for the rhs markup margin is either right or left. Defaults to <span class="code">right</span>.</dd>
|
|
<dt id="sidebar">sidebar</dt>
|
|
<dd>Enables/disables sidebar markers. Disabling can give a performance gain for large documents. Defaults to <span class="code">true</span>.</dd>
|
|
<dt id="vwcolor">vwcolor</dt>
|
|
<dd>The margin/viewport indicator color. Defaults to <span class="code">'rgba(0, 0, 200, 0.5)'<span></dd>
|
|
<dt id="viewport">viewport</dt>
|
|
<dd>Enables/disables the viewport. Enabling the viewport can give a performance gain for large documents. Defaults to <span class="code">false</span>.</dd>
|
|
<dt id="wrap_lines">wrap_lines</dt>
|
|
<dd>Enables/disables line wrapping. Enabling wrapping will wrap text to fit the editors. Defaults to <span class="code">false</span>.</dd>
|
|
</dl>
|
|
|
|
<h2>Callbacks</h2>
|
|
<p>
|
|
The following callbacks are available on initialization:
|
|
<p>
|
|
<dl>
|
|
<dt>lhs(setValue)</dt>
|
|
<dd>Allows the opportunity to set the value of the left-hand editor on initialization. A handle to a <span class="code">setValue</span> function is passed as an argument.</dd>
|
|
<dt>rhs(setValue)</dt>
|
|
<dd>Allows the opportunity to set the value of the right-hand editor on initialization. A handle to a <span class="code">setValue</span> function is passed as an argument.</dd>
|
|
<dt>height(h)</dt>
|
|
<dd>Allows the opportunity to adjust the height when then the editor is resized. Return the adjusted height.</dd>
|
|
<dt>width(w)</dt>
|
|
<dd>Allows the opportunity to adjust the width when the editor is resized. Return the adjusted width.</dd>
|
|
<dt>loaded()</dt>
|
|
<dd>A callback to indicate that Mergely has finished initializing and is loaded.</dd>
|
|
<dt>resized()</dt>
|
|
<dd>A callback to indicate that Mergely has been resized.</dd>
|
|
</dl>
|
|
|
|
<h2>Methods</h2>
|
|
<p>
|
|
The following methods are available after initialization:
|
|
<p>
|
|
<dl>
|
|
<dt id="mergely-clear">$(selector).mergely('clear', side)</dt>
|
|
<dd>Clears the editor contents.</dd>
|
|
|
|
<dt id="mergely-cm">$(selector).mergely('cm', side)</dt>
|
|
<dd>Gets the CodeMirror editor from <span class="code">side</span>.</dd>
|
|
|
|
<dt id="mergely-diff">$(selector).mergely('diff')</dt>
|
|
<dd>Returns the current .diff file.</dd>
|
|
|
|
<dt id="mergely-get">$(selector).mergely('get', side)</dt>
|
|
<dd>Gets the editor contents.</dd>
|
|
|
|
<dt id="mergely-lhs">$(selector).mergely('lhs', value)</dt>
|
|
<dd>Set the value of the left-hand editor. Best used with ajax.</dd>
|
|
|
|
<dt id="mergely-merge">$(selector).mergely('merge', side)</dt>
|
|
<dd>Merges whole file from <span class="code">side</span> to the opposite side.</dd>
|
|
|
|
<dt id="mergely-mergeCurrentChange">$(selector).mergely('mergeCurrentChange', side)</dt>
|
|
<dd>Merges current cahnge from <span class="code">side</span> to the opposite side.</dd>
|
|
|
|
<dt id="mergely-set-options">$(selector).mergely('options', options)</dt>
|
|
<dd>Sets the editor options. After setting, call "update".</dd>
|
|
|
|
<dt id="mergely-get-options">$(selector).mergely('options')</dt>
|
|
<dd>Gets the current editor options.</dd>
|
|
|
|
<dt id="mergely-resize">$(selector).mergely('resize')</dt>
|
|
<dd>Resize the editor.</dd>
|
|
|
|
<dt id="mergely-rhs">$(selector).mergely('rhs', value)</dt>
|
|
<dd>Set the value of the right-hand editor. Best used with ajax.</dd>
|
|
|
|
<dt id="mergely-scrollTo">$(selector).mergely('scrollTo', side, num)</dt>
|
|
<dd>Scrolls the <span class="code">side</span> to line number <span class="code">num</span>.</dd>
|
|
|
|
<dt id="mergely-scrollToDiff">$(selector).mergely('scrollToDiff', direction)</dt>
|
|
<dd>Scrolls to the next change specified by <span class="code">direction</span>, where <span class="code">direction</span> is either <span class="code">prev</span> or <span class="code">next</span>.</dd>
|
|
|
|
<dt id="mergely-search">$(selector).mergely('search', side, text)</dt>
|
|
<dd>Search the editor for <span class="code">text</span>. Repeating the call will find the next available token.</dd>
|
|
|
|
<dt id="mergely-swap">$(selector).mergely('swap')</dt>
|
|
<dd>Swap the content of the left and right editors.</dd>
|
|
|
|
<dt id="mergely-unmarkup">$(selector).mergely('unmarkup')</dt>
|
|
<dd>Clears the editor markup.</dd>
|
|
|
|
<dt id="mergely-update">$(selector).mergely('update')</dt>
|
|
<dd>Manual update; recalculates diff and applies new settings.</dd>
|
|
</dl>
|
|
|
|
<h2>Styles</h2>
|
|
<p>
|
|
The following styles will allow you to brand your own editor:
|
|
</p>
|
|
<dl>
|
|
<dt>.mergely-column</dt>
|
|
<dd>The editors.</dd>
|
|
<dt>.mergely-active</dt>
|
|
<dd>The active editor.</dd>
|
|
<dt>.mergely-canvas</dt>
|
|
<dd>The mergely canvas elements</dd>
|
|
|
|
<dt>mergely.a.rhs</dt>
|
|
<dd>Styles an addition to the right-hand side, regardless of starting or ending lines</dd>
|
|
<dt>mergely.a.rhs.start</dt>
|
|
<dd>Styles the starting line of an addition to the right-hand side</dd>
|
|
<dt>mergely.a.rhs.end</dt>
|
|
<dd>Styles the ending line of an addition to the right-hand side</dd>
|
|
<dt>mergely.a.rhs.start.end</dt>
|
|
<dd>Styles the start and ending line of an addition to the right-hand side when the start and end are the same line</dd>
|
|
|
|
<dt>mergely.d.lhs</dt>
|
|
<dd>Styles a deletion from the left-hand side, regardless of starting or ending lines</dd>
|
|
<dt>mergely.d.lhs.start</dt>
|
|
<dd>Styles the starting line of a deletion from the left-hand side</dd>
|
|
<dt>mergely.d.lhs.end</dt>
|
|
<dd>Styles the ending line of a deletion from the left-hand side</dd>
|
|
<dt>mergely.d.lhs.start.end</dt>
|
|
<dd>Styles the start and ending line of a deletion from the left-hand side when the start and end are the same line</dd>
|
|
|
|
<dt>mergely.c.lhs</dt>
|
|
<dd>Styles a change to the left-hand side, regardless of starting or ending lines</dd>
|
|
<dt>mergely.c.lhs.start</dt>
|
|
<dd>Styles the starting line of a change to the left-hand side</dd>
|
|
<dt>mergely.c.lhs.end</dt>
|
|
<dd>Styles the starting line of a change to the left-hand side</dd>
|
|
|
|
<dt>mergely.c.rhs</dt>
|
|
<dd>Styles a change to the right-hand side, regardless of starting or ending lines</dd>
|
|
<dt>mergely.c.rhs.start</dt>
|
|
<dd>Styles the starting line of a change to the right-hand side</dd>
|
|
<dt>mergely.c.rhs.end</dt>
|
|
<dd>Styles the starting line of a change to the right-hand side</dd>
|
|
|
|
<dt>mergely.ch.a.rhs</dt>
|
|
<dd>Styles the text of a change to the right-hand side</dd>
|
|
<dt>mergely.ch.a.lhs</dt>
|
|
<dd>Styles the text of a change to the right-hand side</dd>
|
|
</dl>
|
|
<!--END-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|