Project BUEditor

A plain textarea editor aiming to facilitate code writing for Drupal.

  • Editor interface and functionality are completely customizable through administration pages.
  • It supports role based editor interfaces.
  • It's possible to create image or text buttons.
  • Buttons can be customized to generate code snippets, html tags, bbcode tags etc.
Click to see the demo.

Project IMCE

IMCE is an image/file uploader and browser that supports personal directories and quota. It is a Drupal module and does not work stand-alone.

IMCE can easily be integrated into any WYSIWYG editor or any web application that needs a file browser.

You can visit the demo page to see the working examples.

BUEditor CSS Syntax Highlighter

CSS syntax highlighter uses and extends the HTML syntax highlighter. It defines a new method that highlights CSS Code, which can be used in CSS Injector's textareas.

Flickr Button for BUEditor

Flickr module provides a filter for inserting photos and photosets into your content. This Flickr button here provides an UI for inserting Flickr filter syntax.

Note that, you must enable flickr filter for your content's input format in order to see the photos.

Text Color Button for BUeditor

This button implements a color palette and displays it in a pop-up for the user to choose among predefined colors. In addition to coloring text, it can also be modified to insert other CSS color properties such as background-color.

Video Filter Button for BUEditor

Video filter module is a highly flexible filter module that allows embedding any type of video in your site content.

You can embed a video from any of the following services: Blip.tv, Capped.tv, College Humor, DailyMotion, Eyespot, Flickr Video, Flickr Slideshows, Gametrailers, Gamevideos, Google Video, Metacafe, Myspace, Picasa, Revver, Slideshare, Tangle, Vimeo, YouTube.

Note that, you must enable video filter for your content's input format in order to see the embedded video.

Class Attribute Library

This library defines editor methods for handling HTML class attribute. Class names of HTML objects can easily be get, set, and toggled.

The demo shows how you can define class toggling button in a simple way.

Style Attribute Library

This library defines editor methods for handling HTML style attribute. CSS properties of HTML objects can easily be get, set, and toggled.

The demo shows how you can define alignment buttons in a simple way.

BUEditor Auto-complete Box

ACBox library implements an autocomplete box that can be used in tag completion, function completion or any other auto-complete purposes. When a box triggering string is typed in the textarea, the corresponding ACBox appears at the cursor position. It contains some predefined choices that can be navigated and selected by keyboard or by mouse.

ACBox comes with a predefined box suggesting some HTML tags. Try the demo by typing  

Cursor Position (offset) in BUEditor

BUEditor has the API for finding selection position regarding the characters typed in the textarea. Using E.posSelection() method one can easily find the character position of the selection start and selection end.

How about the cursor offset(absolute position) in pixels? What if we want to display a box at the cursor position?

The only browser having native support for cursor offset is Internet Explorer. It supports offsetLeft and offsetTop properties for the selection range. Other browsers needs some tricky implementations to support it. For BUEditor users there is the seloffset library as a cross-browser solution to the problem.

You can test it in the demo by moving the cursor around or see the ACBox for a practical example.

Under supervision of Drupal :)