Sneaky Abstractions

Sanskrit is a rich-text editor designed to be very light-weight. It also outputs Textile instead of XHTML. Its functionality is limited to the basic inline styles, em, strong, a, ins and del.

View an example or download the script. There is also an example stylesheet.

Lorem <em>ipsum</em> dolor sit amet, consectetur adipisicing elit, sed do <strong>eiusmod</strong> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="http://www.yahoo.com/">exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <del>voluptate</del> <ins>velit</ins> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Why?

The reason for making this is that sometimes you want users to be able to make use of basic styling, but you can’t let them use XHTML because of XSS. You can try to filter out “bad tags”, but even that’s not guaranteed to be safe. Moreover, if you serve your content as real X(HT)ML, browsers will refuse to display your page if it has even a single malformed tag in it. Textile lets users style their text while being totally safe, but it’s not “user friendly”. What’s a developer to do? Well, use Sanskrit, of course :)

Note that this doesn’t mean you can trust what your users submit. You can never, ever, ever (ever) trust user input. So you still have to escape it after before running it through a Textile formatter.

Ok, how?

Include sanskrit.js in your page.

<script type="text/javascript" src="sanskrit.js"></script>

The script will automatically search for textarea tags with the class name “sanskrit” and convert them into rich-text editors. You can also do this manually by creating a new object and giving it the textarea as the first argument.

var textarea = document.getElementById('mytextarea');
var sanskrit = new Sanskrit(textarea);

You will see that the script makes no attempt to add style to the different components of the editor, but merely inserts them in place of the textarea. The DOM structure that replaces the textarea looks something like this:

<div class="sanskrit">
  <ul><!-- "Buttons" -->
    <li class="em"><a href="#">em</a></li>
    <li class="strong"><a href="#">strong</a></li>
    <!-- Etc. -->
  </ul>
  <iframe />
</div>