https://github.com/amineo/redactor-trace-elements

This plugin adds the ability to toggle a trace on common parent block-level elements with an outline and their element name
https://github.com/amineo/redactor-trace-elements

Last synced: 3 months ago
JSON representation

This plugin adds the ability to toggle a trace on common parent block-level elements with an outline and their element name

• Host: GitHub
• URL: https://github.com/amineo/redactor-trace-elements
• Owner: amineo
• License: mit
• Created: 2017-04-02T16:50:25.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-08T21:41:05.000Z (about 8 years ago)
• Last Synced: 2025-01-24T12:23:09.802Z (5 months ago)
• Language: HTML
• Homepage: https://anthonymineo.com/trace-elements-plugin-for-redactor/
• Size: 37.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![TraceElements in action](https://github.com/amineo/redactor-trace-elements/raw/master/screenshot.png)

[**Blog Post**](https://anthonymineo.com/trace-elements-plugin-for-redactor/)

This plugin adds the ability to toggle a trace on common parent block-level elements with an outline and their element name.

The purpose for creating this plugin was so that it becomes a little clearer on what my WYSIWYG is doing. Is it adding unnecessary `
` tags? Are there empty `
`,`
` or `` elements? Without jumping into source view it's hard to tell.


It also comes in handy for writers/editors who may not be as familiar with HTML or the source view.

Currently the plugin traces these common block elements by default:



    
div

    
br

    
p

    
ul

    
ol

    
pre

    
h1

    
h2

    
h3

    
h4

    
h5

    
h6





## How to Extend

You can easily extend what gets traced with CSS! Just modify the selector below and add to your stylesheet.

```

/* Replace ELEMENTNAME with the element you want to trace */

.redactor-trace.redactor-layer > ELEMENTNAME:after {

   content:'ELEMENTNAME';

}

```

This plugin makes use of `::after` with the `content` property so it's fast and customizable.



## How to Initialize 

```

    

    

    

    $(function(){

        $('#redactor').redactor({

            plugins: ['TraceElements']

        });

    });

    

```

- Reference the plugin script src

- Include **TraceElements** in the plugins array