Skip to content
Snippets Groups Projects
Select Git revision
  • ea3c4773bed0e14f52bff1993d3a4f5d6a129ada
  • main default protected
  • dev
  • v0.0.3
  • v0.0.2
  • v0.0.1
6 results

index.html

Blame
    • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    index.html 3.69 KiB 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Development Sample</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<h1>CKEditor 5 – Development Sample</h1>

<div id="editor">
    <h2>Development environment</h2>
    <p>
        This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor
        build</a> that loads <code>MyPlugin</code>, which is an example plugin produced by the package generator. You can modify this
        sample and use it to validate whether a plugin or a set of plugins work fine.
    </p>
    <p>
        <code>MyPlugin</code> inserts a text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.
    </p>

    <h3>Helpful resources</h3>
    <ul>
        <li>Architecture
            <ul>
                <li>
                    <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/core-editor-architecture.html">Core editor architecture</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html">The editing engine</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/ui-library.html">The UI library</a>
                </li>
            </ul>
        </li>

        <li>
            <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/browser-compatibility.html">Browser compatibility</a>
        </li>

        <li>
            <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html">The error codes</a>
        </li>

        <li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html">The DLL builds</a></li>
    </ul>

    <h3>The directory structure</h3>

    <p>
        The code snippet below presents the directory structure.
    </p>

    <pre><code class="language-plaintext">.
├─ lang
│  └─ contexts.json    # Entries used for creating translations.
├─ sample
│  ├─ dll.html         # The editor initialized using the DLL builds. Check README for details.
│  ├─ index.html       # The currently displayed file.
    │  └─ ckeditor.js      # The editor initialization script.
├─ src
│  ├─ index.js         # The modules exported by the package when using the DLL builds.
│  ├─ myplugin.js      # The plugin that shows the very basic usage of the CKEditor 5 framework.
│  └─ **/*.js          # All JavaScript source files should be saved here.
├─ tests
│  ├─ index.js         # Tests for the plugin.
│  ├─ myplugin.js
│  └─ **/*.js          # All tests should be saved here.
├─ theme
│  ├─ icons
│  │  ├─ ckeditor.svg  # The CKEditor 5 icon displayed in the toolbar.
│  │  └─ **/*.svg      # All icon files should be saved here.
│  └─ **/*.css         # All CSS files should be saved here.
├─ .editorconfig
├─ ...
└─ README.md</code></pre>

    <h3>Reporting issues</h3>
    <p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>
    <ul>
        <li><a href="https://github.com/ckeditor/ckeditor5/issues/new/choose">CKEditor 5</a></li>
        <li><a href="https://github.com/ckeditor/ckeditor5-package-generator/issues/new">The package generator</a></li>
    </ul>
</div>

<script src="./ckeditor.dist.js"></script>
</body>
</html>