CKPopover is a commercial CKEditor 5 plugin that allows us to create popovers (or tooltips) for any text element in CKEditor 5 - much like eg. Bootstrap popover.

Index :

• Usage documentation
• License
• Contact

Usage documentation

If you have not built a CKEditor 5 before, please see "Building CKEditor 5 From Source" to learn how to build CKEditor 5. Otherwise read on and learn how to implement CKPro Popover.

1. Install the CKPro Popover NPM package from the NPM repositor. You can EITHER install adhoc from the command line OR your can use a pakage.json file:
   • Adhoc command line : (method 1)
     1. Open a command prompt and navigate to your CKEditor 5 main folder (the folder that contains the node_modules subfolder)
     2. shell> npm install @ckpro/ckeditor5-popover : this command will download and install the popover npm package in your node_modules folder.
   • package.json file : (method 2)
     1. Open your package.json file in a text editor and add a reference to the CKPro Popover npm package:
         

{
 "dependencies": {
   "@ckeditor/ckeditor5-editor-classic": "x",
   "@ckeditor/ckeditor5-essentials": "x",
   "@ckeditor/ckeditor5-heading": "x",
   "@ckeditor/ckeditor5-link": "x",
   "@ckeditor/ckeditor5-list": "x",
   "@ckeditor/ckeditor5-basic-styles": "x",
   "@ckeditor/ckeditor5-theme-lark": "x",
   "@ckpro/ckeditor5-popover": "x"
 },
 "devDependencies": {
   "@ckeditor/ckeditor5-dev-utils": "x",
   "postcss-loader": "3.0.0",
   "raw-loader": "4.0.1",
   "style-loader": "1.2.1",
   "webpack": "^4.44.2",
   "webpack-cli": "^3.3.12"
 }
}

1. Open a command prompt and navigate to your CKEditor 5 main folder (same folder that contains your package.json file)
2. shell> npm install : this command will take your package.json file and download & install all its package references to the node_modules folder.
3. In your CKEditor 5 build file (typically app.js)
   1. ADD a reference to @ckpro/ckeditor5-popover :
   2. ADD the Popover plugin to the CKEditor 5 plugin collection
   3. ADD the 'popover' toolbar button to the CKEditor 5 toolbar button collection
       

// app.js
 
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Popover from '@ckpro/ckeditor5-popover'; // ADD THIS (1/3)
 
export default class ClassicEditor extends ClassicEditorBase { }
 
ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [Heading,
            Essentials,
            Bold,
            Link,
            List,
            Popover // ADD THIS (2/3)
        ],
        toolbar: [
            'heading',
            'bold',
            'link',
            'bulletedList',
            'numberedList',
            'popover' // ADD THIS (3/3)
        ],
    })
    .then(editor => {
        window.editor = editor;
    })
    .catch(error => {
        console.error(error.stack);
    });

1. (depending on how you build your CKEditor 5 instance, your method may be a little different from the above)
2. You can now build the CKEditor 5 :
   1. Open a command prompt and navigate to your CKEditor 5 main folder (the folder that contains your package.json & app.js files as well as the node_modules subfolder).
   2. shell> webpack : this command will use your webpack.config.js file to build the CKEditor 5 object typically defined in app.js and exported to a file default dist\bundle.js (see filename in the output section of your webpack.config.js file).
3. In the page that displays your CKEditor 5 instance, lets call it edit.html, you need to make a reference to the webconfig created file that contains the CKEditor 5 instance, default dist\bundle.js:
   1. Open your edit.html file (or whatever file that displays your CKEditor 5 instance) in a text editor and add the following:
       

<!-- edit.html -->
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 - with CKPro Popover Plugin</title>        
    </head>
    <body>
        <!-- ADD THIS (1/2) -->
        <div id="editor">
            <p>Editor content goes here</p>
        </div>
 
        <script src="dist/bundle.js"></script> <!-- ADD THIS (2/2) -->
    </body>
</html>

1. bundle.js contains the CKEditor 5 instance which will default replace an element with the id="editor".
2. Open edit.html in a browser and you should see the following:
   •  The popover toolbar button.
   • Place your cursor in the word 'content' and click the popover toolbar button, notice how the popover text decoration is red - that's because the popover content is empty.
   • Write something in the popover UX and save it. Notice how the popover text decoration have turned green - that's because the popover content is NOT empty.
   • Click with your mouse somewhere in the word 'content' - since the context of your click have a popover attached, the popover UX will immediately open but this time because the popover has content the popover UX opens in info-mode (for a fast look of existing content). Had the content been empty, the text decoration being red, the popover UX would have opened in edit-mode.
3. In the page that displays your CKEditor 5 data, lets call it index.html, you need to apply some Javascript to create the popover objects. Here I will show how to enable the popover using jQuery & Bootstrap popover:
   1. Open your index.html file (or whatever file that displays your CKEditor 5 data) in a text editor and add the following:
       

<!-- index.html -->
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 - with CKPro Popover plugin</title>
 
    <!-- ADD THIS (1/4) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
 
    <!-- ADD THIS (2/4) -->
    <style>
        .ckpro-popover-client:after {
            content: "\003F";
            position: relative;
            font-weight: bold;
            font-size: 1rem;
            color: #aaa;
            top: -3px;
            left: -3px;
        }
    </style>
 
    <!-- ADD THIS (3/4) -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll('span[data-ckpro-popover]').forEach(elm => {
                elm.classList.add("ckpro-popover-client");
                $(elm).popover({
                    trigger: "hover",
                    placement: "top",
                    html: true,
                    content: function () {
                        return this.getAttribute("data-ckpro-popover");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <!-- ADD THIS (4/4) -->
    Editor <span data-ckpro-popover="Content can be many things in CKEditor 5">content</span> goes here.
</body>
</html>

1. The Javascript will find all elements to which a popover should be attached and for each such element attach a Bootstrap popover object and adding an appropriate css class (so readers can see that there are popover content for this element).
2. Open index.html in a browser, you should see the following:
   •  hover the mouse over the 'content' text to activate the popover.

That's all.

License

CKPro Popover is protected by a commercial license and MUST be purchased be fore use.

There are 3 licenses :

• License 1 : CKPro Popover 1 :  US$19 : grant use of CKPro Popover in a single project for current major semver version.
• License 2 : CKPro Popover 2 : US$29 : grant use of CKPro Popover in any number of projects for current major semver version.
• License 3 : CKPro ALL : US$59 : grant use of ALL CKPro plugins for a year across semver versions (if the major semver version changes for any number of CKPro plugins, you are allowed to upgrade free of charge). In addition you will get 2 hours of priority support.

For all licenses you are allowed to use the plugin or a derivative as part of a projekt that you sell or sell access to, it does not matter if you have 1 user or a million users of your projekt.

For all licenses you are allowed to change the source code, however if the source code change you forfeit CKPro ALL support on that particular plugin.

For all licenses any number of developers can work with the plugin.

Contact

Please contact Rasmus Rummel on email : rasmusrummel@gmail.com to obtain a license.