yavsc/ZicMoove/ZicMoove.Droid/MarkdownEditor.cshtml

74 lines
2.1 KiB
Plaintext

@model string
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quill.snow.css" />
<style>
.standalone-container {
margin: 0;
width: 100%;
8 years ago
height: 100%;
}
#bubble-container {
8 years ago
width:100%;
height: 100%;
}
#bubble-container div.ql-editor {
margin-top:3em;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="standalone-container">
<div id="bubble-container">@Html.Write(Model)</div>
</div>
8 years ago
<script type="text/javascript" src="quill.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="showdown.js"></script>
<script type="text/javascript" src="to-markdown.js"></script>
<script type="text/javascript" src="md-helpers.js"></script>
<script type="text/javascript">
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
['link', 'image', 'video'],
['clean'] // remove formatting button
];
$(document).ready(function () {
var quill = new Quill('#bubble-container', {
modules: {
toolbar: toolbarOptions
},
placeholder: 'Composez votre texte ...',
theme: 'snow'
});
function getMD() {
return markdownize($('#bubble-container div.ql-editor').html())
}
quill.on('text-change', function (delta, oldDelta, source) {
if (source === "user") {
invokeCSharpAction(getMD());
}
});
// TODO implement a dedicated injection
invokeCSharpAction(getMD());
});
</script>
</body>
</html>