From d17d17261faccb3eb42e91f88ca035e5b1730c66 Mon Sep 17 00:00:00 2001
From: Sébastien Dailly <sebastien@chimrod.com>
Date: Sun, 31 Jan 2021 04:21:01 +0100
Subject: Bindings to prosemirror
---
editor/editor.html | 31 +++++++++++++++++++------------
1 file changed, 19 insertions(+), 12 deletions(-)
(limited to 'editor/editor.html')
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 – 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>
--
cgit v1.2.3