summaryrefslogtreecommitdiff
path: root/editor/editor.html
diff options
context:
space:
mode:
authorSébastien Dailly <sebastien@chimrod.com>2021-01-31 04:21:01 +0100
committerSébastien Dailly <sebastien@dailly.me>2022-02-07 16:43:33 +0100
commitd17d17261faccb3eb42e91f88ca035e5b1730c66 (patch)
tree28424d286bda347aee77528ece79907026b2e35b /editor/editor.html
parent1961a9779b482cf9cbdb3365137c2e74423067c6 (diff)
Bindings to prosemirror
Diffstat (limited to 'editor/editor.html')
-rwxr-xr-xeditor/editor.html31
1 files changed, 19 insertions, 12 deletions
diff --git a/editor/editor.html b/editor/editor.html
index 525d8fc..9048e02 100755
--- a/editor/editor.html
+++ b/editor/editor.html
@@ -20,6 +20,7 @@
<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/fontawesome.css">
<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/brands.css">
<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/solid.css">
+ <link rel="stylesheet" type="text/css" href="./editor.css">
<link href="//localhost:8000/custom.css" rel="stylesheet">
@@ -43,16 +44,12 @@
<title>Chimrod &ndash; Editor</title>
-<link rel="stylesheet" href="quill/quill.snow.css" />
-
<style>
- .standalone-container {
- margin: 50px auto;
- max-width: 100%;
- }
#text-container {
height: 350px;
}
+ .ProseMirror { height: 330px; overflow-y: auto; box-sizing: border-box; -moz-box-sizing: border-box }
+ textarea { width: 100%; height: 400px; border: 1px solid silver; box-sizing: border-box; padding: 3px 10px; border: none; outline: none }
</style>
</head>
<body class="light-theme">
@@ -97,24 +94,34 @@
<article class="single">
<header>
- <h1 id="editor">Editor</h1>
+ <h1 id="title">Editor</h1>
</header>
<div>
-<div class="standalone-container">
- <div id="text-container"></div>
+<div id="text_editor" class="editor" style="margin-bottom: 23px; height: 350px;"></div>
+<div style="display: none" id="content">
+ <textarea>
+ <h3>Hello ProseMirror</h3>
+ <p>This is editable text. You can focus it and start typing.</p>
+ <p>To apply styling, you can select a piece of text and manipulate
+ its styling from the menu. The basic schema</p>
+ </textarea>
</div>
+
-<script src="quill/quill.min.js"></script>
+<script src="prosemirror.js"></script>
<noscript>Sorry, you need to enable JavaScript to see this page.</noscript>
<script id="script" type="text/javascript" defer="defer" src="editor.js"></script>
<script>
var script = document.getElementById('script');
script.addEventListener('load', function() {
- var app = document.getElementById('text-container');
- editor.attach(app);
+ var quill = document.getElementById('text-container');
+ editor.attach_quill(quill);
+ var prose = document.getElementById('text_editor');
+ var content = document.getElementById('content');
+ editor.attach_prosemirror(prose, content);
});
</script>