Edit Tag logo

Edit Tag plugin

Edit classes, styles and attributes of selected element
Edit Tag screenshot
Edit Tag screenshot
Edit Tag logo

Edit Tag add-on is used for manipulating parameters of selected tag. You can change name of the tag, tag attributes, classes and styles. You can also change existing tag parameters and remove them.

CKEditor 4 logo CKEditor 4
TinyMCE 6 logo TinyMCE 6
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Edit Tag plugin in CKEditor 4

Download Edit Tag
ZIP archive of Edit Tag for CKEditor 4

Then do these simple steps:

  1. Copy EditTag directory to ckeditor/plugins/.
  2. Edit CKEditor config and add EditTag to extraPlugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Using config file
Using initialization script

Example of configuring with config.js

If you prefer to edit config.js config file of CKEditor or when your CKEditor initialization code is placed inside some non-editable part of CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "EditTag";
};

Example of configuring inside initialization code

Some CMSs do not use config.js file and let to edit CKEditor initialization script only. Do this changes there:

CKEDITOR.replace("#editor", {
    extraPlugins: "EditTag",
});

Install Edit Tag plugin in TinyMCE 6

Download Edit Tag
ZIP archive of Edit Tag for TinyMCE 6
Self-hosted TinyMCE 6
Cloud TinyMCE 6

Install the plugin to TinyMCE 6 hosted on your server

  1. Copy EditTag directory to tinymce/plugins/.
  2. Edit TinyMCE config and add EditTag to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "EditTag",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

  1. Copy EditTag directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Edit Tag plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add EditTag to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "EditTag",
    external_plugins: {
        "EditTag": "http://example.com/public/EditTag/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Edit Tag plugin in TinyMCE 5

Download Edit Tag
ZIP archive of Edit Tag for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy EditTag directory to tinymce/plugins/.
  2. Edit TinyMCE config and add EditTag to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "EditTag",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

  1. Copy EditTag directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Edit Tag plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add EditTag to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "EditTag",
    external_plugins: {
        "EditTag": "http://example.com/public/EditTag/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Edit Tag plugin in TinyMCE 4

Download Edit Tag
ZIP archive of Edit Tag for TinyMCE 4

Then do these simple steps:

  1. Copy EditTag directory to tinymce/plugins/.
  2. Edit TinyMCE config and add EditTag to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "EditTag",
});

Refer to TinyMCE add-ons installation manual for more details

Reviews

I use Edit tag addon for customizing some elements. Thanks to addon I can set the class name, attributes, and style element with CSS rules without editing source code directly.

User icon
Marc K.
Freelancer

If your content needs something more specific that demands fine tuning choose the Edit tag. It really helps.

User icon
Boris M.
Individual

Tell a friend about Edit Tag

Send