Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

TraceElements in action

Blog Post

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 <p> tags? Are there empty <div>,<ul> or <h*> 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

    <!-- Plugin Path -->
    <script src="redactor.trace-elements.js"></script>
    <script>
    $(function(){
        $('#redactor').redactor({
            plugins: ['TraceElements']
        });
    });
    </script>
  • Reference the plugin script src
  • Include TraceElements in the plugins array

About

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

Resources

License

Releases

No releases published

Packages

No packages published