mirror of
https://github.com/codex-team/editor.js
synced 2024-05-03 07:03:47 +02:00
239 lines
6.5 KiB
HTML
239 lines
6.5 KiB
HTML
<!--
|
|
Use this page for RTL mode debugging.
|
|
Editor Tools are loaded as git-submodules.
|
|
You can pull modules by running `yarn pull_tools` and start experimenting.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Editor.js RTL example</title>
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
|
|
<link href="assets/demo.css" rel="stylesheet">
|
|
<script src="assets/json-preview.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
</head>
|
|
<body>
|
|
<div class="ce-example">
|
|
<div class="ce-example__header">
|
|
<a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
|
|
|
|
<div class="ce-example__header-menu">
|
|
<a href="https://github.com/editor-js" target="_blank">Plugins</a>
|
|
<a href="https://editorjs.io/usage" target="_blank">Usage</a>
|
|
<a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
|
|
<a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
|
|
</div>
|
|
</div>
|
|
<div class="ce-example__content _ce-example__content--small">
|
|
<div id="editorjs"></div>
|
|
<div id="hint-core" style="text-align: center;">
|
|
No core bundle file found. Run <code class="inline-code">yarn build</code>
|
|
</div>
|
|
<div id="hint-tools" style="text-align: center;">
|
|
No submodules found. Run <code class="inline-code">yarn pull_tools && yarn tools:update</code>
|
|
</div>
|
|
<div class="ce-example__button" id="saveButton">
|
|
editor.save()
|
|
</div>
|
|
</div>
|
|
<div class="ce-example__output">
|
|
<pre class="ce-example__output-content" id="output"></pre>
|
|
|
|
<div class="ce-example__output-footer">
|
|
<a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load Tools -->
|
|
<!--
|
|
You can upload Tools to your project's directory and use as in example below.
|
|
Also you can load each Tool from CDN or use NPM/Yarn packages.
|
|
Read more in Tool's README file. For example:
|
|
https://github.com/editor-js/header#installation
|
|
-->
|
|
<script src="./tools/header/dist/bundle.js" onload="document.getElementById('hint-tools').hidden = true"></script><!-- Header -->
|
|
<script src="./tools/simple-image/dist/bundle.js"></script><!-- Image -->
|
|
<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
|
|
<script src="./tools/list/dist/bundle.js"></script><!-- List -->
|
|
<script src="./tools/checklist/dist/bundle.js"></script><!-- Checklist -->
|
|
<script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
|
|
<script src="./tools/code/dist/bundle.js"></script><!-- Code -->
|
|
<script src="./tools/embed/dist/bundle.js"></script><!-- Embed -->
|
|
<script src="./tools/table/dist/table.js"></script><!-- Table -->
|
|
<script src="./tools/link/dist/bundle.js"></script><!-- Link -->
|
|
<script src="./tools/raw/dist/bundle.js"></script><!-- Raw -->
|
|
<script src="./tools/warning/dist/bundle.js"></script><!-- Warning -->
|
|
|
|
<script src="./tools/marker/dist/bundle.js"></script><!-- Marker -->
|
|
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
|
|
|
|
<!-- Load Editor.js's Core -->
|
|
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
|
|
|
|
<!-- Initialization -->
|
|
<script>
|
|
/**
|
|
* Saving button
|
|
*/
|
|
const saveButton = document.getElementById('saveButton');
|
|
|
|
/**
|
|
* To initialize the Editor, create a new instance with configuration object
|
|
* @see docs/installation.md for mode details
|
|
*/
|
|
var editor = new EditorJS({
|
|
/**
|
|
* Wrapper of Editor
|
|
*/
|
|
holder: 'editorjs',
|
|
i18n: {
|
|
|
|
/**
|
|
* Text direction
|
|
*/
|
|
direction: 'rtl',
|
|
},
|
|
|
|
/**
|
|
* Tools list
|
|
*/
|
|
tools: {
|
|
/**
|
|
* Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
|
|
*/
|
|
header: {
|
|
class: Header,
|
|
inlineToolbar: ['link'],
|
|
config: {
|
|
placeholder: 'Header'
|
|
},
|
|
shortcut: 'CMD+SHIFT+H'
|
|
},
|
|
|
|
/**
|
|
* Or pass class directly without any configuration
|
|
*/
|
|
image: {
|
|
class: SimpleImage,
|
|
inlineToolbar: ['link'],
|
|
},
|
|
|
|
list: {
|
|
class: List,
|
|
inlineToolbar: true,
|
|
shortcut: 'CMD+SHIFT+L'
|
|
},
|
|
|
|
checklist: {
|
|
class: Checklist,
|
|
inlineToolbar: true,
|
|
},
|
|
|
|
quote: {
|
|
class: Quote,
|
|
inlineToolbar: true,
|
|
config: {
|
|
quotePlaceholder: 'Enter a quote',
|
|
captionPlaceholder: 'Quote\'s author',
|
|
},
|
|
shortcut: 'CMD+SHIFT+O'
|
|
},
|
|
|
|
warning: Warning,
|
|
|
|
marker: {
|
|
class: Marker,
|
|
shortcut: 'CMD+SHIFT+M'
|
|
},
|
|
|
|
code: {
|
|
class: CodeTool,
|
|
shortcut: 'CMD+SHIFT+C'
|
|
},
|
|
|
|
delimiter: Delimiter,
|
|
|
|
inlineCode: {
|
|
class: InlineCode,
|
|
shortcut: 'CMD+SHIFT+C'
|
|
},
|
|
|
|
linkTool: LinkTool,
|
|
|
|
raw: RawTool,
|
|
|
|
embed: Embed,
|
|
|
|
table: {
|
|
class: Table,
|
|
inlineToolbar: true,
|
|
shortcut: 'CMD+ALT+T'
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
* This Tool will be used as default
|
|
*/
|
|
// initialBlock: 'paragraph',
|
|
|
|
/**
|
|
* Initial Editor data
|
|
*/
|
|
data: {
|
|
blocks: [
|
|
{
|
|
type: "header",
|
|
data: {
|
|
text: "محرر.js",
|
|
level: 2
|
|
}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : 'مرحبا! تعرف على المحرر الجديد. في هذه الصفحة ، يمكنك رؤيتها في العمل - حاول تحرير هذا النص.'
|
|
}
|
|
},
|
|
{
|
|
type: "header",
|
|
data: {
|
|
text: "دلائل الميزات",
|
|
level: 3
|
|
}
|
|
},
|
|
{
|
|
type : 'list',
|
|
data : {
|
|
items : [
|
|
'وهو محرر بنمط الكتلة',
|
|
'تقوم بإرجاع إخراج بيانات نظيفة في JSON',
|
|
'مصممة لتكون قابلة للتوسيع والتوصيل مع واجهة برمجة تطبيقات بسيطة'
|
|
],
|
|
style: 'unordered'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
onReady: function(){
|
|
saveButton.click();
|
|
},
|
|
onChange: function() {
|
|
console.log('something changed');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Saving example
|
|
*/
|
|
saveButton.addEventListener('click', function () {
|
|
editor.save().then((savedData) => {
|
|
cPreview.show(savedData, document.getElementById("output"));
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|