* Adds client resourses for Markdown.js
* Implements a part of the client UI at editing Circle collectionsvnext
parent
17f57d5542
commit
9748c9d7e4
@ -0,0 +1,13 @@
|
|||||||
|
*/bin
|
||||||
|
*/obj
|
||||||
|
plugins/*/bin
|
||||||
|
plugins/*/obj
|
||||||
|
*.userprefs
|
||||||
|
packages
|
||||||
|
web/avatars
|
||||||
|
web/users
|
||||||
|
web/Web References
|
||||||
|
build
|
||||||
|
.nuget
|
||||||
|
.gitignore
|
||||||
|
|
@ -0,0 +1,16 @@
|
|||||||
|
MarkdownDeep License
|
||||||
|
====================
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
|||||||
|
MarkdownDeep Quick Reference
|
||||||
|
============================
|
||||||
|
|
||||||
|
Setting up the Client Side Editor
|
||||||
|
---------------------------------
|
||||||
|
|
||||||
|
The following assumes you've installed the full edition MarkdownDeep using NuGet and explains how to setup
|
||||||
|
a client side editor with toolbar, resize bar, real-time preview and syntax reference help.
|
||||||
|
|
||||||
|
1. In either your master view page, or in the view containing the editor ensure the following references are in place:
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="/Scripts/mdd_styles.css" />
|
||||||
|
<script type="text/javascript" src="/Scripts/jQuery-1.4.1.min.js"></script>
|
||||||
|
<script type="text/javascript" src="/Scripts/MarkdownDeepLib.min.js"></script>
|
||||||
|
|
||||||
|
2. Insert the following markup at the location you want the editor to appear:
|
||||||
|
|
||||||
|
<div class="mdd_toolbar"></div>
|
||||||
|
<%=Html.TextArea("content", new { @class="mdd_editor" }) %>
|
||||||
|
<div class="mdd_resizer"></div>
|
||||||
|
<div class="mdd_preview"></div>
|
||||||
|
|
||||||
|
Note, the mdd_toolbar, mdd_resizer and mdd_preview divs are all optional. If ommitted, the jQuery plugin will
|
||||||
|
create them however this may cause the page to appear to "jump" as it loads. By using the above divs and the
|
||||||
|
associated mdd_styles.css stylesheet, the correct sizing can be in-place immediately, eliminating these jumps.
|
||||||
|
|
||||||
|
3. Use the jQuery plugin to convert the textarea into a Markdown editor. For more options, see below.
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
$("textarea.mdd_editor").MarkdownDeep({
|
||||||
|
help_location:"/Scripts/mdd_help.htm",
|
||||||
|
ExtraMode: true
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
See <http://www.toptensoftware.com/markdowndeep/editor> for more information on configuring the editor.
|
||||||
|
|
||||||
|
Server Side Translation
|
||||||
|
-----------------------
|
||||||
|
|
||||||
|
The above steps allow you to create forms where the user can enter and preview Markdown content. This section
|
||||||
|
explains how to perform the equivalent translation of the entered content server side.
|
||||||
|
|
||||||
|
1. When you installed MarkdownDeep to your project with NuGet, a reference to MarkdownDeep.dll would already have
|
||||||
|
been created.
|
||||||
|
|
||||||
|
2. To translate Markdown, instantiate an instance of the MarkdownDeep class and call it's Translate method to
|
||||||
|
do the translation:
|
||||||
|
|
||||||
|
// Instantiate
|
||||||
|
var md=new MarkdownDeep.Markdown();
|
||||||
|
|
||||||
|
// Set options
|
||||||
|
md.ExtraMode=true;
|
||||||
|
|
||||||
|
// Translate
|
||||||
|
var html=md.Transform(plaintext);
|
||||||
|
|
||||||
|
|
||||||
|
See <http://www.toptensoftware.com/markdowndeep/api> for other methods and properties.
|
Binary file not shown.
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
After Width: | Height: | Size: 150 B |
@ -0,0 +1,166 @@
|
|||||||
|
<h2>Markdown Formatting</h2>
|
||||||
|
<p><a href="http://daringfireball.net/projects/markdown/" target="_blank">Markdown</a> turns plain text formatting into fancy HTML formatting.</p>
|
||||||
|
<h3>Phrase Emphasis</h3>
|
||||||
|
<pre><code>*italic* **bold**
|
||||||
|
_italic_ __bold__
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Links</h3>
|
||||||
|
<p>Inline:</p>
|
||||||
|
<pre><code>An [example](http://url.com/ "Title")
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Reference-style labels (titles are optional):</p>
|
||||||
|
<pre><code>An [example][id]. Then, anywhere
|
||||||
|
else in the doc, define the link:
|
||||||
|
|
||||||
|
[id]: http://example.com/ "Title"
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Images</h3>
|
||||||
|
<p>Inline (titles are optional):</p>
|
||||||
|
<pre><code>![alt text](/path/img.jpg "Title")
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Reference-style:</p>
|
||||||
|
<pre><code>![alt text][id]
|
||||||
|
|
||||||
|
[id]: /url/to/img.jpg "Title"
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Headers</h3>
|
||||||
|
<p>Setext-style:</p>
|
||||||
|
<pre><code>Header 1
|
||||||
|
========
|
||||||
|
|
||||||
|
Header 2
|
||||||
|
--------
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>atx-style (closing #'s are optional):</p>
|
||||||
|
<pre><code># Header 1 #
|
||||||
|
|
||||||
|
## Header 2 ##
|
||||||
|
|
||||||
|
###### Header 6
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Lists</h3>
|
||||||
|
<p>Ordered, without paragraphs:</p>
|
||||||
|
<pre><code>1. Foo
|
||||||
|
2. Bar
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Unordered, with paragraphs:</p>
|
||||||
|
<pre><code>* A list item.
|
||||||
|
|
||||||
|
With multiple paragraphs.
|
||||||
|
|
||||||
|
* Bar
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>You can nest them:</p>
|
||||||
|
<pre><code>* Abacus
|
||||||
|
* answer
|
||||||
|
* Bubbles
|
||||||
|
1. bunk
|
||||||
|
2. bupkis
|
||||||
|
* BELITTLER
|
||||||
|
3. burper
|
||||||
|
* Cunning
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Blockquotes</h3>
|
||||||
|
<pre><code>> Email-style angle brackets
|
||||||
|
> are used for blockquotes.
|
||||||
|
|
||||||
|
> > And, they can be nested.
|
||||||
|
|
||||||
|
> #### Headers in blockquotes
|
||||||
|
>
|
||||||
|
> * You can quote a list.
|
||||||
|
> * Etc.
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Code Spans</h3>
|
||||||
|
<pre><code>`<code>` spans are delimited
|
||||||
|
by backticks.
|
||||||
|
|
||||||
|
You can include literal backticks
|
||||||
|
like `` `this` ``.
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Preformatted Code Blocks</h3>
|
||||||
|
<p>Indent every line of a code block by at least 4 spaces or 1 tab.</p>
|
||||||
|
<pre><code>This is a normal paragraph.
|
||||||
|
|
||||||
|
This is a preformatted
|
||||||
|
code block.
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Horizontal Rules</h3>
|
||||||
|
<p>Three or more dashes or asterisks:</p>
|
||||||
|
<pre><code>---
|
||||||
|
|
||||||
|
* * *
|
||||||
|
|
||||||
|
- - - -
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Manual Line Breaks</h3>
|
||||||
|
<p>End a line with two or more spaces:</p>
|
||||||
|
<pre><code>Roses are red,
|
||||||
|
Violets are blue.
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h2>Extra Mode</h2>
|
||||||
|
|
||||||
|
These formatting features are only available when Extra Mode is enabled.
|
||||||
|
|
||||||
|
<h3>Markdown In Html</h3>
|
||||||
|
<p>Enable markdown in HTML block level elements:</p>
|
||||||
|
<pre><code><div markdown="1">
|
||||||
|
Markdown **still** works.
|
||||||
|
</div>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Fenced Code Blocks</h3>
|
||||||
|
<p>Code blocks delimited by 3 or more tildas:</p>
|
||||||
|
<pre><code>~~~
|
||||||
|
This is a preformatted
|
||||||
|
code block
|
||||||
|
~~~
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Header IDs</h3>
|
||||||
|
<p>Set the id of headings with <code>{#<id>}</code> at end of heading line:</p>
|
||||||
|
<pre><code>## My Heading {#myheading}
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Tables</h3>
|
||||||
|
|
||||||
|
<pre><code>Fruit |Color
|
||||||
|
---------|----------
|
||||||
|
Apples |Red
|
||||||
|
Pears |Green
|
||||||
|
Bananas |Yellow</code></pre>
|
||||||
|
<h3>Definition Lists</h3>
|
||||||
|
<pre><code>Term 1
|
||||||
|
: Definition 1
|
||||||
|
|
||||||
|
Term 2
|
||||||
|
: Definition 2</code></pre>
|
||||||
|
|
||||||
|
<h3>Footnotes</h3>
|
||||||
|
<pre><code>Body text with a footnote [^1]
|
||||||
|
|
||||||
|
[^1]: Footnote text here
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>Abbreviations</h3>
|
||||||
|
<pre><code>MDD <- will have title
|
||||||
|
|
||||||
|
*[MDD]: MarkdownDeep
|
||||||
|
</code></pre>
|
||||||
|
<p> </p>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 173 B |
@ -0,0 +1,211 @@
|
|||||||
|
div.mdd_modal
|
||||||
|
{
|
||||||
|
position:fixed;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
z-index:1000;
|
||||||
|
display:none;
|
||||||
|
font-size:10pt;
|
||||||
|
background-image:url(mdd_modal_background.png);
|
||||||
|
}
|
||||||
|
div.mdd_modal_frame
|
||||||
|
{
|
||||||
|
width:650px;
|
||||||
|
height:400px;
|
||||||
|
background-color:White;
|
||||||
|
z-index:2000;
|
||||||
|
margin:0 auto;
|
||||||
|
margin-top:60px;
|
||||||
|
border:solid 5px #808080;
|
||||||
|
position:relative;
|
||||||
|
border-radius:5px;
|
||||||
|
-moz-border-radius:5px;
|
||||||
|
-webkit-border-radius:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_modal_button
|
||||||
|
{
|
||||||
|
position:absolute;
|
||||||
|
top:-33px;
|
||||||
|
right:-5px;
|
||||||
|
padding-left:10px;
|
||||||
|
padding-right:10px;
|
||||||
|
padding-top:4px;
|
||||||
|
padding-bottom:0px;
|
||||||
|
height:20px;
|
||||||
|
background-color:#808080;
|
||||||
|
z-index:1999;
|
||||||
|
border-radius:4px;
|
||||||
|
-moz-border-radius:4px;
|
||||||
|
-webkit-border-radius:4px;
|
||||||
|
line-height:1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_modal_button a
|
||||||
|
{
|
||||||
|
color:White;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_modal_button a:hover
|
||||||
|
{
|
||||||
|
color:Orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_modal_content
|
||||||
|
{
|
||||||
|
overflow:scroll;
|
||||||
|
overflow-x:hidden;
|
||||||
|
position:relative;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_ajax_loader
|
||||||
|
{
|
||||||
|
background-position: center center;
|
||||||
|
background-image: url(mdd_ajax_loader.gif);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width:100%;
|
||||||
|
height:200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_syntax
|
||||||
|
{
|
||||||
|
font-size:12pt;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_syntax h2
|
||||||
|
{
|
||||||
|
font-size:14pt;
|
||||||
|
}
|
||||||
|
div.mdd_syntax h3
|
||||||
|
{
|
||||||
|
font-size:12pt;
|
||||||
|
}
|
||||||
|
div.mdd_syntax pre
|
||||||
|
{
|
||||||
|
font-size:10pt;
|
||||||
|
border:solid 1px silver;
|
||||||
|
padding:4px;
|
||||||
|
background-color:#f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_toolbar_wrap
|
||||||
|
{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
div.mdd_toolbar
|
||||||
|
{
|
||||||
|
padding:5px;
|
||||||
|
height:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_toolbar ul
|
||||||
|
{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_toolbar li
|
||||||
|
{
|
||||||
|
float:left;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
list-style:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_toolbar a.mdd_button
|
||||||
|
{
|
||||||
|
background-image:url(mdd_toolbar.png);
|
||||||
|
width:20px;
|
||||||
|
height:20px;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.mdd_sep
|
||||||
|
{
|
||||||
|
width:5px;
|
||||||
|
height:20px;
|
||||||
|
display:block;
|
||||||
|
border-left:solid 1px #808080;
|
||||||
|
margin-left:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mdd_bold { background-position:-1px -1px;}
|
||||||
|
#mdd_bold:hover { background-position:-1px -23px; }
|
||||||
|
#mdd_italic { background-position:-23px -1px; }
|
||||||
|
#mdd_italic:hover { background-position:-23px -23px; }
|
||||||
|
#mdd_ullist { background-position:-177px -1px; }
|
||||||
|
#mdd_ullist:hover { background-position:-177px -23px; }
|
||||||
|
#mdd_ollist { background-position:-155px -1px; }
|
||||||
|
#mdd_ollist:hover { background-position:-155px -23px; }
|
||||||
|
#mdd_indent { background-position:-67px -1px; }
|
||||||
|
#mdd_indent:hover { background-position:-67px -23px; }
|
||||||
|
#mdd_outdent { background-position:-89px -1px; }
|
||||||
|
#mdd_outdent:hover { background-position:-89px -23px; }
|
||||||
|
#mdd_link { background-position:-45px -1px; }
|
||||||
|
#mdd_link:hover { background-position:-45px -23px; }
|
||||||
|
#mdd_img { background-position:-133px -1px; }
|
||||||
|
#mdd_img:hover { background-position:-133px -23px; }
|
||||||
|
#mdd_hr { background-position:-221px -1px; }
|
||||||
|
#mdd_hr:hover { background-position:-221px -23px; }
|
||||||
|
#mdd_code { background-position:-111px -1px; }
|
||||||
|
#mdd_code:hover { background-position:-111px -23px; }
|
||||||
|
#mdd_heading { background-position:-199px -1px; }
|
||||||
|
#mdd_heading:hover { background-position:-199px -23px; }
|
||||||
|
#mdd_undo { background-position:-243px -1px; }
|
||||||
|
#mdd_undo:hover { background-position:-243px -23px; }
|
||||||
|
#mdd_redo { background-position:-265px -1px; }
|
||||||
|
#mdd_redo:hover { background-position:-265px -23px; }
|
||||||
|
|
||||||
|
div.mdd_links
|
||||||
|
{
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_links a
|
||||||
|
{
|
||||||
|
text-decoration:none;
|
||||||
|
color:#404040;
|
||||||
|
font-size:smaller;
|
||||||
|
}
|
||||||
|
div.mdd_links a:hover
|
||||||
|
{
|
||||||
|
color:black;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_editor_wrap
|
||||||
|
{
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
textarea.mdd_editor
|
||||||
|
{
|
||||||
|
width:100%;
|
||||||
|
resize:none;
|
||||||
|
margin:0;padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.mdd_resizer_wrap
|
||||||
|
{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
div.mdd_resizer
|
||||||
|
{
|
||||||
|
background:#f8f8f8;
|
||||||
|
background-image:url("mdd_gripper.png");
|
||||||
|
background-position:center center;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
padding-left:2px;
|
||||||
|
padding-right:2px;
|
||||||
|
height:9px;
|
||||||
|
border:solid 1px #d0d0d0;
|
||||||
|
margin-top:-1px;
|
||||||
|
cursor:n-resize;
|
||||||
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 6.9 KiB |
Loading…
Reference in New Issue