mirror of
https://github.com/codex-team/editor.js
synced 2024-05-12 19:36:48 +02:00
232 lines
8.2 KiB
HTML
232 lines
8.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>CodeX Editor 🤩🧦🤨 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>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="ce-example">
|
|||
|
|
<div class="ce-example__header">
|
|||
|
|
<a class="ce-example__header-logo" href="https://ifmo.su/editor">CodeX Editor 🤩🧦🤨</a>
|
|||
|
|
|
|||
|
|
<div class="ce-example__header-menu">
|
|||
|
|
<a href="https://github.com/codex-editor" target="_blank">Plugins</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ce-example__content">
|
|||
|
|
<div id="codex-editor"></div>
|
|||
|
|
|
|||
|
|
<div class="ce-example__button" id="saveButton">
|
|||
|
|
editor.saver.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://ifmo.su" 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/codex-editor/header#installation
|
|||
|
|
-->
|
|||
|
|
<script src="./tools/header/dist/bundle.js"></script><!-- Header -->
|
|||
|
|
<script src="./tools/simple-image/dist/bundle.js"></script><!-- Simple Image -->
|
|||
|
|
<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
|
|||
|
|
<script src="./tools/list/dist/bundle.js"></script><!-- List -->
|
|||
|
|
<script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
|
|||
|
|
|
|||
|
|
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
|
|||
|
|
|
|||
|
|
<!-- Load CodeX Editor's Core -->
|
|||
|
|
<script src="../build/codex-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 CodexEditor({
|
|||
|
|
/**
|
|||
|
|
* Wrapper of Editor
|
|||
|
|
*/
|
|||
|
|
holderId: 'codex-editor',
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 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'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Or pass class directly without any configuration
|
|||
|
|
*/
|
|||
|
|
image: SimpleImage,
|
|||
|
|
|
|||
|
|
list: {
|
|||
|
|
class: List,
|
|||
|
|
inlineToolbar: true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
quote: {
|
|||
|
|
class: Quote,
|
|||
|
|
inlineToolbar: true,
|
|||
|
|
config: {
|
|||
|
|
quotePlaceholder: 'Enter a quote',
|
|||
|
|
captionPlaceholder: 'Quote\'s author',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
delimiter: Delimiter,
|
|||
|
|
|
|||
|
|
|
|||
|
|
inlineCode: {
|
|||
|
|
class: InlineCode,
|
|||
|
|
shortcut: 'CMD+SHIFT+M'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* This Tool will be used as default
|
|||
|
|
*/
|
|||
|
|
// initialBlock: 'paragraph',
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Initial Editor data
|
|||
|
|
*/
|
|||
|
|
data: {
|
|||
|
|
blocks: [
|
|||
|
|
{
|
|||
|
|
type: "header",
|
|||
|
|
data: {
|
|||
|
|
text: "CodeX Editor",
|
|||
|
|
level: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'paragraph',
|
|||
|
|
data : {
|
|||
|
|
text : 'Привет. Перед вами наш обновленный редактор. На этой странице вы можете проверить его в действии — попробуйте отредактировать или дополнить материал. Код страницы содержит пример подключения и простейшей настройки.'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "header",
|
|||
|
|
data: {
|
|||
|
|
text: "О редакторе",
|
|||
|
|
level: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'list',
|
|||
|
|
data : {
|
|||
|
|
items : [
|
|||
|
|
'Это блочный редактор',
|
|||
|
|
'На выводе отдает чистые данные',
|
|||
|
|
'Имеет гибкие настройки и простой API',
|
|||
|
|
],
|
|||
|
|
style: 'unordered'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "header",
|
|||
|
|
data: {
|
|||
|
|
text: "Что значит «блочный» редактор",
|
|||
|
|
level: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'paragraph',
|
|||
|
|
data : {
|
|||
|
|
text : 'Блоки — это структурные элементы, из которых состоит статья. Например <span class="inline-code">Параграф</span>, <span class="inline-code">Заголовок</span>, <span class="inline-code">Изображение</span>, <span class="inline-code">Видео</span> — это все Блоки. В CodeX Editor каждый Блок определяется плагином. Есть много готовых Блоков и простой API для создания новых. Например, вы можете создать Блок для Твиттера, Инстаграма, Опроса, Игры или CTA-кнопки.'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "header",
|
|||
|
|
data: {
|
|||
|
|
text: "Что значит «чистые данные»",
|
|||
|
|
level: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'paragraph',
|
|||
|
|
data : {
|
|||
|
|
text : 'В отличие от WYSIWYG-редакторов, CodeX Editor возвращает не сгенерированный HTML-код, включающий и содержание и оформление статьи, а JSON с данными о каждом Блоке. Пример таких данных находится внизу этой страницы.'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'paragraph',
|
|||
|
|
data : {
|
|||
|
|
text : 'Полученные данные можно использовать как угодно: выводить в вебе, рендерить в нативных мобильных приложениях, передавать в Instant Articles или Google AMP, использовать для генерации аудио-версии и тд.'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'paragraph',
|
|||
|
|
data : {
|
|||
|
|
text : 'Помимо этого, данные о Блоках удобно очищать, фильтровать и обрабатывать на бэкенде.'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'image',
|
|||
|
|
data: {
|
|||
|
|
url : 'https://ifmo.su/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',
|
|||
|
|
caption: '',
|
|||
|
|
stretched: false,
|
|||
|
|
withBorder: true,
|
|||
|
|
withBackground: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'delimiter',
|
|||
|
|
data : {}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type : 'paragraph',
|
|||
|
|
data : {
|
|||
|
|
text : 'Мы работали над этим редактором более двух лет. В отладке принимали участие известные медиа-проекты: vc.ru, TJ, DTF — с их помощью удалось найти и исправить много ошибок, стабилизировать ядро. Вместе с этим мы развивали API, который позволяет создавать плагины под любые задачи. Надеемся, вам понравится 😏'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
onReady: function(){
|
|||
|
|
saveButton.click();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Saving example
|
|||
|
|
*/
|
|||
|
|
saveButton.addEventListener('click', function () {
|
|||
|
|
editor.saver.save().then((savedData) => {
|
|||
|
|
cPreview.show(savedData, document.getElementById("output"));
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|