mirror of
https://github.com/codex-team/editor.js
synced 2024-05-16 21:36:48 +02:00
aab317895b
* Mobile adaptation beginned * mobile ready * Narrow mode supported * update version * disable narrow mode testing * prod build * rm unnecessary code * Update src/styles/variables.css * rm unused code * add viewport * disable narrow mode on mobile * mobile: add bg to current block * add paddings for highlighted block * rm changelog
266 lines
9.2 KiB
HTML
266 lines
9.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>
|
||
<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://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 _ce-example__content--small">
|
||
<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><!-- 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/marker/dist/bundle.js"></script><!-- Marker -->
|
||
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
|
||
|
||
<!-- Load CodeX Editor's Core -->
|
||
<script src="../dist/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: {
|
||
class: SimpleImage,
|
||
inlineToolbar: ['link'],
|
||
},
|
||
|
||
list: {
|
||
class: List,
|
||
inlineToolbar: true
|
||
},
|
||
|
||
checklist: {
|
||
class: Checklist,
|
||
inlineToolbar: true
|
||
},
|
||
|
||
quote: {
|
||
class: Quote,
|
||
inlineToolbar: true,
|
||
config: {
|
||
quotePlaceholder: 'Enter a quote',
|
||
captionPlaceholder: 'Quote\'s author',
|
||
},
|
||
},
|
||
|
||
marker: {
|
||
class: Marker,
|
||
shortcut: 'CMD+SHIFT+M'
|
||
},
|
||
|
||
code: {
|
||
class: CodeTool,
|
||
shortcut: 'CMD+SHIFT+D'
|
||
},
|
||
|
||
delimiter: Delimiter,
|
||
|
||
inlineCode: {
|
||
class: InlineCode,
|
||
shortcut: 'CMD+SHIFT+C'
|
||
},
|
||
|
||
embed: Embed,
|
||
|
||
table: {
|
||
class: Table,
|
||
inlineToolbar: true
|
||
},
|
||
|
||
},
|
||
|
||
/**
|
||
* 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 : 'Блоки — это структурные элементы, из которых состоит статья. Например <code class="inline-code">Параграф</code>, <code class="inline-code">Заголовок</code>, <code class="inline-code">Изображение</code>, <code class="inline-code">Видео</code> — это все Блоки. В 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 : 'delimiter',
|
||
data : {}
|
||
},
|
||
{
|
||
type : 'paragraph',
|
||
data : {
|
||
text : 'Мы работали над этим редактором более двух лет. В отладке принимали участие известные медиа-проекты: vc.ru, TJ, DTF — с их помощью удалось найти и исправить много ошибок, стабилизировать ядро. Вместе с этим мы развивали API, который позволяет создавать плагины под любые задачи. Надеемся, вам понравится 😏'
|
||
}
|
||
},
|
||
{
|
||
type: 'image',
|
||
data: {
|
||
url: 'https://ifmo.su/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',
|
||
caption: '',
|
||
stretched: false,
|
||
withBorder: true,
|
||
withBackground: false,
|
||
}
|
||
},
|
||
]
|
||
},
|
||
onReady: function(){
|
||
saveButton.click();
|
||
},
|
||
onChange: function() {
|
||
console.log('something changed');
|
||
}
|
||
});
|
||
|
||
/**
|
||
* Saving example
|
||
*/
|
||
saveButton.addEventListener('click', function () {
|
||
editor.saver.save().then((savedData) => {
|
||
cPreview.show(savedData, document.getElementById("output"));
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|