Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2025-01-08 16:00:06 -05:00
Code Issues Activity

Links now work. Images are doing some weird stuff

Browse source
This commit is contained in:
Matthew Borden 2014-07-10 12:01:00 +10:00
parent fa6868e4af
commit db6ef4a630
3 changed files with 40 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Demo.html
View file

@ -11,7 +11,7 @@
<script src="build/Squire-UI.js" type="text/javascript"></script> <script src="build/Squire-UI.js" type="text/javascript"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
UI = new SquireUI({replace: 'textarea#foo'}); UI = new SquireUI({replace: 'textarea#foo', height: 200});
}); });
</script> </script>
</head> </head>

2
ui/Squire-UI.html
View file

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="group"> <div class="group">
<div id="makeLink"data-action="makeLink" data-value=""class="item"><i class="fa fa-link"></i></div> <div id="makeLink" data-action="makeLink" data-value=""class="item"><i class="fa fa-link"></i></div>
<div data-action="makeOrderedList" data-value="" class="item"><i class="fa fa-list"></i></div> <div data-action="makeOrderedList" data-value="" class="item"><i class="fa fa-list"></i></div>
<div id="insertImage" data-action="insertImage" data-value="" class="item"> <div id="insertImage" data-action="insertImage" data-value="" class="item">
<i class="fa fa-picture-o"></i> <i class="fa fa-picture-o"></i>

56
ui/Squire-UI.js
View file

@ -31,44 +31,50 @@ $(document).ready(function() {
var iframe = document.createElement('iframe'); var iframe = document.createElement('iframe');
var div = document.createElement('div'); var div = document.createElement('div');
div.className = 'Squire-UI'; div.className = 'Squire-UI';
$(div).load(buildPath + 'Squire-UI.html', function() { iframe.height = options.height;
function createDrop(element, content) {
element.drop = new Drop({ $(div).load(buildPath + 'Squire-UI.html', function() {
target: element, this.linkDrop = new Drop({
content: content, target: $('#makeLink').first()[0],
content: $('#drop-link').html(),
position: 'bottom center', position: 'bottom center',
openOn: 'click' openOn: 'click'
}); });
element.drop.iframe = iframe; this.linkDrop.on('open', function () {
element.drop.on('open', function () {
$('.quit').click(function () { $('.quit').click(function () {
$(this).parent().parent().removeClass('drop-open'); $(this).parent().parent().removeClass('drop-open');
}); });
_iframe = this.iframe;
$('.sumbitImageURL').click(function () { $('.submitLink').click(function () {
editor = _iframe.contentWindow.editor; editor = iframe.contentWindow.editor;
url = $(this).parent().children('#imageUrl').first()[0];
editor.insertImage(url.value);
$(this).parent().parent().removeClass('drop-open');
});
$('.sumbitLink').click(function () {
editor = _iframe.contentWindow.editor;
url = $(this).parent().children('#url').first()[0]; url = $(this).parent().children('#url').first()[0];
editor.makeLink(url.value); editor.makeLink(url.value);
$(this).parent().parent().removeClass('drop-open'); $(this).parent().parent().removeClass('drop-open');
}); });
}); });
}
createDrop($('#makeLink').first()[0], $('#drop-link').first().html()); this.imageDrop = new Drop({
createDrop($('#insertImage').first()[0], $('#drop-image').first().html()); target: $('#insertImage').first()[0],
createDrop($('#selectFont').first()[0], $('#drop-font').first().html()); content: $('#drop-image').html(),
position: 'bottom center',
openOn: 'click'
});
this.imageDrop.on('open', function () {
$('.quit').click(function () {
$(this).parent().parent().removeClass('drop-open');
});
$('.sumbitImageURL').click(function () {
editor = iframe.contentWindow.editor;
url = $(this).parent().children('#imageUrl').first()[0];
editor.insertImage(url.value);
$(this).parent().parent().removeClass('drop-open');
console.log(editor);
});
});
$('.item').click(function() { $('.item').click(function() {
var iframe = $(this).parents('.Squire-UI').next('iframe').first()[0]; var iframe = $(this).parents('.Squire-UI').next('iframe').first()[0];
@ -114,14 +120,8 @@ $(document).ready(function() {
$(container).append(div); $(container).append(div);
$(container).append(iframe); $(container).append(iframe);
iframe.contentWindow.editor = new Squire(iframe.contentWindow.document); iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
iframe.contentWindow.editor.setHTML(
"<div><b>Bold</b><br></div><div><i>Italics</i><br></div><div><u>Underline</u><br></div><ol><li><div>List<br></div></li><li><div>List<br></div></li><li><div>List<br></div></li></ol><blockquote>Quote<br></blockquote><div><br></div><div>Heading 1<br></div><div>Heading 2<br></div><div>Image<br></div><div>Link</div><div><br></div>"
);
iframe.addEventListener('load', function() { iframe.addEventListener('load', function() {
iframe.contentWindow.editor = new Squire(iframe.contentWindow.document); iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
iframe.contentWindow.editor.setHTML(
"<div><b>Bold</b><br></div><div><i>Italics</i><br></div><div><u>Underline</u><br></div><ol><li><div>List<br></div></li><li><div>List<br></div></li><li><div>List<br></div></li></ol><blockquote>Quote<br></blockquote><div><br></div><div>Heading 1<br></div><div>Heading 2<br></div><div>Image<br></div><div>Link</div><div><br></div>"
);
}); });
return iframe.contentWindow.editor; return iframe.contentWindow.editor;