Installing and Configuring Dreditor

Drupalize.Me Tutorial

With DrupalCon Los Angeles underway we thought it might be a good time to introduce (or reintroduce) folks to Dreditor (short for "Drupal editor"). Dreditor is a collection of user scripts, which alter browser behavior on specific pages on the domain. The features of Dreditor are mostly helpful in the issue queue and during the patch review process.

We have a video, Installing and using Dreditor, if you'd like to follow along, but since that recording, installation of Dreditor is even easier. Let's take a look at the changes, and how we can use this powerful tool to make interacting with the issue queue awesome.


For recent versions of Chrome, Firefox or Safari, simply visiting will prompt you to install the particular version of Dreditor your browser needs. Clicking the Install Dreditor 1.2.14 for Chrome (or Firefox) button in either Chrome and Firefox will prompt you to grant the Dreditor extension permission to install. Click "Allow" and Dreditor is installed and ready to go. On Safari you need to download and manually install the browser extension. After clicking install, an extension file (called "dreditor.safariextz") will be downloaded. Double-click this extension and Dreditor will be installed.

Dreditor Installation in Safari

Now that we've got Dreditor installed, and ready to go, let's take a look at the various tools it provides to make working in the issue queue a little easier.

Patch Review and Tools

After installing Dreditor for a browser, when we visit an issue in that browser, there are now two extra buttons available: REVIEW and SIMPLYTEST.ME

Dreditor patch button

The service allows us to spin up a Drupal sandbox site with any modules, themes, or patches already added or applied. The button provided by Dreditor fills in the "apply patches" field, so we can easily bring up a site to test a particular patch with just a couple of clicks. This is obviously a huge time saver, since we no longer have to alter our local environment to test every single patch. allows for faster and easier patch review, while also lowering the technical barriers to doing so. Now that we've used to help test the functionality of our patch, let's see how Dreditor helps with code review, too.

Dreditor's REVIEW button launches a modal window which gives us a quick listing of the changed files in this particular patch. From here we can click on a line (or click and drag across several lines) of code to leave a comment.

Dreditor review comments

We can save this comment, and continue to review the rest of the patch. At any time, the CANCEL button will discard our comments and take us back the the page we were on. The HIDE button can be used to temporarily hide the Dreditor modal window while maintaining any in progress comments we've saved. When we've finished reviewing the patch, hitting the PASTE button will insert all of our comments, with the appropriate formatting, into the comment box in the issue queue.

Dreditor comment formatting

Text Field Tools

Dreditor also provides handy tools for the other text areas on an issue. Both the comment field and the issue summary have a Make sticky button.

Dreditor sticky button

This button will pop up a half-screen modal window which allows us to continue editing while still being able to scroll through the rest of the issue for reference.

Dreditor sticky button in action

Issue summaries also have buttons for inserting templates or tasks. These buttons insert some boilerplate markup for headings common to larger issue organization.

Dreditor makes the actual text area a little bit smarter, too. Tab completion is in place to allow <ulTAB to create an unordered list, <blockTAB for a blockquote, etc. Username tab completion works with by prefixing the username with @ (only for usernames on the current page). Linking to another comment in the issue thread can be done by prefixing the comment number with #. Instead of remembering the syntax uses to link to other issues, pasting a url to an issue and hitting tab will automatically convert the link to the proper syntax.

Finally, Dreditor also provides an alternate method of embedding images. After you've uploaded and attached a file, an EMBED button appears. Clicking this button inserts the appropriate markup into the text area.

Dreditor embed

Hopefully this has helped illustrate how Dreditor can help save time, and make the patch review process a little smoother. If you haven't given it a shot before, I highly encourage you to give it a try. With all of the code sprinting over the next week, it certainly can't hurt.

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <code class> <ul type> <ol start type> <li> <dl> <dt> <dd><h3 id> <p>
  • Lines and paragraphs break automatically.

About us

Drupalize.Me is the best resource for learning Drupal online. We have an extensive library covering multiple versions of Drupal and we are the most accurate and up-to-date Drupal resource. Learn more