|
| 1 | +<!-- |
| 2 | + Use this page for debugging purposes. |
| 3 | + Editor Tools are loaded as git-submodules. |
| 4 | + You can pull modules by running `yarn pull_tools` and start experimenting. |
| 5 | + --> |
| 6 | +<!DOCTYPE html> |
| 7 | +<html lang="en"> |
| 8 | +<head> |
| 9 | + <meta charset="UTF-8"> |
| 10 | + <title>Editor.js 🤩🧦🤨 example</title> |
| 11 | + <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet"> |
| 12 | + <link href="assets/demo.css" rel="stylesheet"> |
| 13 | + <script src="assets/json-preview.js"></script> |
| 14 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
| 15 | +</head> |
| 16 | +<body> |
| 17 | +<div class="ce-example"> |
| 18 | + <div class="ce-example__header"> |
| 19 | + <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a> |
| 20 | + |
| 21 | + <div class="ce-example__header-menu"> |
| 22 | + <a href="https://github.com/editor-js" target="_blank">Plugins</a> |
| 23 | + <a href="https://editorjs.io/usage" target="_blank">Usage</a> |
| 24 | + <a href="https://editorjs.io/configuration" target="_blank">Configuration</a> |
| 25 | + <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a> |
| 26 | + </div> |
| 27 | + </div> |
| 28 | + <div class="ce-example__content _ce-example__content--small"> |
| 29 | + <div id="editorjs"></div> |
| 30 | + <div id="hint" style="text-align: center;"> |
| 31 | + No submodules found. Run <code class="inline-code">yarn pull_tools</code> |
| 32 | + </div> |
| 33 | + <div class="ce-example__button" id="saveButton"> |
| 34 | + editor.save() |
| 35 | + </div> |
| 36 | + </div> |
| 37 | + <div class="ce-example__output"> |
| 38 | + <pre class="ce-example__output-content" id="output"></pre> |
| 39 | + |
| 40 | + <div class="ce-example__output-footer"> |
| 41 | + <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a> |
| 42 | + </div> |
| 43 | + </div> |
| 44 | +</div> |
| 45 | + |
| 46 | +<!-- Load Tools --> |
| 47 | +<!-- |
| 48 | + You can upload Tools to your project's directory and use as in example below. |
| 49 | + Also you can load each Tool from CDN or use NPM/Yarn packages. |
| 50 | + Read more in Tool's README file. For example: |
| 51 | + https://github.com/editor-js/header#installation |
| 52 | + --> |
| 53 | +<script src="./tools/header/dist/bundle.js" onload="document.getElementById('hint').hidden = true"></script><!-- Header --> |
| 54 | +<script src="./tools/simple-image/dist/bundle.js"></script><!-- Image --> |
| 55 | +<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter --> |
| 56 | +<script src="./tools/list/dist/bundle.js"></script><!-- List --> |
| 57 | +<script src="./tools/checklist/dist/bundle.js"></script><!-- Checklist --> |
| 58 | +<script src="./tools/quote/dist/bundle.js"></script><!-- Quote --> |
| 59 | +<script src="./tools/code/dist/bundle.js"></script><!-- Code --> |
| 60 | +<script src="./tools/embed/dist/bundle.js"></script><!-- Embed --> |
| 61 | +<script src="./tools/table/dist/bundle.js"></script><!-- Table --> |
| 62 | +<script src="./tools/link/dist/bundle.js"></script><!-- Link --> |
| 63 | +<script src="./tools/raw/dist/bundle.js"></script><!-- Raw --> |
| 64 | +<script src="./tools/warning/dist/bundle.js"></script><!-- Warning --> |
| 65 | + |
| 66 | +<script src="./tools/marker/dist/bundle.js"></script><!-- Marker --> |
| 67 | +<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code --> |
| 68 | + |
| 69 | +<!-- Load Editor.js's Core --> |
| 70 | +<script src="../dist/editor.js"></script> |
| 71 | + |
| 72 | +<!-- Initialization --> |
| 73 | +<script> |
| 74 | + /** |
| 75 | + * Saving button |
| 76 | + */ |
| 77 | + const saveButton = document.getElementById('saveButton'); |
| 78 | + |
| 79 | + /** |
| 80 | + * To initialize the Editor, create a new instance with configuration object |
| 81 | + * @see docs/installation.md for mode details |
| 82 | + */ |
| 83 | + var editor = new EditorJS({ |
| 84 | + /** |
| 85 | + * Wrapper of Editor |
| 86 | + */ |
| 87 | + holder: 'editorjs', |
| 88 | + i18n: { |
| 89 | + |
| 90 | + /** |
| 91 | + * Text direction |
| 92 | + */ |
| 93 | + direction: 'rtl', |
| 94 | + }, |
| 95 | + |
| 96 | + /** |
| 97 | + * Tools list |
| 98 | + */ |
| 99 | + tools: { |
| 100 | + /** |
| 101 | + * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md} |
| 102 | + */ |
| 103 | + header: { |
| 104 | + class: Header, |
| 105 | + inlineToolbar: ['link'], |
| 106 | + config: { |
| 107 | + placeholder: 'Header' |
| 108 | + }, |
| 109 | + shortcut: 'CMD+SHIFT+H' |
| 110 | + }, |
| 111 | + |
| 112 | + /** |
| 113 | + * Or pass class directly without any configuration |
| 114 | + */ |
| 115 | + image: { |
| 116 | + class: SimpleImage, |
| 117 | + inlineToolbar: ['link'], |
| 118 | + }, |
| 119 | + |
| 120 | + list: { |
| 121 | + class: List, |
| 122 | + inlineToolbar: true, |
| 123 | + shortcut: 'CMD+SHIFT+L' |
| 124 | + }, |
| 125 | + |
| 126 | + checklist: { |
| 127 | + class: Checklist, |
| 128 | + inlineToolbar: true, |
| 129 | + }, |
| 130 | + |
| 131 | + quote: { |
| 132 | + class: Quote, |
| 133 | + inlineToolbar: true, |
| 134 | + config: { |
| 135 | + quotePlaceholder: 'Enter a quote', |
| 136 | + captionPlaceholder: 'Quote\'s author', |
| 137 | + }, |
| 138 | + shortcut: 'CMD+SHIFT+O' |
| 139 | + }, |
| 140 | + |
| 141 | + warning: Warning, |
| 142 | + |
| 143 | + marker: { |
| 144 | + class: Marker, |
| 145 | + shortcut: 'CMD+SHIFT+M' |
| 146 | + }, |
| 147 | + |
| 148 | + code: { |
| 149 | + class: CodeTool, |
| 150 | + shortcut: 'CMD+SHIFT+C' |
| 151 | + }, |
| 152 | + |
| 153 | + delimiter: Delimiter, |
| 154 | + |
| 155 | + inlineCode: { |
| 156 | + class: InlineCode, |
| 157 | + shortcut: 'CMD+SHIFT+C' |
| 158 | + }, |
| 159 | + |
| 160 | + linkTool: LinkTool, |
| 161 | + |
| 162 | + raw: RawTool, |
| 163 | + |
| 164 | + embed: Embed, |
| 165 | + |
| 166 | + table: { |
| 167 | + class: Table, |
| 168 | + inlineToolbar: true, |
| 169 | + shortcut: 'CMD+ALT+T' |
| 170 | + }, |
| 171 | + |
| 172 | + }, |
| 173 | + |
| 174 | + /** |
| 175 | + * This Tool will be used as default |
| 176 | + */ |
| 177 | + // initialBlock: 'paragraph', |
| 178 | + |
| 179 | + /** |
| 180 | + * Initial Editor data |
| 181 | + */ |
| 182 | + data: { |
| 183 | + blocks: [ |
| 184 | + { |
| 185 | + type: "header", |
| 186 | + data: { |
| 187 | + text: "محرر.js", |
| 188 | + level: 2 |
| 189 | + } |
| 190 | + }, |
| 191 | + { |
| 192 | + type : 'paragraph', |
| 193 | + data : { |
| 194 | + text : 'مرحبا! تعرف على المحرر الجديد. في هذه الصفحة ، يمكنك رؤيتها في العمل - حاول تحرير هذا النص.' |
| 195 | + } |
| 196 | + }, |
| 197 | + { |
| 198 | + type: "header", |
| 199 | + data: { |
| 200 | + text: "دلائل الميزات", |
| 201 | + level: 3 |
| 202 | + } |
| 203 | + }, |
| 204 | + { |
| 205 | + type : 'list', |
| 206 | + data : { |
| 207 | + items : [ |
| 208 | + 'وهو محرر بنمط الكتلة', |
| 209 | + 'تقوم بإرجاع إخراج بيانات نظيفة في JSON', |
| 210 | + 'مصممة لتكون قابلة للتوسيع والتوصيل مع واجهة برمجة تطبيقات بسيطة' |
| 211 | + ], |
| 212 | + style: 'unordered' |
| 213 | + } |
| 214 | + } |
| 215 | + ] |
| 216 | + }, |
| 217 | + onReady: function(){ |
| 218 | + saveButton.click(); |
| 219 | + }, |
| 220 | + onChange: function() { |
| 221 | + console.log('something changed'); |
| 222 | + } |
| 223 | + }); |
| 224 | + |
| 225 | + /** |
| 226 | + * Saving example |
| 227 | + */ |
| 228 | + saveButton.addEventListener('click', function () { |
| 229 | + editor.save().then((savedData) => { |
| 230 | + cPreview.show(savedData, document.getElementById("output")); |
| 231 | + }); |
| 232 | + }); |
| 233 | +</script> |
| 234 | +</body> |
| 235 | +</html> |
0 commit comments