mirror of
https://github.com/codex-team/editor.js
synced 2026-03-15 23:25:47 +01:00
f513fdd69d* [Improvements] ESLint action (#1099) * TSLint -> ESLint, GitHub Action * Update eslint.yml * Autofix * more autofix * fix * manually fix some issues * Update CHANGELOG.md * [Refactor] ESLint fixed (#1100) Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * [Feature] i18n (#1106) * i18n first steps * i18n internal, toolbox, api for tools * namespaced api * tn, t * tn in block tunes * join toolbox and inlineTools under toolNames * translations * make enum toolTypes * Update block.ts * Update src/components/core.ts Co-Authored-By: George Berezhnoy <gohabereg@users.noreply.github.com> * add more types * rm tn * export i18n types * upd bundle * fix tabulation * Add type-safe namespaces * upd * Improve example * Update toolbox.ts * improve examplle * upd * fix typo * Add comments for complex types Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> Co-authored-by: Georgy Berezhnoy <gohabereg@gmail.com> * Remove unused submodule * Fixed: icon centering in Firefox * Do not load styles twice (#1112) * Do not load styles twice * Add changelog * Fix issue link Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Show warning if Block to delete is not found (#1111) Resolves #1102 * Save Tools' order in the Toolbox (#1113) Resolves #1073 * fix $.isEmpty performance (#1096) * fix $.isEmpty performance * add changelog * upd bundle Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Add issue templates (#1114) * Update issue templates (#1121) * Update issue templates * Apply suggestions from code review Co-Authored-By: George Berezhnoy <gohabereg@users.noreply.github.com> * upd texts * Update feature_request.md * Update .github/ISSUE_TEMPLATE/discussion.md Co-Authored-By: George Berezhnoy <gohabereg@users.noreply.github.com> Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> * Allowing deleting block by block id (#1108) * Allowing deleting block by block id * Fixed no argument error * Making index value optional for delete operation * Added to changelog * Making index value optional for delete operation * Added parameter description * Update docs/CHANGELOG.md * Update types/api/blocks.d.ts * Update editor.js Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Allow navigate next from last non-initial block (#1110) Resolves #1103 * Create CODE_OF_CONDUCT.md (#1171) * Create CODE_OF_CONDUCT.md * Update changelog file * Update dependencies (#1122) * Update dependencies * upd codex.tooltip * Update editor.js.LICENSE.txt Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Feature/disable tab event config (#1164) * Highlight first block on autofocus (#1127) * Fix shortcut for external tools (#1141) * fix/shortcut-for-external-tools * Check inline tools property for shortcut Co-authored-by: George Berezhnoy <gohabereg@gmail.com> * Hotfix/issue1133 selection shortcut removed on editor destroy (#1140) * Removed shortcut CMD+A on editor destroy #1133 * Removed patch version and made code cleaner #1133 * lint error fixes #1133 Co-authored-by: Sisir <sisir@hellosivi.com> Co-authored-by: George Berezhnoy <gohabereg@gmail.com> * [Feature] BlockAPI Interface (#1075) * Fix BlockManager.insert method (#1172) * Fix BlockManager.insert method * upd * Explicitly check for undefined * Update tools master branches (#1180) * Update master branches * Update image * Update CHANGELOG.md * Fix behaviour of inputs editing in block settings (#1123) * lint code * Update CHANGELOG.md * Added RTL support * Fixed code style * Fixed icons positioning in the toolbar in the RTL mode * Renamed example-dev-rtl.html to example-rtl.html * Moved 'direction' option to 'i18n' section * Fixed an issue with arrow navigation between blocks * Renamed rtl-fix to codex-editor--rtl * Fixed icons positioning in the narrow mode for RTL * Replaced 'isRtl' method with getter * Fixed bug with the editor initialization when 'i18n' option is not set * narrow mode improved * Changelog added Co-authored-by: Peter Savchenko <specc.dev@gmail.com> Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> Co-authored-by: Georgy Berezhnoy <gohabereg@gmail.com> Co-authored-by: tasuku-s <tasuku@freemind.co.jp> Co-authored-by: Athul Anil Kumar <athul7744@outlook.com> Co-authored-by: Taly <vitalik7tv@yandex.ru> Co-authored-by: flaming-cl <51183663+flaming-cl@users.noreply.github.com> Co-authored-by: Nguyen Ngoc Son <sonnn.se@gmail.com> Co-authored-by: Sisir Das K <37764463+sis-dk@users.noreply.github.com> Co-authored-by: Sisir <sisir@hellosivi.com> Co-authored-by: ImangazalievM <mahach.miangazaliev@gmail.com>
235 lines
6.3 KiB
HTML
235 lines
6.3 KiB
HTML
<!--
|
|
Use this page for debugging purposes.
|
|
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 🤩🧦🤨 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" style="text-align: center;">
|
|
No submodules found. Run <code class="inline-code">yarn pull_tools</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').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/bundle.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"></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>
|