 readme  id readmetxt v 121215 20100303 075726 ufku exp bueditor a plain textarea editor aiming to facilitate code writing it s the most flexible text editor of the web because it allows you to build the editor from scratch determine the functionality by defining image or text buttons that generate code snippets html tags bbcode tags etc determine the design and layout by defining theme buttons that insert html to the layout what s new 6x1x custom icon and library paths for each editor support using different editor templates for different textareas in a page alternative editor assignment for user roles theme buttons that provide unlimited theming options headings h1 h2 h3 h4 and separators in default editor changed key variable from editor to bue ex editoractive is now bueactive another popup dialog buequickpop that has no title or close button jquery effects ex effects in popup openings 6x2x css sprites for icons switchable under editor path settings bueditorjs got smaller new buttons for the default editor underline strikethrough quote code ability to extend editor instances via post process functions proper support for selection handling in opera open method of popups and dialogs now accepts dom or jquery objects as content new popup markup for better theming popup shortcuts enter link click esc close up down link navigation improved admin interface drag drop visual icon and key selector ability to include library files from different directories ability to include custom css files import export complete editor settings icons and libraries imce now opens in an editor pop up no need for php buttons to get imce url which is now stored in drupalsettingsbueimceurl or bueimceurl when the bueimce library is used new eprvajax method for live previewing html or nonhtml markup with the help of ajax markup module new optional library files bueautocompletejs enables ac inside textareas completes html bbcode tags by default buectrljs converts access keys into ctrl shortcuts buefindjs enables search and replace inside textareas depends on popup markup buehistoryjs crossbrowser undoredo for textareas buemarkupjs introduces html creating and parsing methods bueimcejs integrates imce file browser in a popup depends on popup buelijs auto inserts a list item when enter key is pressed at the end of a list item buemiscjs miscellaneous methods used in default editor depends on popup markup buepopupjs introduces editor popups edialog equickpop buepopupcss experimental css3 styling of editor popups buepreviewjs introduces preview methods eprv eprvajax buetabjs enables indent tab unindent shift tab and autoindent enter inside textareas buemindefaultjs minified sum of popup html preview imce and misc libraries bueminalljs minified sum of all libraries new quickimport templates bbcodebueditortxt bbcode editor having equivalent buttons of the default editor commenterbueditortxt simple editor having no library dependency defaultbueditortxt the default editor having various buttons inserting html labbueditortxt bueditor lab for experimental code how to install 1 copy editor directory to your modules sites all modules directory 2 enable the module at module administration page 3 add edit editors at admin settings bueditor 4 there is the default editor you can use as a starting point 5 you may install imce module to use it as a file image browser in editor s image link dialogs 6 make sure your input format does not filter the tags the editor inserts adding buttons you can add buttons to an editor by three methods 1 manually entering the values for new button fields located at the bottom of the button list 3 importing editor code php that contains buttons 2 importing a csv file that contains previously exported buttons deprecated exporting and deleting buttons you should first select the buttons you want to export or delete using checkboxes next to them then select the action you want to take in the selectbox below the list and press go button properties title required title or name of the button displayed as a hint on mouse over a title can be translated by prefixing it with t ex t bold turns into t bold if the title starts with tpl the button is considered a theme button see button types content html or javascript code that is processed when the button is clicked this can also be php code that is pre evaluated and return html or javascript code see button types icon image or text to display the button key accesskey that is supported by most browsers as a shortcut on web pages with the right key combinations users can fire the button s click event use alt key in internet explorer and shift alt key in firefox you can activate ctrl key by including the library buectrljs weight required for sorting the buttons lineup is from the lightest to the heaviest this is handled by dragging and dropping the button rows in the list button types there are three types of buttons regarding the content property 1 html buttons 2 javascript buttons 3 php buttons and a special type determined by the title prefix 4 theme buttons html buttons these are used for directly inserting plain text or html into the textarea it is possible to use the selected text in the textarea by using the place holder text for example assume that the button content is text and it is clicked after selecting the hello world text in the textarea then the result is hello world with the selection preserved multiple occurrences of text is possible and each will be replaced by the selected text these type of buttons are useful for simple html tags or other tag systems like bbcode note if you want to insert some text containing the phrase text use a javascript button javascript buttons these type of buttons are used for special cases where it is insufficient to just replace the selected text the content of a javascript button must begin with a 3 character text js to be differentiated from a html button the remaining code is treated as a javascript code and executed in a function when the button is clicked the function is called with the parameters e active editor and jquery editor has many readytouse methods and variables making it easy to create javascript buttons see editor variables and methods and especially editor instance variables and methods php buttons the content of a php button must begin with php the remaining code is pre evaluated at the server side and expected to return some code according to the return value of the php code the real type of the button is determined if the php code returns nothing or false the button is disabled and does not show up in the editor a php button is indeed a html or javascript button php execution is for some special purposes for example it is possible to disable or change the content of the button for a specific user role button with content php if useraccess access foo return js alert you have the permission to access foo turns into a javascript button having the returned content for users having access foo permission for others it is disabled and doesn t show up theme buttons a theme button is a special type of button that just inserts html into editor interface for theming purposes it can be used to insert separators line breaks or any html code in order to achieve the themed editor interface for a button to be considered a theme button it should have a title starting with tpl having this title the button is processed to insert a piece of html code that is included in button content and button icon or caption a theme button regarding its content can also be a js or php button at the same time in order to determine what the button inserts into the layout first content is checked and if it is javascript code js it is executed and the value that returned is inserted into the layout otherwise it is inserted as it is then icon or caption is checked and inserted as being wrapped in here are some examples title tpl content caption inserts line break title tpl content icon separatorpng inserts title tpl content caption or title tpl content inserts title tpl content js return new date inserts new date returned from javascript you can also create groups of buttons by creating wrappers around them title tpl content start wrapping by opening a div buttons of the group in between can be both theme buttons and functional buttons title tpl content end wrapping by closing the div editor properties and methods bue the top most container variable having other variables and methods in it buemode integer representing the selection handling mode 0 none 1 gecko and webkit 2 ie 3 opera buetemplates container for editor templates configurations buttons and interface bueinstances array containing the editor instances in the page bueactive currently active or last used editor instance when a button is clicked or a textarea is focused the corresponding editor instance becomes the bueactive if there are multiple editor instances accesskeys are switched to work on the bueactive bueactive is widely used in javascript buttons since the methods of the current editor instance are accessed using it each editor instance has its own variables and methods that can should be used by javascript buttons see editor instance bueprocesstextarea t tplid integrates the editor template buetemplates tplid into the textarea t this can be used for dynamic editor integration at any time after page load buepostprocess a list object of post process functions which are called with the parameters e editor instance and jquery just after instance creation buepostprocessyourprocessname function e extend alter the instance e buebuttonclick eindex bindex trigger click event of the button bueinstances eindex buttons bindex buetext text process text for standardizing the new line characters introduced by buepopup library buedialog dialog object of the editor used like a popup window for getting user input or displaying data buedialogopen title content effect opens the dialog with the given title and content in it optional effect parameter is one of the jquery effects slidedown or fadein see also the openpopup method below buedialogclose effect closes the dialog buequickpop another dialog object of the editor it has no title or close button it has its own variables and methods buequickpopopen content effect opens the quickpop with the content in it bueopenpopup id title content effect opens a popup having the given id titled as title and containing the content returns the js object representing the popup a html table object this popup object has its internal open title content effect and close effect methods which can be used for further opening and closing operations since popup object is a html table object it has all the methods and properties of a regular table the difference between a popup and editordialog is that editordialog can only have one instance visible at a time and it doesn t allow textarea editing when it is open optional effect parameter is one of the jquery effects opening slidedown fadein closing slideup fadeout or it can be a set of options effect jquery effect default show speed either milliseconds or one of the slow normal fast default normal offset position of the popup default top top offset of the active button left left offset of the active button onopen or callback function to be run after opening default internal function to focus on the popup onclose function to be after closing the popup default none buecreatepopup id title content this method is used by openpopup method creates and returns the popup object for further use does not open it editor instance each editor running on a textarea is called an instance editor instances have their own variables and methods that make it easy to edit textarea content active instance on the page can be accessed by the variable bueactive a js button s script is executed in a function with the argument e that refers to bueactive and the that refers to jquery here are the properties and variables of the istance e eindex index of the instance in the array bueinstances etextarea textarea of the instance as an html object esafetopreview initial state of html existance in the textarea etplid template id used by the editor etpl editor template that this instance uses one of buetemplates eui html object that wraps the instance interface ebuttons array of buttons of the instance as html objects input objects having the type button or image ebindex latest currently clicked button index that can be used in ebuttons ex ebuttons ebindex efocus focus on the textarea of the instance egetcontent returns the content of the textarea esetcontent text replaces the content of the textarea with the given text egetselection returns the selected text in the textarea ereplaceselection text cursor replace the selected text in the textarea with the given text the optional second argument specifies the position of the caret after replacement if cursor start it is placed at the beginning of the replaced text if cursor end it is placed at the end of the replaced text if cursor is not defined the selection is preserved containing the replaced text etagselection left right cursor encloses the selected text in the textarea with the given left and right texts the optional third argument specifies the position of the caret after enclosing if cursor start it is placed at the beginning of the selected text if cursor end it is placed at the end of the selected text if cursor is not defined the selection is preserved emakeselection start end create a selection by selecting the characters between the indexes start and end where end is optional eposselection returns the index values of selection start and selection end returns start x end y where x is the start index and y is the end index note no selection is also a selection where start end caret position ebuttonsdisabled state bindex dynamically enable disable buttons of the instance the first argument defines the state of the buttons and should be set to true or false the optional second argument defines the index of the button whose state will not change ex to disable all buttons except the pressed button js ebuttonsdisabled true ebindex estayclicked state bindex add remove stayclicked class to from a user defined button having the bindex this method is usually used to toggle a stayclicked effect on the active button without supplying the second argument editor icons all images with jpg gif or png extensions in the editor s icon path which is bueditorpath icons by default are accessible by the editor and they are listed in the icon list in the editor editing page editor library while creating a javascript button you may want to use functions or variables from an external javascript library in order to shorten the content text and make it clean or you may want to include some editor specific css files for theming purposes for all these you can use the library settings of the editor known issues accesskeys in internet explorer pressing an accesskey alt key when there is a selection deselects it preserving the caret position accesskeys in firefox if there are multiple editors in the page accesskeys shift alt key will work on only the first editor instance this is because ff does not allow dynamic adjustment of accesskeys ctrl shortcuts ctrl shortcuts are disabled in opera since it does not suppress the default ones do not use a select all c copy v paste x cut keys as they are text operation keys by default do not use f find o open p print keys in ie and safari as they will always fire their default actions new line character since new line is represented by different characters r r n n on different platforms there may be some unexpected behaviour of the editor in some platformbrowser combos regarding the cursor position after text insertion replacement specify new line characters as n if you have to use any in your scripts post variable limit although it s a rare case you may have to increase your server post variable limit if you have problems while adding too many buttons in admin interface default buttons bueditor comes with a few default buttons that may help you extend the editor 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 link url link text and title 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 italic encloses the selected text with the tag underline encloses the selected text with the tag strikethrough encloses the selected text with the tag headings pops a dialog showing h1 h2 h2 h4 h5 h6 heading tags to choose among quote encloses the selected text with the tag code encloses the selected text with the tag 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 an ordered list which was previously created by this button the lines in the text are restored unordered list converts the lines in the selected text to a bullet list it is also possible to start a new list with no selection if the selection is an unordered list which was previously created by this button the lines in the text are restored teaser break inserts drupal teaser break which is preview previews the textarea content by default lines and paragraphs break automatically help displays the title hint for each button in the editor tips and tricks how to extend image or link dialogs to get values for other attributes of img and a tags from the user how to create a dialog for any tag just like image or link dialogs there is the etagdialog tag fields options method introduced by default library to create a dialog for any tag tag tag name fields an array of attributes that are eiter strings or objects options object containing optional parameters title dialog title if not specified tag editor tag is used stitle label for submit button if not specified ok is used submit custom submit handler called with four parameters tag form options e validate custom validator called with four parameters tag form options e effect jquery effect slidedown or fadein the simplest form for example etagdialog div id class style html html is a special keyword that represents inner html will create a div tag dialog requesting values of attributes id class and style and also the inner html it will also detect if the current selection is a proper div tag and if so will put the values of attributes to the corresponding fields after submission it will enclose replace the selection in the textarea you might have noticed that fields in image link dialogs are declared as objects not as strings that s a customized form of declaring attributes it is ideal to use an object if you want a field type other than textfield type select options left left right right the default type is text and other supported types are select textarea hidden a custom label title image url a default value value some prefix or suffix text or html prefix suffix to join two fields in a single line like in image width height fields getnext true to set custom attributes for the field attributes size 10 style width 200px to force value entry required true note the field object must have a name property that specifies the attribute name ex name href if a field value has new a line character n in it then the field type automatically becomes textarea so lets add an align attribute field to the image dialog note that it s not xhtml compliant the field object to pass to etagdialog is name align required title image align if we don t set it it will be set as align automatically the name with the first letter uppercase type select we use a select box instead of a plain text field options left left right right center center structure is attributevalue visible value lets add it to the form in the image button s content var form name src title image url required true name width title width x height suffix x getnext true attributes size 3 name height attributes size 3 name alt title alternative text required true name align title image align type select options left left right right center center align etagdialog img form title insert edit image that s it we now have an image dialog which can also get set the align attribute of an image tag how to create a button that gets user input and adds it to the textarea if you want to use a complete form for user input then use the etagdialog method with a custom submit handler if you want to get just a single input you may consider using javascript prompt here is an example that gets image url as a user input js var url prompt url prompt for url var code put the url into the code ereplaceselection code replace the selection with the code how to extend the functionality of headings button to create a specialized tag chooser how to create an image chooser ie smiley chooser using etagchooser firstly we should understand what etagchooser does etagchooser tags options parameter tags an array of tag info each having the format tag title attributes tag the tag that will enclose the selected text in the textarea title the text or html to help the user choose this tag attributes attributes that will be inserted inside the tag ex id sitename class dark ex tags span red style color red span blue class bluetext this will create two options red inserting blue inserting parameter options an object containing the optional parameters it defaults to wrapeach li wrapall ul applytag true effect slidedown wrapeach the html tag that will enclose each option wrapall the html tag that will enclose the whole block of options applytag boolean allowing the user to preview the effect of the tag effect jquery effect slidedown or fadein knowing the details we can create our customized tag chooser let s for example add styled headings to the default header chooser js etagchooser h1 header1 h1 header1title class title this will insert  h2 header2 h2 header2title class title h3 header3 h4 header4 now let s create an image chooser there will be no title for our tags since we will use applytag to preview the image that will be inserted however we will be using a line break for every n 4 in our example image in order to create rows of options otherwise all of them will be placed in a single row js etagchooser img src pathtoimages img1png better to set also the width height alt attributes img src pathtoimages img2png img src pathtoimages img3png img src pathtoimages img4png line break added after 4th img src pathtoimages img5png img src pathtoimages img6png img src pathtoimages img7png img src pathtoimages img8png br after 8th img src pathtoimages img9png img src pathtoimages img10png wrapeach wrapall div while inserting a single tag should we use the classic text pattern or the etoggletag tag what is the difference between text and js etoggletag tag first of all the classic tag insertion method does not require any additional library whereas etoggletag is a part of the buemiscjs library classic method preserves the selected text after tag insertion whereas etoggletag selects the whole insertion classic method converts the selection foo to foo foo still being selected etoggletag tag converts the selection foo to foo foo is selected classic method doesn t parse the selection to check if it is an instance of the tag whereas etoggletag does and toggles it classic method converts the selection foo to foo etoggletag tag converts the selection foo to foo in classic method you define the attributes of the tag in the usual way whereas in etoggletag you pass them as an object text etoggletag tag class foo id bar in classic method it s possible to use the selected text for any purpose whereas in etoggletag the only goal is to html classic method can use the selection multiple times and do anything with it bbcode text bbcode text backward compatibility in 6x2x the default library was removed and all functions starting with edef are deprecated and new equivalents were implemented as either bueditor methods or editor instance methods in corresponding libraries below is the list of equivalents buemarkupjs edefhtml buehtml edefinput bueinput edefselectbox bueselectbox edeftable buetable edefrow buetrow edefnoend buenctag edefregesc bueregesc edefparsetag bueparsehtml edefinputtext function n v s return bueinput text n v size s null edefinputsubmit function n v return bueinput submit n v buepreviewjs edefautop bueautop edefpreview function bueactiveprv edefpreviewshow function e s w eprvshow s w edefpreviewhide function e eprvhide edefajaxpreview function bueactiveprvajax bueimcejs edefbrowsebutton function l f t return bueimcebutton f t buemiscjs edefselprocesslines edeftaglines function a b c d bueactivewraplines a b c d edefhelp function fx bueactivehelp fx edeftagdialog function a b c d e f bueactivetagdialog a b title c stitle d submit e effect f edeftaginsert function a b bueactivetgdsubmit a b edeftagger function a b c bueactivetoggletag a b c edeftagchooser function a b c d e bueactivetagchooser a applytag b wrapeach c wrapall d effect e  