Using Textbox.io - predicate filters

by textboxio

HTML

<script src="https://s3.amazonaws.com/static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editableDiv">
</div>

CSS

#editableDiv {
    margin:10px 0;
    height:200px;
}

JavaScript

var ed = textboxio.replace('#editableDiv');

/* The same filter function as before. nothing changes
 */
var makeRed = function (elements) {
 elements.forEach(function (el) {
        // use jQuery to make the element red
        $(el).css({color:'red'});
  });
};

/* Our predicate function. This gets called for every element in the source DOM
 * when a filter takes place. In this case, we only want to apply the function
 * for H1 tags 
 */
var matchHeadings = function (element) {
    if(element.tagName === 'H1') 
        return true;
    else
        return false;
};

// add it to our filters
ed.filters.predicate.addInput(matchHeadings, makeRed); 

// Test it by setting some content that contains 'h1' tags.
ed.content.set('<h1> this is my heading</h1><p>and this is a paragraph</p>');