Abbreviation (Custom Plugin with Dialog, Context Menu and ACF) Documentation

This sample demonstrates the Abbreviation plugin that was created in the Simple Plugin tutorial series from the Plugin SDK section of the CKEditor 4 Developer's Guide.

The custom Abbreviation plugin created in the tutorials lets the users insert abbreviations into their documents. The abbreviations use the <abbr> HTML element and are added and edited through a dialog window that is opened after clicking the dedicated toolbar button available in the editor instance below.

Additionally, this sample plugin demonstrates the integration of Advanced Content Filter (ACF) with a custom plugin, as explained in the Integrating Plugins with Advanced Content Filter article.

Abbreviation 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

Abbreviation plugin

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

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

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some sample text. You are using &lt;a href="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;, an online
&lt;abbr title="What You See Is What You Get"&gt;WYSIWYG&lt;/abbr&gt;&amp;nbsp;editor.&lt;/p&gt;
</textarea>
  <script>
    CKEDITOR.plugins.addExternal('abbr', 'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/abbr/', 'plugin.js');

    CKEDITOR.replace('editor1', {
      extraPlugins: 'abbr',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>