2011-10-28 22:15:21 -05:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2015-04-08 06:34:51 -05:00
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
< meta charset = "UTF-8" >
2023-01-22 19:35:12 -05:00
< title > Squire Editor Demo< / title >
2015-04-08 06:34:51 -05:00
< style type = "text/css" media = "screen" >
body {
2011-10-28 22:15:21 -05:00
position: relative;
margin: 0 auto;
padding: 50px;
width: 540px;
font: 400 14px/1.24 helvetica, arial, sans-serif;
text-shadow: 0 1px 0 white;
}
h1 {
font-size: 1.95em;
}
2015-04-08 06:34:51 -05:00
span {
cursor: pointer;
text-decoration: underline;
}
p {
margin: 5px 0;
}
2016-03-22 01:57:00 -05:00
#editor {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 200px;
2015-04-08 06:34:51 -05:00
border: 1px solid #888;
2016-03-22 01:57:00 -05:00
padding: 1em;
background: transparent;
color: #2b2b2b;
font: 13px/1.35 Helvetica, arial, sans-serif;
cursor: text;
}
a {
text-decoration: underline;
}
h2 {
font-size: 123.1%;
}
h3 {
font-size: 108%;
}
h1,h2,h3,p {
margin: 1em 0;
}
h4,h5,h6 {
margin: 0;
}
ul, ol {
margin: 0 1em;
padding: 0 1em;
}
blockquote {
border-left: 2px solid blue;
margin: 0;
padding: 0 10px;
2015-04-08 06:34:51 -05:00
}
2018-07-26 19:29:49 -05:00
pre {
white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;border-radius: 3px;border: 1px solid #ccc; padding: 7px 10px; background: #f6f6f6; font-family: menlo, consolas, monospace; font-size: 90%; }
code {
border-radius: 3px;
border: 1px solid #ccc;
padding: 1px 3px;
background: #f6f6f6;
font-family: menlo, consolas, monospace;
font-size: 90%;
}
2015-04-08 06:34:51 -05:00
< / style >
2011-10-28 22:15:21 -05:00
< / head >
< body >
2023-01-22 19:35:12 -05:00
< h1 > Squire Editor Demo< / h1 >
2011-10-28 22:15:21 -05:00
< header >
2023-03-19 05:20:03 -05:00
< p > Squire is a rich text editor primarily built for email apps. It’ < a href = "https://github.com/fastmail/squire" > Learn more and see the source on GitHub< / a > .< / p >
2011-10-28 22:15:21 -05:00
< p >
< span id = "bold" > Bold< / span >
< span id = "removeBold" > Unbold< / span >
< span id = "italic" > Italic< / span >
< span id = "removeItalic" > Unitalic< / span >
< span id = "underline" > Underline< / span >
< span id = "removeUnderline" > Deunderline< / span >
2015-06-17 03:37:07 -05:00
< span id = "removeAllFormatting" > Remove formatting< / span >
2011-10-28 22:15:21 -05:00
< span id = "setFontSize" class = "prompt" > Font size< / span >
< span id = "setFontFace" class = "prompt" > Font face< / span >
< / p >
2011-11-17 03:04:56 -05:00
< p >
2023-01-22 19:35:12 -05:00
< span id = "setTextColor" class = "prompt" > Text color< / span >
< span id = "setHighlightColor" class = "prompt" > Text highlight< / span >
2012-01-24 19:47:26 -05:00
< span id = "makeLink" class = "prompt" > Link< / span >
2011-11-17 03:04:56 -05:00
< / p >
2011-10-28 22:15:21 -05:00
< p >
2012-07-01 21:41:38 -05:00
< span id = "increaseQuoteLevel" > Quote< / span >
< span id = "decreaseQuoteLevel" > Dequote< / span >
2011-10-28 22:15:21 -05:00
2012-07-01 21:41:38 -05:00
< span id = "makeUnorderedList" > List< / span >
< span id = "removeList" > Unlist< / span >
2014-12-11 07:35:48 -05:00
< span id = "increaseListLevel" > Increase list level< / span >
< span id = "decreaseListLevel" > Decrease list level< / span >
2018-07-26 19:29:49 -05:00
< span id = "code" > Code< / span >
< span id = "removeCode" > Uncode< / span >
2011-10-28 22:15:21 -05:00
< span id = "insertImage" class = "prompt" > Insert image< / span >
2011-11-13 23:18:05 -05:00
< span id = "setHTML" class = "prompt" > Set HTML< / span >
2011-10-28 22:15:21 -05:00
2012-07-01 21:41:38 -05:00
< span id = "undo" > Undo< / span >
< span id = "redo" > Redo< / span >
2011-10-28 22:15:21 -05:00
< / p >
< / header >
2016-03-22 01:57:00 -05:00
< div id = "editor" > < / div >
2023-01-22 19:35:12 -05:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.3/purify.min.js" integrity = "sha512-3dcbndbDLLWfKWevQu8C/1qVRcxx6h+eRDSnn3/pcBZHISRJgsj3u71U/Ad6nQVHrEi05hOSr6Hnb/p0pWc94w==" crossorigin = "anonymous" referrerpolicy = "no-referrer" > < / script >
< script type = "text/javascript" src = "dist/squire-raw.js" > < / script >
< script type = "module" charset = "utf-8" >
2016-03-22 01:57:00 -05:00
var div = document.getElementById( 'editor' );
var editor = new Squire( div, {
2023-01-22 19:35:12 -05:00
blockTag: 'div',
2016-03-22 01:57:00 -05:00
blockAttributes: {'class': 'paragraph'},
tagAttributes: {
ul: {'class': 'UL'},
ol: {'class': 'OL'},
2016-05-04 20:50:36 -05:00
li: {'class': 'listItem'},
2018-07-26 19:29:49 -05:00
a: {'target': '_blank'},
pre: {
style: 'border-radius:3px;border:1px solid #ccc;padding:7px 10px;background:#f6f6f6;font-family:menlo,consolas,monospace;font-size:90%;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;'
},
code: {
style: 'border-radius:3px;border:1px solid #ccc;padding:1px 3px;background:#f6f6f6;font-family:menlo,consolas,monospace;font-size:90%;'
},
2016-03-22 01:57:00 -05:00
}
});
2015-04-08 06:34:51 -05:00
2023-03-19 05:20:03 -05:00
editor.addEventListener('pasteImage', function(event) {
const items = [...event.detail.clipboardData.items];
const imageItems = items.filter((item) => /image/.test(item.type));
if (!imageItems.length) {
return false;
}
let reader = new FileReader();
reader.onload = (loadEvent) => {
this.insertImage(loadEvent.target.result);
}
reader.readAsDataURL(imageItems[0].getAsFile());
});
2015-04-08 06:34:51 -05:00
document.addEventListener( 'click', function ( e ) {
var id = e.target.id,
value;
if ( id & & editor & & editor[ id ] ) {
if ( e.target.className === 'prompt' ) {
value = prompt( 'Value:' );
}
editor[ id ]( value );
}
}, false );
< / script >
2011-10-28 22:15:21 -05:00
< / body >
< / html >
