Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 23:40:35 -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>

74
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';
iframe.height = options.height;
$(div).load(buildPath + 'Squire-UI.html', function() { $(div).load(buildPath + 'Squire-UI.html', function() {
this.linkDrop = new Drop({
target: $('#makeLink').first()[0],
content: $('#drop-link').html(),
position: 'bottom center',
openOn: 'click'
});
function createDrop(element, content) { this.linkDrop.on('open', function () {
element.drop = new Drop({ $('.quit').click(function () {
target: element, $(this).parent().parent().removeClass('drop-open');
content: content,
position: 'bottom center',
openOn: 'click'
}); });
element.drop.iframe = iframe; $('.submitLink').click(function () {
editor = iframe.contentWindow.editor;
element.drop.on('open', function () { url = $(this).parent().children('#url').first()[0];
$('.quit').click(function () { editor.makeLink(url.value);
$(this).parent().parent().removeClass('drop-open'); $(this).parent().parent().removeClass('drop-open');
});
_iframe = this.iframe;
$('.sumbitImageURL').click(function () {
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];
editor.makeLink(url.value);
$(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;