diff options
| author | Sébastien Dailly <sebastien@chimrod.com> | 2021-01-31 04:21:01 +0100 |
|---|---|---|
| committer | Sébastien Dailly <sebastien@dailly.me> | 2022-02-07 16:43:33 +0100 |
| commit | d17d17261faccb3eb42e91f88ca035e5b1730c66 (patch) | |
| tree | 28424d286bda347aee77528ece79907026b2e35b /editor/editor.html | |
| parent | 1961a9779b482cf9cbdb3365137c2e74423067c6 (diff) | |
Bindings to prosemirror
Diffstat (limited to 'editor/editor.html')
| -rwxr-xr-x | editor/editor.html | 31 |
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 – 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> |