See also the BBCode Editor
Define your custom button:
TitleContentCaption

DEFAULT BUTTONS:

Insert/edit image: Inserts image html after getting the src, width, height, alt attributes from the user. If IMCE module is installed, and the user has access to it, a Browse button will appear linking to IMCE image browser. Editing a previously inserted image is possible if the html code of the image is selected with no extra characters.

Insert/edit link: Inserts link html after getting the href, title attributes from the user. If IMCE module is installed, and the user has access to it, a Browse button will appear linking to IMCE file browser. Editing a previously inserted link is possible if the html code of the link is selected with no extra characters.

Bold: Encloses the selected text with the tag <strong>

Italic: Encloses the selected text with the tag <em>

Headers: Inserts header tags <hX>(New in 6.x)

Ordered list: Converts the lines in the selected text to a numbered list. It is also possible to start a new list with no selection. If the selection is a list which was previosly created by this button, the lines in the text are restored.

Unordered list: Converts the lines in the selected text to a bulleted list. It is also possible to start a new list with no selection.

Teaser break: Inserts Drupal teaser break which is <!--break-->

Preview: Previews textarea content. Lines and paragraphs break automatically as in Drupal preview. Set first argument to true to preview pure html. Set second argument to true to preview only the selected text:
eDefPreview(true);//no conversion of new lines. preview is based on pure HTML.
eDefPreview(false, true);//only the selection is previewed.

Help: Displays the title(hint) for each button in the editor.

slick

I like this alot. Drupal needs a dedicated editor, not some overbuilt stock dropin component.

What about putting a menu tree browser in "insert link"?

thanks

i'm planning to open a "button contributions" section in this site to allow users share their custom buttons with others. Would you contribute with a link button having a menu tree browser in it? :)

selam, editorde image

selam, editorde image buttonuna align ozelligi eklemek istedim ama butun button uctu gitti, zahmet olmazsa image buttonuna yapistirilacak kodu (align ozelligi ile olursa harika olur) tumuyle verebilir misiniz?

tesekkurler, kolay gelsin

editorun en son surumundeki

editorun en son surumundeki resim butonu su sekilde:

php:
$imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';

return
"js:
var B = eDefBrowseButton('
$imce_url', 'attr_src', 'Browse', 'image');
var form = [
{name: 'src', title: 'Image URL', suffix: B},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text'},
];
eDefTagDialog('img', form, 'Insert/edit image', 'OK');
"
;

Tips & Tricks bölümünde align in nasil eklenecegi anlatiliyor.

Can this editor handle

Can this editor handle javascripts? I love the idea of being able to add your own custom prefix/suffix but is this editor compatible with CCK fields? This would indeed save a lot of time for repetitive entries like wiki reference links, affiliate codes. embedded videos from sites like youtube..etc... That would be amazing if it was. Not that it's not amazing as it is. lol

Thanks for the demo. Looking forward to answers to my questions.

Jon

you can create js buttons.

you can create js buttons. try inserting js: alert('hi'); into the custom button content above.
you can integrate the editor into any textarea including cck fields.

I'm new to Drupal, trying to

I'm new to Drupal, trying to find my way around, especially interested in Turkish contributions.
Yours is a great work, clean and neat. Admired a lot.
A small wish list:

  • Previex button's caption and title can alternate between Preview/T, depending on the "mode" of the editor.
  • More than one user defined buttons
  • An "Add button" combo to select/unselect the user defined buttons, only the selected/checked buttons shown on the menu.

Best wishes on your projects,
Sahin

Hi &mdash; Love the BUEditor

Hi — Love the BUEditor by the way...

Do you have any plans to add an "undo" button? I would like to educate a group of non-technical contributors on simple HTML markup, but they get nervous when they do something by mistake. An undo button would be a wonderful addition for noobs. (Yeah, they could hit back on their browser, but then they lose their edits.)

Thank you so much for making this project available!

Just curious why you did not

Just curious why you did not include more sensible default buttons such as align left, right, center, justify, etc. These are basic to any editor.

The html code produced by the

The html code produced by the default buttons should be accepted by the most used html filters. The image button might be considered as an exception to this.

I was wondering if this could

I was wondering if this could be used on a stand alone textarea to simply show code highlighting. I do not need to use any of the buttons. I would just like a textarea to show etc tags in color.

Is this possible? and if so how?

THANKS for the great work here.

You can delete the buttons.

You can delete the buttons. And for tag highlighting see HTML Syntax Highlighter

It can be initiated automatically with a template button(with title=tpl:)

js:
BUE.postprocess._myHighlightInit = function(E, $){
 
setTimeout(function(){E.highlight('html')});
};

I tried to install the syntax

I tried to install the syntax highlighter. I should note that I am not using this with Drupal. I am simply trying to get a textarea to show color for certain tags. I dont mind clicking a button for this functionality

I added these two scripts:
http://ufku.com/files/bueditor/library/bue.highlight.js
http://ufku.com/files/bueditor/library/bue.highlight.css

I then added to my js

(function($) {
   
BUE.hlighters = BUE.hlighters || {};

    var
cache = {};
    var
re = new RegExp('\\[(/?([a-z][a-z0-9]*)[^\\[\\]]*\\]?)', 'g');//bbcode start/end tag

    //BBCode syntax highlighter. Requires html highlighter.
   
BUE.hlighters.bbcode = function(str) {
      var
line, cached, RE = re;
      var
lines = str.split('\n'), len = lines.length, output = '';
     
//create output for each line and get/set strings from/to cache.
     
for (var i = 0; i < len; i++) {
       
line = lines[i];
       
cached = cache[line];
        if (
cached === undefined) {
         
cached = cache[line] = BUE.hlighters.html(line).replace(RE, '<span class="bue-hl-tag bue-hl-tag-$2">[$1</span>');
        }
       
output += cached;
      }
      return
output;
    };
    })(
jQuery);

   
js:
   
E.highlight(E.highlightOn ? false : 'bbcode');
   
E.stayClicked(E.highlightOn).focus();

   
js:
   
BUE.postprocess._myHighlightInit = function(E, $){
     
setTimeout(function(){E.highlight('html')});
    };

I am getting an error saying BUE is not defined.

Am I missing something?
Thanks.

Syntax highlighter requiires

Syntax highlighter requiires bueditor.js and you should edit it to get rid of Drupal dependency.

Would you be willing to send

Would you be willing to send me the file with the Drupal dependencies removed? I noticed that I can't simply remove the code that references drupal and I am not sure how else to proceed.

THANKS.

Sorry, you're on your own.

Sorry, you're on your own.

Under supervision of Drupal :)