@anywhichway/nerd-editor
Version:
A JavaScript rich text editor based on and with support for custom elements.
68 lines (67 loc) • 3.33 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nerd Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://kit.fontawesome.com/237345632b.js" crossorigin="anonymous"></script>
<!-- "https://cdn.jsdelivr.net/npm/@anywhichway/nerd-editor@0.0.3" ../index.html-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="../index.html" as="nerd-editor"></script>
<style>
ins {
text-decoration-style: wavy;
}
dialog label {
white-space: nowrap
}
audio {
height: 1em;
scale: 90%;
}
@keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
blink {
animation: 2s linear infinite condemned_blink_effect;
}
button i {
height: 1.5em;
padding-top:.25em;
}
</style>
</head>
<body>
<template as="my-button">
<button>Button</button>
<script type="module">
self.properties({
onclick(event) {
console.log("button",event);
}
})
</script>
</template>
<nerd-editor id="editor">
<div slot="toolbar">ALPHA! <ne-control-file></ne-control-file><ne-control-edit></ne-control-edit><ne-control-heading></ne-control-heading><ne-control-i></ne-control-i><ne-control-b></ne-control-b><ne-control-u></ne-control-u><ne-control-del></ne-control-del><ne-control-ins></ne-control-ins>
<ne-control-var></ne-control-var><ne-control-kbd></ne-control-kbd> <ne-control-code></ne-control-code><ne-control-ul></ne-control-ul><ne-control-ol></ne-control-ol><ne-control-function></ne-control-function><ne-control-formula></ne-control-formula><ne-control-sup></ne-control-sup><ne-control-sub></ne-control-sub><ne-control-repl></ne-control-repl>
<ne-control-unformat></ne-control-unformat><ne-control-img></ne-control-img><ne-control-video></ne-control-video><ne-control-music></ne-control-music><ne-control-chart></ne-control-chart><ne-control-audio></ne-control-audio><ne-control-link></ne-control-link><ne-control-table></ne-control-table><ne-control-undo></ne-control-undo><ne-control-redo></ne-control-redo>
<ne-control-editor-dialog></ne-control-editor-dialog><ne-control-delete></ne-control-delete><ne-control-q></ne-control-q><ne-control-blockquote></ne-control-blockquote><ne-control-datablock></ne-control-datablock><ne-control-samp></ne-control-samp><ne-control-abbr></ne-control-abbr><ne-control-details></ne-control-details><ne-control-aside></ne-control-aside></div>
<div slot="content"><p>Content</p></div>
<div slot="footer">Footer</div>
<div slot="placeholder"></div>
</nerd-editor>
<script>
[...document.body.querySelectorAll("template")].forEach((template) => {
quickComponent({html:template.innerHTML,as:template.getAttribute("as"),properties:{editor:document.getElementById("editor")}})
})
</script>
</body>
</html>