Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 15:23:29 -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>
$(document).ready(function () {
UI = new SquireUI({replace: 'textarea#foo'});
UI = new SquireUI({replace: 'textarea#foo', height: 200});
});
</script>
</head>

2
ui/Squire-UI.html
View file

@ -8,7 +8,7 @@
</div>
</div>
<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 id="insertImage" data-action="insertImage" data-value="" class="item">
<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 div = document.createElement('div');
div.className = 'Squire-UI';
$(div).load(buildPath + 'Squire-UI.html', function() {
iframe.height = options.height;
function createDrop(element, content) {
element.drop = new Drop({
target: element,
content: content,
$(div).load(buildPath + 'Squire-UI.html', function() {
this.linkDrop = new Drop({
target: $('#makeLink').first()[0],
content: $('#drop-link').html(),
position: 'bottom center',
openOn: 'click'
});
element.drop.iframe = iframe;
element.drop.on('open', function () {
this.linkDrop.on('open', function () {
$('.quit').click(function () {
$(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;
$('.submitLink').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());
createDrop($('#insertImage').first()[0], $('#drop-image').first().html());
createDrop($('#selectFont').first()[0], $('#drop-font').first().html());
this.imageDrop = new Drop({
target: $('#insertImage').first()[0],
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() {
var iframe = $(this).parents('.Squire-UI').next('iframe').first()[0];
@ -114,14 +120,8 @@ $(document).ready(function() {
$(container).append(div);
$(container).append(iframe);
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.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;