mirror of
https://github.com/codex-team/editor.js
synced 2024-05-19 06:47:16 +02:00
79f8660637
* Do not start multi-block selection on UI elements (#662) * Do not start multi-block selection on UI elements * Do not prevent mousedown event on inline toolbar actions * Remove log * Add comment * Add link to issue closes #646 * Fix loss of pointer (#666) * Fix loss of pointer when click is outside of the editor but selection is inside * Remove log * Update shortcuts module (#685) * Fixed possible grammatical typo (#681) Thanks * Update shortcuts module * update changelog * update * Remove margin top for inline-link icon (#690) * Remove margin top for inline-link icon resolves #674 * Update CHANGELOG.md * Remove unused style * Pull fresh tools * Remove changelog contents from readme (#700) * #665 API to open and close inline-toolbar (#711) * API to open and close inline-toolbar * Fixed documentation * renamed inline -> inline-toolbar * removed dist * reset editor.js * added editor.js bundle * Fixed build error * Null checks on toolbar/inline@open * updated bundle * Improve some comments * Updatd api.md CHANGELOG.md * Change feature to new instead of improvement * Allow holderId work with ref on dom element (#710) * done * update types * attempt to simplify code * remove useless helper * revert holderId logic and add holder property * Apply suggestions from code review Co-Authored-By: dimensi <eddimensi@gmail.com> * update holder type on string | HTMLElement * fix typo * add deprecated notice and fix typos * fix wrong compare * fix comments * swap console.log on _.log * update types for editor config * update examples * update docs * update build * Activating Open Collective (#736) Hi, I'm making updates for Open Collective. Either you or a supporter signed this repo up for Open Collective. This pull request adds backers and sponsors from your Open Collective https://opencollective.com/editorjs❤️ It adds two badges at the top to show the latest number of backers and sponsors. It also adds placeholders so that the avatar/logo of new backers/sponsors can automatically be shown without having to update your README.md. [more info](https://github.com/opencollective/opencollective/wiki/Github-banner). See how it looks on this [repo](https://github.com/apex/apex#backers). You can also add a postinstall script to let people know after npm|yarn install that you are welcoming donations (optional). [More info](https://github.com/OpenCollective/opencollective-cli) You can also add a "Donate" button to your website and automatically show your backers and sponsors there with our widgets. Have a look here: https://opencollective.com/widgets P.S: As with any pull request, feel free to comment or suggest changes. The only thing "required" are the placeholders on the README because we believe it's important to acknowledge the people in your community that are contributing (financially or with code!). Thank you for your great contribution to the open source community. You are awesome! 🙌 And welcome to the open collective community! 😊 Come chat with us in the #opensource channel on https://slack.opencollective.com - great place to ask questions and share best practices with other open source sustainers! * Do not install editor.js as dev-dependency (#731) Resolves #730 * Move codex-notifier to dependencies for typescript declarations (#728) * Close inline toolbar after creating new link by pressing ENTER (#722) * Method to clear current selection and close inline toolbar * clearSelection with optional collapsed range * refactored selection.ts * removed experimental function * Update src/components/selection.ts Co-Authored-By: tanmayv <12tanmayvijay@gmail.com> * update version, add changelog * Link Logo Image to homepage (#738) * Update README.md (#744) * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md Co-Authored-By: neSpecc <specc.dev@gmail.com> * Config minHeight option that allows to customize bottom zone (#745) * issue-739: allow Block's editable element selection (#747) * issue-739: allow Block's input selection * little improvements * update Changelog and cache inputs * small fix * delete map file * fix inputs.count condition * Fix typo in example paragraph (#749) * Fix typo * Update example-dev.html * minor release
285 lines
9.3 KiB
HTML
285 lines
9.3 KiB
HTML
<!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 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="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></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',
|
|
|
|
/**
|
|
* 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,
|
|
|
|
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: "Editor.js",
|
|
level: 2
|
|
}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : 'Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration.'
|
|
}
|
|
},
|
|
{
|
|
type: "header",
|
|
data: {
|
|
text: "Key features",
|
|
level: 3
|
|
}
|
|
},
|
|
{
|
|
type : 'list',
|
|
data : {
|
|
items : [
|
|
'It is a block-styled editor',
|
|
'It returns clean data output in JSON',
|
|
'Designed to be extendable and pluggable with a simple API',
|
|
],
|
|
style: 'unordered'
|
|
}
|
|
},
|
|
{
|
|
type: "header",
|
|
data: {
|
|
text: "What does it mean «block-styled editor»",
|
|
level: 3
|
|
}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : 'Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor\'s Core.'
|
|
}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : `There are dozens of <a href="https://github.com/editor-js">ready-to-use Blocks</a> and the <a href="https://editorjs.io/creating-a-block-tool">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.`
|
|
}
|
|
},
|
|
{
|
|
type: "header",
|
|
data: {
|
|
text: "What does it mean clean data output",
|
|
level: 3
|
|
}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : 'Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below'
|
|
}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : `Given data can be used as you want: render with HTML for <code class="inline-code">Web clients</code>, render natively for <code class="inline-code">mobile apps</code>, create markup for <code class="inline-code">Facebook Instant Articles</code> or <code class="inline-code">Google AMP</code>, generate an <code class="inline-code">audio version</code> and so on.`
|
|
}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : 'Clean data is useful to sanitize, validate and process on the backend.'
|
|
}
|
|
},
|
|
{
|
|
type : 'delimiter',
|
|
data : {}
|
|
},
|
|
{
|
|
type : 'paragraph',
|
|
data : {
|
|
text : 'We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make its core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏'
|
|
}
|
|
},
|
|
{
|
|
type: 'image',
|
|
data: {
|
|
url: 'https://codex.so/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.save().then((savedData) => {
|
|
cPreview.show(savedData, document.getElementById("output"));
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|