mirror of
https://github.com/basecamp/trix.git
synced 2026-06-16 12:04:34 +00:00
Alberto Fernandez-Capel
a9fa5a27fc
So people that were using previous versions of Trix can migrate to this v2 without having to change their code. Running the start on the next tick also gives an opportunity to change the config before any Trix instance has been initialized.
83 lines
2.2 KiB
HTML
83 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Trix</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<meta name="csp-nonce" content="topsecret">
|
|
<link rel="icon" href="data:,">
|
|
<link rel="stylesheet" type="text/css" href="trix.css">
|
|
<style type="text/css">
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
main {
|
|
margin: 20px auto;
|
|
max-width: 700px;
|
|
}
|
|
|
|
#output {
|
|
margin: 1rem 0 0;
|
|
}
|
|
|
|
#output textarea {
|
|
width: 100%;
|
|
height: 6rem;
|
|
resize: vertical;
|
|
font-family: monospace;
|
|
border-radius: 5px;
|
|
border: solid 1px #444;
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
<script type="module" src="trix.esm.js"></script>
|
|
<script type="module" src="inspector.js"></script>
|
|
<script type="module">
|
|
Trix.config.attachments.preview.caption.name = true
|
|
Trix.config.attachments.preview.caption.size = false
|
|
|
|
document.addEventListener("trix-initialize", function(event) {
|
|
Trix.Inspector.install(event.target);
|
|
});
|
|
|
|
document.addEventListener("trix-attachment-add", function(event) {
|
|
var attachment = event.attachment;
|
|
if (attachment.file) {
|
|
var xhr = new XMLHttpRequest;
|
|
xhr.open("POST", "/attachments", true);
|
|
|
|
xhr.upload.onprogress = function(event) {
|
|
var progress = event.loaded / event.total * 100;
|
|
attachment.setUploadProgress(progress);
|
|
};
|
|
|
|
xhr.onload = function() {
|
|
if (xhr.status === 201) {
|
|
setTimeout(function() {
|
|
var url = xhr.responseText;
|
|
attachment.setAttributes({ url: url, href: url });
|
|
}, 30)
|
|
}
|
|
};
|
|
|
|
attachment.setUploadProgress(10);
|
|
|
|
setTimeout(function() {
|
|
xhr.send(attachment.file);
|
|
}, 30)
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<trix-editor autofocus class="trix-content" input="input"></trix-editor>
|
|
<details id="output">
|
|
<summary>Output</summary>
|
|
<textarea readonly id="input"></textarea>
|
|
</details>
|
|
</main>
|
|
</body>
|
|
</html>
|