Initial commit.
This commit is contained in:
Burak Kaan Köse
278
Wino.Mail/JS/Quill/Editor/full.html
Normal file
278
Wino.Mail/JS/Quill/Editor/full.html
Normal file
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="language" content="english">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="https://app.example/katex.min.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://app.example/monokai-sublime.min.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://app.example/quill.snow.css" />
|
||||
|
||||
<style>
|
||||
body >
|
||||
/* #standalone-container {
|
||||
margin: 50px auto;
|
||||
height: 100%;
|
||||
|
||||
} */
|
||||
|
||||
#editor-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#wino-original-message-container {
|
||||
border: solid #636e72;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body bgcolor="white">
|
||||
<div id="standalone-container">
|
||||
<!-- remove display none to enable toolbar -->
|
||||
<div id="toolbar-container" style="display: none;">
|
||||
<span class="ql-formats">
|
||||
<!-- <button id="ql-font-monospace" class="ql-font" value="monospace" />
|
||||
<button id="ql-font-serif" class="ql-font" value="serif" />
|
||||
<button id="ql-font-sans-serif" class="ql-font" /> -->
|
||||
<select class="ql-font"></select>
|
||||
<select class="ql-size"></select>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button id="boldButton" class="ql-bold"></button>
|
||||
<button id="italicButton" class="ql-italic"></button>
|
||||
<button id="underlineButton" class="ql-underline"></button>
|
||||
<button id="strikeButton" class="ql-strike"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<select class="ql-color"></select>
|
||||
<select class="ql-background"></select>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-script" value="sub"></button>
|
||||
<button class="ql-script" value="super"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-header" value="1"></button>
|
||||
<button class="ql-header" value="2"></button>
|
||||
<button class="ql-blockquote"></button>
|
||||
<button class="ql-code-block"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button id="orderedListButton" class="ql-list" value="ordered"></button>
|
||||
<button id="bulletListButton" class="ql-list" value="bullet"></button>
|
||||
<button id="decreaseIndentButton" class="ql-indent" value="-1"></button>
|
||||
<button id="increaseIndentButton" class="ql-indent" value="+1"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button id="directionButton" class="ql-direction" value="rtl"></button>
|
||||
<button id="ql-align-left" class="ql-align" value=""></button>
|
||||
<button id="ql-align-center" class="ql-align" value="center"></button>
|
||||
<button id="ql-align-right" class="ql-align" value="right"></button>
|
||||
<button id="ql-align-justify" class="ql-align" value="justify"></button>
|
||||
<!--<select id="alignmentButton" class="ql-align"></select>-->
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-link"></button>
|
||||
<button id=addImageButton class="ql-image"></button>
|
||||
<button class="ql-video"></button>
|
||||
<button class="ql-formula"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-clean"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="editor-container" style="background-color: white;">
|
||||
<br><br>Sent from <a href="https://github.com/bkaankose/Wino-Mail/">Wino Mail</a> for Windows
|
||||
</div>
|
||||
|
||||
<!-- <div id="mail-container-parent" hidden="true" style="border: solid #636e72; padding: 10px; margin-top: 5px; margin-right: 16px; margin-bottom: 5px; margin-left: 5px;">
|
||||
<center>
|
||||
Original message<br>
|
||||
</center>
|
||||
|
||||
<div id="mail-container" style="margin-top: 5px;">
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<script src="https://app.example/katex.min.js"></script>
|
||||
|
||||
<script src="https://app.example/highlight.min.js"></script>
|
||||
|
||||
<!-- <script src="../quill.min.js"></script>
|
||||
<script src="../image-resize.min.js"></script> -->
|
||||
|
||||
<script src="https://app.example/quill.min.js"></script>
|
||||
<script src="https://app.example/image-resize.min.js"></script>
|
||||
|
||||
<script>
|
||||
// configure Quill to use inline styles so the email's format properly
|
||||
var resizer = Quill.import('modules/imageResize');
|
||||
Quill.register(resizer, true);
|
||||
|
||||
var DirectionAttribute = Quill.import('attributors/attribute/direction');
|
||||
Quill.register(DirectionAttribute, true);
|
||||
|
||||
var AlignClass = Quill.import('attributors/class/align');
|
||||
Quill.register(AlignClass, true);
|
||||
|
||||
var BackgroundClass = Quill.import('attributors/class/background');
|
||||
Quill.register(BackgroundClass, true);
|
||||
|
||||
var ColorClass = Quill.import('attributors/class/color');
|
||||
Quill.register(ColorClass, true);
|
||||
|
||||
var DirectionClass = Quill.import('attributors/class/direction');
|
||||
Quill.register(DirectionClass, true);
|
||||
|
||||
var FontClass = Quill.import('attributors/class/font');
|
||||
Quill.register(FontClass, true);
|
||||
|
||||
var SizeClass = Quill.import('attributors/class/size');
|
||||
Quill.register(SizeClass, true);
|
||||
|
||||
var AlignStyle = Quill.import('attributors/style/align');
|
||||
Quill.register(AlignStyle, true);
|
||||
|
||||
var BackgroundStyle = Quill.import('attributors/style/background');
|
||||
Quill.register(BackgroundStyle, true);
|
||||
|
||||
var ColorStyle = Quill.import('attributors/style/color');
|
||||
Quill.register(ColorStyle, true);
|
||||
|
||||
var DirectionStyle = Quill.import('attributors/style/direction');
|
||||
Quill.register(DirectionStyle, true);
|
||||
|
||||
var FontStyle = Quill.import('attributors/style/font');
|
||||
Quill.register(FontStyle, true);
|
||||
|
||||
var SizeStyle = Quill.import('attributors/style/size');
|
||||
Quill.register(SizeStyle, true);
|
||||
|
||||
var quill = new Quill('#editor-container', {
|
||||
modules: {
|
||||
toolbar: '#toolbar-container',
|
||||
imageResize: {}
|
||||
},
|
||||
placeholder: '',
|
||||
theme: 'snow'
|
||||
});
|
||||
|
||||
|
||||
var boldButton = document.getElementById('boldButton');
|
||||
var italicButton = document.getElementById('italicButton');
|
||||
var underlineButton = document.getElementById('underlineButton');
|
||||
var strikeButton = document.getElementById('strikeButton');
|
||||
|
||||
var orderedListButton = document.getElementById('orderedListButton');
|
||||
var bulletListButton = document.getElementById('bulletListButton');
|
||||
|
||||
var directionButton = document.getElementById('directionButton');
|
||||
|
||||
var alignLeftButton = document.getElementById('ql-align-left');
|
||||
var alignCenterButton = document.getElementById('ql-align-center');
|
||||
var alignRightButton = document.getElementById('ql-align-right');
|
||||
var alignJustifyButton = document.getElementById('ql-align-justify');
|
||||
|
||||
// The mutation observer
|
||||
var boldObserver = new MutationObserver(function() { classChanged(boldButton); });
|
||||
boldObserver.observe(boldButton, { attributes: true, attributeFilter: ["class"]});
|
||||
|
||||
var italicObserver = new MutationObserver(function() { classChanged(italicButton); });
|
||||
italicObserver.observe(italicButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var underlineObserver = new MutationObserver(function () { classChanged(underlineButton); });
|
||||
underlineObserver.observe(underlineButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var strikeObserver = new MutationObserver(function () { classChanged(strikeButton); });
|
||||
strikeObserver.observe(strikeButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var orderedListObserver = new MutationObserver(function () { classAndValueChanged(orderedListButton); });
|
||||
orderedListObserver.observe(orderedListButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var bulletListObserver = new MutationObserver(function () { classAndValueChanged(bulletListButton); });
|
||||
bulletListObserver.observe(bulletListButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var directionObserver = new MutationObserver(function () { classChanged(directionButton); });
|
||||
directionObserver.observe(directionButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var alignmentObserver = new MutationObserver(function () { alignmentDataValueChanged(alignLeftButton); });
|
||||
alignmentObserver.observe(alignLeftButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var alignmentObserverCenter = new MutationObserver(function () { alignmentDataValueChanged(alignCenterButton); });
|
||||
alignmentObserverCenter.observe(alignCenterButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var alignmentObserverRight = new MutationObserver(function () { alignmentDataValueChanged(alignRightButton); });
|
||||
alignmentObserverRight.observe(alignRightButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
var alignmentObserverJustify = new MutationObserver(function () { alignmentDataValueChanged(alignJustifyButton); });
|
||||
alignmentObserverJustify.observe(alignJustifyButton, { attributes: true, attributeFilter: ["class"] });
|
||||
|
||||
function classChanged(button) {
|
||||
window.external.notify(`${button.className}`);
|
||||
}
|
||||
|
||||
function classAndValueChanged(button) {
|
||||
window.external.notify(`${button.id} ${button.className}`);
|
||||
}
|
||||
|
||||
function alignmentDataValueChanged(button) {
|
||||
if (button.className.endsWith('ql-active'))
|
||||
window.external.notify(`${button.id}`);
|
||||
}
|
||||
|
||||
function RenderHTML(htmlString) {
|
||||
quill.root.innerHTML = htmlString;
|
||||
// quill.clipboard.dangerouslyPasteHTML(htmlString);
|
||||
// const delta = quill.clipboard.convert(htmlString)
|
||||
|
||||
// quill.setContents(delta, 'silent')
|
||||
|
||||
// document.getElementById('mail-container-parent').hidden = false;
|
||||
// document.getElementById('editor-container').innerHTML = htmlString;
|
||||
}
|
||||
|
||||
// function ShowToolbar() {
|
||||
// document.getElementById('editor-container').style.display = 'block';
|
||||
// quill.focus();
|
||||
// }
|
||||
|
||||
// function HideToolbar() {
|
||||
// document.getElementById('editor-container').style.display = 'none';
|
||||
// }
|
||||
|
||||
function getSelectedText() {
|
||||
var range = quill.getSelection();
|
||||
if (range)
|
||||
{
|
||||
if (range.length == 0)
|
||||
{
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
return quill.getText(range.index, range.length);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addHyperlink(url)
|
||||
{
|
||||
var range = quill.getSelection();
|
||||
|
||||
if (range)
|
||||
{
|
||||
quill.formatText(range.index, range.length, 'link', url);
|
||||
quill.setSelection(0,0);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user