Autotag plugin (Creating a Most Basic Autocomplete Plugin)Documentation

This sample demonstrates the Autotag plugin that was built in the Autocomplete tutorial.

The custom Autotag plugin created in the tutorial provides the users with the autocompletion functionality for GitHub issues. Every time the user types the # character, available autocomplete suggestions are displayed in the dropdown and can be inserted into the content with Enter or Tab keys.

Autotag is a proof-of-concept plugin that can be downloaded from the repository or created by following the step-by-step tutorial.

Related Features

Get Sample Source Code

Autotag plugin

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Autotag plugin</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <style>
    ul.cke_autocomplete_panel {
      width: 300px;
    }

    ul.cke_autocomplete_panel>li {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .issue-bug::before {
      content: "🐛 "
    }

    .issue-feature::before {
      content: "⭐ "
    }

    .issue-task::before {
      content: "👷 "
    }
  </style>
  <script>
    CKEDITOR.plugins.addExternal('autotag', 'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/autotag/', 'plugin.js');

    CKEDITOR.replace('editor1', {
      plugins: 'textmatch,toolbar,wysiwygarea,basicstyles,link,undo,autotag,pastefromgdocs,pastefromlibreoffice,pastefromword',
      toolbar: [{
          name: 'document',
          items: ['Undo', 'Redo']
        },
        {
          name: 'basicstyles',
          items: ['Bold', 'Italic', 'Underline']
        },
        {
          name: 'links',
          items: ['Link', 'Unlink']
        }
      ]
    });
  </script>
</body>

</html>