JavaScript DHTML/YUI Library/RichText Editor

Материал из Web эксперт
Перейти к: навигация, поиск

Add a button to Rich Text Editor"s Toolbar that displays an Overlay Control with a list of icon images.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Icon Insertion</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class="yui-skin-sam">

Icon Insertion

This example adds a button to the Rich Text Editor"s Toolbar that displays an <a href="http://developer.yahoo.ru/yui/container/overlay/">Overlay Control</a> with a list of icon images.

Click the Icon button (<img src="yui_2.7.0b-assets/editor-assets/suits_default.gif">) in the toolbar to display the Overlay.

<style> 

   .yui-skin-sam .yui-toolbar-container .yui-toolbar-inserticon span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/suits_default.gif );
       background-position: 1px 0px;
       left: 5px;
   }
   .yui-skin-sam .yui-toolbar-container .yui-button-insertdate-selected span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/suits_active.gif );
       background-position: 1px 0px;
       left: 5px;
   }
   #inserticon {
       border:1px solid #808080;
       padding:5px;
       background-color: #F2F2F2;
   }
   #inserticon a {
       display: block;
       float: left;
       border: 1px solid #F2F2F2;
   }
   #inserticon a:hover {
       border: 1px solid #808080;
   }

</style> <style> .yui-toolbar-group-insertitem { 

   *width: auto;

} </style> <form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
</textarea> </form> <script> (function() { 

   var myConfig = {
       height: "300px",
       width: "600px",
       animate: true,
       dompath: true,
       focusAtStart: true
   };
   YAHOO.log("Editor created..", "info", "example");
   myEditor = new YAHOO.widget.Editor("editor", myConfig);
   YAHOO.util.Event.onAvailable("iconMenu", function() {
       YAHOO.log("onAvailable: (#iconMenu)", "info", "example");
       YAHOO.util.Event.on("iconMenu", "click", function(ev) {
           var tar = YAHOO.util.Event.getTarget(ev);
           if (tar.tagName.toLowerCase() == "img") {
               var img = tar.getAttribute("src", 2);
               YAHOO.log("Found an icon, fire inserticonClick Event", "info", "example");
               var _button = this.toolbar.getButtonByValue("inserticon");
               _button._menu.hide();
               this.toolbar.fireEvent("inserticonClick", { type: "inserticonClick", icon: img });
           }
           YAHOO.util.Event.stopEvent(ev);
       }, myEditor, true);
   });

   myEditor.on("toolbarLoaded", function() { 
       YAHOO.log("Editor Toolbar Loaded..", "info", "example");
      
       var imgConfig = {
           type: "push", label: "Insert Icon", value: "inserticon",
           menu: function() {
               var menu = new YAHOO.widget.Overlay("inserticon", { width: "165px", height: "210px", visible: false });
               var str = "";
               for (var a = 0; a < 9; a++) {
                   for (var i = 1; i < 9; i++) {
                       str += "<a href="#"><img src="yui_2.7.0b-assets/editor-assets/suit" + i + ".gif" border="0"></a>";
                   }
               }
menu.setBody("
" + str + "
"); 
               menu.beforeShowEvent.subscribe(function() {
                   menu.cfg.setProperty("context", [myEditor.toolbar.getButtonByValue("inserticon").get("element"), "tl", "bl"]);
               });            
               menu.render(document.body);
               menu.element.style.visibility = "hidden";
               return menu;
           }()
       };
       YAHOO.log("Create the (inserticon) Button", "info", "example");
       myEditor.toolbar.addButtonToGroup(imgConfig, "insertitem");
       myEditor.toolbar.on("inserticonClick", function(ev) {
           YAHOO.log("inserticonClick Event Fired: " + YAHOO.lang.dump(ev), "info", "example");
           var icon = "";
           this._focusWindow();
           if (ev.icon) {
               icon = ev.icon;
           }
           this.execCommand("inserthtml", "<img src="" + icon + "" border="0">");
           return false;
       }, myEditor, true);
   });
   myEditor.render();

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Add a button to Rich Text Editor"s Toolbar to display a Calendar Control

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Calendar Plugin</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/calendar/assets/skins/sam/calendar.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/calendar/calendar-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class="yui-skin-sam">

Calendar Plugin

This example adds a button to the Rich Text Editor"s Toolbar that displays a <a href="http://developer.yahoo.ru/yui/calendar/">Calendar Control</a> for choosing dates. It also demonstrates how to manage the state of a custom button.

Click the Date button (<img src="yui_2.7.0b-assets/editor-assets/calendar_default.gif">) in the Toolbar to display the Calendar Control, then select a date and it will be placed inside the Editor.

You can also click on a date that has been inserted in the Editor and the Date button will enable. When the Date button is enabled and you click it the corresponding date will be selected in the Calendar Control when it is displayed.

<style> 

   .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertdate span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/calendar_default.gif );
       background-position: 1px 0px;
       left: 5px;
   }
   .yui-skin-sam .yui-toolbar-container .yui-button-insertdate-selected span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/calendar_active.gif );
       background-position: 1px 0px;
       left: 5px;
   }
   
   #insertdate {
       background-color: transparent;
   }

</style> <style> .yui-toolbar-group-insertitem { 

   *width: auto;

} </style> <form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. </textarea> </form> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       cal = null,
       selectedDate = null;
       var myConfig = {
           height: "300px",
           width: "600px",
           animate: true,
           dompath: true,
           focusAtStart: true
       };
   YAHOO.log("Creating Editor", "info", "example");
   var myEditor = new YAHOO.widget.Editor("editor", myConfig);
   myEditor.on("toolbarLoaded", function() { 
       YAHOO.log("Editor Toolbar loaded", "info", "example");
      
       var dateConfig = {
           type: "push", label: "Insert Date", value: "insertdate",
           menu: function() {
               var menu = new YAHOO.widget.Overlay("insertdate", {
                   width: "210px",
                   height: "220px",
                   xy: [-9000,-9000],
                   visible: false
               });
menu.setBody("
"); 
               menu.beforeShowEvent.subscribe(function() {
                   menu.cfg.setProperty("context", [
                       myEditor.toolbar.getButtonByValue("insertdate").get("element"),
                       "tl", "bl"
                       ]);
               });
               menu.showEvent.subscribe(function() {
                   cal.deselectAll();
                   Dom.removeClass(cal.cells, "selected");
                   if (selectedDate != null) {
                       cal.cfg.setProperty("selected", selectedDate);
                       cal.cfg.setProperty("pagedate", new Date(selectedDate), true);
                       selectedDate = null;
                   }
                   cal.render();
               });
               menu.render(document.body);
               menu.element.style.visibility = "hidden";                
               return menu;
           }()
       };
       YAHOO.log("Adding new button (insertdate) to toolbar", "info", "example");
       myEditor.toolbar.addButtonToGroup(dateConfig, "insertitem");
       myEditor.on("afterNodeChange", function() {
           var el = this._getSelectedElement();
           if (Dom.hasClass(el, "date") || Dom.hasClass(el.parentNode, "date")) {
               YAHOO.log("We found an element with the class of (date) select button", "info", "example");
               this.toolbar.selectButton(this.toolbar.getButtonByValue("insertdate"));
               if (Dom.hasClass(el.parentNode, "date")) {
                   selectedDate = el.parentNode.innerHTML;
               } else {
                   selectedDate = el.innerHTML;
               }
           }
           var _button = this.toolbar.getButtonByValue("insertdate");
           _button._menu.hide();
       }, myEditor, true);
       myEditor.toolbar.on("insertdateClick", function(ev) {
           YAHOO.log("insertdateClick: " + YAHOO.lang.dump(ev), "info", "example");
           var calDate = " " + (ev.calDate.getMonth() + 1)
               + "/" + ev.calDate.getDate()
               + "/" + ev.calDate.getFullYear() + " ";
           this.execCommand("inserthtml", calDate);
           var _button = this.toolbar.getButtonByValue("insertdate");
           _button._menu.hide();
       }, myEditor, true);
   });
   myEditor.render();
   Event.onAvailable("cal1Container", function() {
       YAHOO.log("Found (#cal1Container) - render the calendar", "info", "example");
       cal = new YAHOO.widget.Calendar("cal1", "cal1Container");
       cal.selectEvent.subscribe(function() {
           var calDate = cal.getSelectedDates()[0];
           YAHOO.log("Calendar selectEvent: (" + calDate + ")", "info", "example");
           this.toolbar.fireEvent("insertdateClick", { type: "insertdateClick", calDate: calDate });
       }, myEditor, true);
       cal.render();
   });

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Create a Code Editor using the Rich Text Editor (using HTML markup)

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Code Editor</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class="yui-skin-sam">

Code Editor

This example demonstrates how to create a Code Editor using the Rich Text Editor. As you begin typing, you"re in a standard Editor space. But if you click on the "code icon" &mdash the rightmost icon on the second row — you can begin using HTML markup. When you toggle the code editing mode back off, you"ll see rich text formatted with your HTML.

<style> 

   .yui-skin-sam .yui-toolbar-container .yui-toolbar-editcode span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/html_editor.gif );
       background-position: 0 1px;
       left: 5px;
   }
   .yui-skin-sam .yui-toolbar-container .yui-button-editcode-selected span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/html_editor.gif );
       background-position: 0 1px;
       left: 5px;
   }
   .editor-hidden {
       visibility: hidden;
       top: -9999px;
       left: -9999px;
       position: absolute;
   }
   textarea {
       border: 0;
       margin: 0;
       padding: 0;
   }

</style> <style> .yui-toolbar-group-insertitem { 

   *width: auto;

} </style> <form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
</textarea> </form> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   var myConfig = {
       height: "300px",
       width: "600px",
       animate: true,
       dompath: true,
       focusAtStart: true
   };
   var state = "off";
   YAHOO.log("Set state to off..", "info", "example");
   YAHOO.log("Create the Editor..", "info", "example");
   var myEditor = new YAHOO.widget.Editor("editor", myConfig);
   myEditor.on("toolbarLoaded", function() {
       var codeConfig = {
           type: "push", label: "Edit HTML Code", value: "editcode"
       };
       YAHOO.log("Create the (editcode) Button", "info", "example");
       this.toolbar.addButtonToGroup(codeConfig, "insertitem");
       
       this.toolbar.on("editcodeClick", function() {
           var ta = this.get("element"),
               iframe = this.get("iframe").get("element");
           if (state == "on") {
               state = "off";
               this.toolbar.set("disabled", false);
               YAHOO.log("Show the Editor", "info", "example");
               YAHOO.log("Inject the HTML from the textarea into the editor", "info", "example");
               this.setEditorHTML(ta.value);
               if (!this.browser.ie) {
                   this._setDesignMode("on");
               }
               Dom.removeClass(iframe, "editor-hidden");
               Dom.addClass(ta, "editor-hidden");
               this.show();
               this._focusWindow();
           } else {
               state = "on";
               YAHOO.log("Show the Code Editor", "info", "example");
               this.cleanHTML();
               YAHOO.log("Save the Editors HTML", "info", "example");
               Dom.addClass(iframe, "editor-hidden");
               Dom.removeClass(ta, "editor-hidden");
               this.toolbar.set("disabled", true);
               this.toolbar.getButtonByValue("editcode").set("disabled", false);
               this.toolbar.selectButton("editcode");
               this.dompath.innerHTML = "Editing HTML Code";
               this.hide();
           }
           return false;
       }, this, true);
       this.on("cleanHTML", function(ev) {
           YAHOO.log("cleanHTML callback fired..", "info", "example");
           this.get("element").value = ev.html;
       }, this, true);
       
       this.on("afterRender", function() {
           var wrapper = this.get("editor_wrapper");
           wrapper.appendChild(this.get("element"));
           this.setStyle("width", "100%");
           this.setStyle("height", "100%");
           this.setStyle("visibility", "");
           this.setStyle("top", "");
           this.setStyle("left", "");
           this.setStyle("position", "");
           this.addClass("editor-hidden");
       }, this, true);
   }, myEditor, true);
   myEditor.render();

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Custom resizing for the Rich Text Editor

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Custom resizing for the Rich Text Editor</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/simpleeditor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/simpleeditor-min.js"></script>

</head> <body class="yui-skin-sam">

Custom resizing for the Rich Text Editor

This example shows how to customize the Resize Utility for things like the <a href="http://developer.yahoo.ru/yui/editor/">Rich Text Editor Control</a>.

<style>

  1. editor_container .yui-resize-handle-br {
   height: 11px;
   width: 11px;
   background-position: -20px -60px;
   background-color: transparent;

} </style> <textarea id="editor"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. </textarea>

<script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       editor = null,
       resize = null;
   Event.onDOMReady(function() {
       editor = new YAHOO.widget.SimpleEditor("editor", {
           height: "300px",
           width: "522px",
           dompath: true,
           animate: true
       });
       editor.on("editorContentLoaded", function() {
           resize = new YAHOO.util.Resize(editor.get("element_cont").get("element"), {
               handles: ["br"],
               autoRatio: true,
               status: true,
               proxy: true,
               setSize: false //This is where the magic happens
           });
           resize.on("startResize", function() {
               this.hide();
               this.set("disabled", true);
           }, editor, true);
           resize.on("resize", function(args) {
               var h = args.height;
               var th = (this.toolbar.get("element").clientHeight + 2); //It has a 1px border..
               var dh = (this.dompath.clientHeight + 1); //It has a 1px top border..
               var newH = (h - th - dh);
               this.set("width", args.width + "px");
               this.set("height", newH + "px");
               this.set("disabled", false);
               this.show();
           }, editor, true);
       });
       editor.render();
   });

})();

</script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Editor � Advanced Buttons

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Simple Editor — Advanced Buttons</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/simpleeditor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/simpleeditor-min.js"></script>

</head> <body class=" yui-skin-sam">

Simple Editor — Advanced Buttons

This example demonstrates how to use the SimpleEditor Control with Advanced Buttons.

<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
</textarea> </form> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   var myConfig = {
       height: "300px",
       width: "600px",
       dompath: true,
       focusAtStart: true
   };
   YAHOO.log("Create the Editor..", "info", "example");
   var myEditor = new YAHOO.widget.SimpleEditor("editor", myConfig);
   myEditor._defaultToolbar.buttonType = "advanced";    
   myEditor.render();

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Editor with Custom Image Browser

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Editor with Custom Image Browser</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class=" yui-skin-sam">

Editor with Custom Image Browser

This example will show how to open an "Image Browser" for the YUI Rich Text Editor.

Note: The "Image Browser" window will probably be blocked by your popup blocker.

Now, click on the "Insert Image" icon (the one outlined in blue) to see the "Image Browser" window.

<style type="text/css" media="screen"> 

   #msgpost_container span.yui-toolbar-insertimage, #msgpost_container span.yui-toolbar-insertimage span.first-child {
       border-color: blue;
   }

</style> <textarea id="msgpost">This is a test</textarea> <script type="text/javascript"> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       win = null;
   var myEditor = new YAHOO.widget.Editor("msgpost", {
       height: "300px",
       width: "600px",
       dompath: true, //Turns on the bar at the bottom
       animate: true //Animates the opening, closing and moving of Editor windows
   });
   myEditor.on("toolbarLoaded", function() {
       //When the toolbar is loaded, add a listener to the insertimage button
       this.toolbar.on("insertimageClick", function() {
           //Get the selected element
           var _sel = this._getSelectedElement();
           //If the selected element is an image, do the normal thing so they can manipulate the image
           if (_sel && _sel.tagName && (_sel.tagName.toLowerCase() == "img")) {
               //Do the normal thing here..
           } else {
               //They don"t have a selected image, open the image browser window
               win = window.open("yui_2.7.0b-assets/editor-assets/browser.php", "IMAGE_BROWSER", "left=20,top=20,width=500,height=500,toolbar=0,resizable=0,status=0");
               if (!win) {
                   //Catch the popup blocker
                   alert("Please disable your popup blocker!!");
               }
               //This is important.. Return false here to not fire the rest of the listeners
               return false;
           }
       }, this, true);
   }, myEditor, true);
   myEditor.on("afterOpenWindow", function() {
       //When the window opens, disable the url of the image so they can"t change it
       var url = Dom.get("insertimage_url");
       if (url) {
           url.disabled = true;
       }
   }, myEditor, true);
   myEditor.render();

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


One editor, multiple edit areas

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>One editor, multiple edit areas</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script> <style> 

   .yui-editor-container {
       position: absolute;
       top: -9999px;
       left: -9999px;
       z-index: 999;
   }
   #editor {
       visibility: hidden;
       position: absolute;
   }
   .editable {
       border: 1px solid black;
       margin: .25em;
       float: left;
       width: 350px;
       height: 100px;
       overflow: auto;
   }

</style>

</head> <body class=" yui-skin-sam"> <textarea id="editor"></textarea>

Double click any of the areas below to edit it"s content. Then click the collapse button in the toolbar to remove the editor.

#1. Double click me to edit the contents
#2. Double click me to edit the contents
#3. Double click me to edit the contents
#4. Double click me to edit the contents
#5. Double click me to edit the contents
#6. Double click me to edit the contents

<script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       editing = null;
   
   YAHOO.log("Setup a stripped down config for the editor", "info", "example");
   var myConfig = {
       height: "150px",
       width: "380px",
       animate: true,
       toolbar: {
           titlebar: "My Editor",
           limitCommands: true,
           collapse: true,
           buttons: [
               { group: "textstyle", label: "Font Style",
                   buttons: [
                       { type: "push", label: "Bold", value: "bold" },
                       { type: "push", label: "Italic", value: "italic" },
                       { type: "push", label: "Underline", value: "underline" },
                       { type: "separator" },
                       { type: "select", label: "Arial", value: "fontname", disabled: true,
                           menu: [
                               { text: "Arial", checked: true },
                               { text: "Arial Black" },
                               { text: "Comic Sans MS" },
                               { text: "Courier New" },
                               { text: "Lucida Console" },
                               { text: "Tahoma" },
                               { text: "Times New Roman" },
                               { text: "Trebuchet MS" },
                               { text: "Verdana" }
                           ]
                       },
                       { type: "spin", label: "13", value: "fontsize", range: [ 9, 75 ], disabled: true },
                       { type: "separator" },
                       { type: "color", label: "Font Color", value: "forecolor", disabled: true },
                       { type: "color", label: "Background Color", value: "backcolor", disabled: true }
                   ]
               }
           ]
       }
   };
   YAHOO.log("Override the prototype of the toolbar to use a different string for the collapse button", "info", "example");
   YAHOO.widget.Toolbar.prototype.STR_COLLAPSE = "Click to close the editor.";
   YAHOO.log("Create the Editor..", "info", "example");
   myEditor = new YAHOO.widget.Editor("editor", myConfig);
   myEditor.on("toolbarLoaded", function() {
       YAHOO.log("Toolbar is loaded, add a listener for the toolbarCollapsed event", "info", "example");
       this.toolbar.on("toolbarCollapsed", function() {
           YAHOO.log("Toolbar was collapsed, reposition and save the editors data", "info", "example");
           Dom.setXY(this.get("element_cont").get("element"), [-99999, -99999]);
           Dom.removeClass(this.toolbar.get("cont").parentNode, "yui-toolbar-container-collapsed");
           myEditor.saveHTML();
           editing.innerHTML = myEditor.get("element").value;
           editing = null;
       }, myEditor, true);
   }, myEditor, true);
   myEditor.render();
   Event.on("editable_cont", "dblclick", function(ev) {
       var tar = Event.getTarget(ev);
       while(tar.id != "editable_cont") {
           if (Dom.hasClass(tar, "editable")) {
               YAHOO.log("An element with the classname of editable was double clicked on.", "info", "example");
               if (editing !== null) {
                   YAHOO.log("There is an editor open, save its data before continuing..", "info", "example");
                   myEditor.saveHTML();
                   editing.innerHTML = myEditor.get("element").value;
               }
               YAHOO.log("Get the XY position of the Element that was clicked", "info", "example");
               var xy = Dom.getXY(tar);
               YAHOO.log("Set the Editors HTML with the elements innerHTML", "info", "example");
               myEditor.setEditorHTML(tar.innerHTML);
               YAHOO.log("Reposition the editor with the elements xy", "info", "example");
               Dom.setXY(myEditor.get("element_cont").get("element"), xy);
               editing = tar;
           }
           tar = tar.parentNode;
       }
   });

})(); </script> </body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Provides a new button in the Editor toolbar that opens a custom panel.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Flickr Image Search</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class="yui-skin-sam">

Flickr Image Search

This example provides a new button (<img src="yui_2.7.0b-assets/editor-assets/flickr_default.gif">) in the toolbar that opens a custom panel.

This custom panel contains an <a href="http://developer.yahoo.ru/yui/autocomplete/">AutoComplete Control</a> that queries Flickr for tags and displays the images.

A selected image will be inserted into the Editor for ease of use.

<style> 

   .yui-skin-sam .yui-toolbar-container .yui-toolbar-flickr span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/flickr_default.gif );
       background-position: 1px 0px;
       left: 5px;
   }
   .yui-skin-sam .yui-toolbar-container .yui-toolbar-flickr-selected span.yui-toolbar-icon {
       background-image: url( yui_2.7.0b-assets/editor-assets/flickr_active.gif );
       background-position: 1px 0px;
       left: 5px;
   }
       #gutter1 {
           overflow: hidden;
           visibility: hidden;
           text-align: left;
       }
       #gutter1 .bd {
           border:1px solid #808080;
           border-left: none;
           background-color: #F2F2F2;
           height: 95%;
           overflow: hidden;
           width: 249px;
           margin-top: 10px;
           padding-left: .25em;
       }
       #gutter1 ul {
           list-style-type: none;
       }
       #gutter1 ul li {
           margin: 0;
           padding: 0;
           float:left;
           display:inline;
       }
       #gutter1 .bd h2 {
           font-size: 120%;
           font-weight: bold;
           margin: 0.5em 0;
           color: #000;
           border: none;
       }
       #gutter1 img {
           margin: 0 .5em;
           border:1px solid #808080;
           height: 50px;
           width: 50px;
       }
       #flickr_results {
           height: 75%;
           overflow: auto;
           position:static;
       }
       #flickr_results p {
           padding: .5em;
           margin-bottom: 1em;
       }
       #flickr_results div.yui-ac-content {
           width: 225px;
       }
       .yui-skin-sam .yui-ac-input {
           position: static;
           width: 12em;
       }
       #gutter1 .tip {
           display:block;
           font-size:85%;
           margin:0.5em;
           padding-left:23px;
           position:relative;
           text-align:left;
       }
       #gutter1 .tip span.icon-info {
           background-position:-106px -32px;
           background-image:url(css/sprite.png);
           background-position:-84px -32px;
           display:block;
           height:20px;
           left:0pt;
           position:absolute;
           top:0pt;
           width:20px;
       }

</style> <style> .yui-toolbar-group-insertitem { 

   *width: auto;

} </style> <form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. </textarea> </form> <script> /* Gutter Plugin */ (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   YAHOO.gutter = function() {
       return {
           status: false,
           gutter: null,
           createGutter: function() {
               YAHOO.log("Creating gutter (#gutter1)", "info", "example");
               this.gutter = new YAHOO.widget.Overlay("gutter1", {
                   height: "425px",
                   width: "300px",
                   context: [myEditor.get("element_cont").get("element"), "tl", "tr"],
                   position: "absolute",
                   visible: false
               });
               this.gutter.hideEvent.subscribe(function() {
                   myEditor.toolbar.deselectButton("flickr");
                   Dom.setStyle("gutter1", "visibility", "visible");                
                   var anim = new YAHOO.util.Anim("gutter1", {
                       width: {
                           from: 300,
                           to: 0
                       },
                       opacity: {
                           from: 1,
                           to: 0
                       }
                   }, 1);
                   anim.onComplete.subscribe(function() {  
                       Dom.setStyle("gutter1", "visibility", "hidden");
                   });
                   anim.animate();
               }, this, true);
               this.gutter.showEvent.subscribe(function() {
                   myEditor.toolbar.selectButton("flickr");
                   this.gutter.cfg.setProperty("context", [myEditor.get("element_cont").get("element"), "tl", "tr"]);
                   Dom.setStyle(this.gutter.element, "width", "0px");
                   var anim = new YAHOO.util.Anim("gutter1", {
                       width: {
                           from: 0,
                           to: 300
                       },
                       opacity: {
                           from: 0,
                           to: 1
                       }
                   }, 1);
                   anim.animate();
               }, this, true);
               var warn = "";
               if (myEditor.browser.webkit || myEditor.browser.opera) {
                   warn = myEditor.STR_IMAGE_COPY;
               }
this.gutter.setBody("

Flickr Image Search

<label for="flikr_search">Tag:</label><input type="text" value="" id="flickr_search">

Enter flickr tags into the box above, separated by commas. Be patient, this example my take a few seconds to get the images..

" + warn); 
               this.gutter.render(document.body);
           },
           open: function() {
               Dom.get("flickr_search").value = "";
               YAHOO.log("Show Gutter", "info", "example");
               this.gutter.show();
               this.status = true;
           },
           close: function() {
               YAHOO.log("Close Gutter", "info", "example");
               this.gutter.hide();
               this.status = false;
           },
           toggle: function() {
               if (this.status) {
                   this.close();
               } else {
                   this.open();
               }
           }
       }
   }

})();

YAHOO.util.Event.onAvailable("flickr_search", function() { 

   YAHOO.log("onAvailable: #flickr_search", "info", "example");
   YAHOO.util.Event.on("flickr_results", "mousedown", function(ev) {
       YAHOO.util.Event.stopEvent(ev);
       var tar = YAHOO.util.Event.getTarget(ev);
       if (tar.tagName.toLowerCase() == "img") {
           if (tar.getAttribute("fullimage", 2)) {
               YAHOO.log("Found an image, insert it..", "info", "example");
               var img = tar.getAttribute("fullimage", 2),
                   title = tar.getAttribute("fulltitle"),
                   owner = tar.getAttribute("fullowner"),
                   url = tar.getAttribute("fullurl");
               this.toolbar.fireEvent("flickrClick", { type: "flickrClick", img: img, title: title, owner: owner, url: url });
           }
       }
   }, myEditor, true);
   YAHOO.log("Create the Auto Complete Control", "info", "example");
   oACDS = new YAHOO.widget.DS_XHR("yui_2.7.0b-assets/editor-assets/flickr_proxy.php",
       ["photo", "title", "id", "owner", "secret", "server"]);
   oACDS.scriptQueryParam = "tags";
   oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
   oACDS.maxCacheEntries = 0;
   oACDS.scriptQueryAppend = "method=flickr.photos.search";
   // Instantiate AutoComplete
   oAutoComp = new YAHOO.widget.AutoComplete("flickr_search","flickr_results", oACDS);
   oAutoComp.autoHighlight = false;
   oAutoComp.alwaysShowContainer = true; 
   oAutoComp.formatResult = function(oResultItem, sQuery) {
       // This was defined by the schema array of the data source
       var sTitle = oResultItem[0];
       var sId = oResultItem[1];
       var sOwner = oResultItem[2];
       var sSecret = oResultItem[3];
       var sServer = oResultItem[4];
       var urlPart = "http:/"+"/static.flickr.ru/" + sServer + "/" + sId + "_" + sSecret;
       var sUrl = urlPart + "_s.jpg";
       var lUrl = urlPart + "_m.jpg";
       var fUrl = "http:/"+"/www.flickr.ru/photos/" + sOwner + "/" + sId;
       var sMarkup = "<img src="" + sUrl + "" fullimage="" + lUrl + "" fulltitle="" + sTitle + "" fullid="" + sOwner + "" fullurl="" + fUrl + "" class="yui-ac-flickrImg" title="Click to add this image to the editor">
";
       return (sMarkup);
   };

}); var gutter = null; var myConfig = { 

   height: "300px",
   width: "600px",
   animate: true,
   dompath: true,
   focusAtStart: true

}; YAHOO.log("Editor loaded..", "info", "example"); var myEditor = new YAHOO.widget.Editor("editor", myConfig); myEditor.on("toolbarLoaded", function() { 

   YAHOO.log("Toolbar loaded, add button and create gutter", "info", "example");
   gutter = new YAHOO.gutter();
   var flickrConfig = {
           type: "push",
           label: "Insert Flickr Image",
           value: "flickr"
   }
  
   myEditor.toolbar.addButtonToGroup(flickrConfig, "insertitem");
   myEditor.toolbar.on("flickrClick", function(ev) {
       YAHOO.log("flickrClick: " + YAHOO.lang.dump(ev), "info", "example");
       this._focusWindow();
       if (ev && ev.img) {
           YAHOO.log("We have an image, insert it", "info", "example");
           //To abide by the Flickr TOS, we need to link back to the image that we just inserted
           var html = "<a href="" + ev.url + ""><img src="" + ev.img + "" title="" + ev.title + ""></a>";
           this.execCommand("inserthtml", html);
       }
       gutter.toggle();
   }, myEditor, true);
   gutter.createGutter();

}); myEditor.render(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Toggle from a plain text field to the Rich Text Editor with a simple button click.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Plain Text Switcher</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class="yui-skin-sam">

Plain Text Switcher

This example demonstrates how to toggle from a plain text field to the Rich Text Editor with a simple button click.

<style> 

   #toggleEditor {
       margin: 1em;
   }

</style> <button type="button" id="toggleEditor">Toggle Editor</button>
<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
</textarea> </form> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   YAHOO.log("Create Button Control (#toggleEditor)", "info", "example");
   var _button = new YAHOO.widget.Button("toggleEditor");
   _button.addClass("toggleEditor");
   var myConfig = {
       height: "300px",
       width: "600px",
       animate: true,
       dompath: true,
       focusAtStart: true
   };
   var state = "on";
   YAHOO.log("Set state to on..", "info", "example");
   YAHOO.log("Create the Editor..", "info", "example");
   var myEditor = new YAHOO.widget.Editor("editor", myConfig);
   myEditor.render();
   _button.on("click", function(ev) {
       Event.stopEvent(ev);
       if (state == "on") {
           YAHOO.log("state is on, so turn off", "info", "example");
           state = "off";
           myEditor.saveHTML();
           YAHOO.log("Save the Editors HTML", "info", "example");
           var stripHTML = /<\S[^><]*>/g;
           myEditor.get("textarea").value = myEditor.get("textarea").value.replace(/
/gi, "\n").replace(stripHTML, "");
           YAHOO.log("Strip the HTML markup from the string.", "info", "example");
           YAHOO.log("Set Editor container to position: absolute, top: -9999px, left: -9999px. Set textarea visible", "info", "example");
           var fc = myEditor.get("element").previousSibling,
               el = myEditor.get("element");
           Dom.setStyle(fc, "position", "absolute");
           Dom.setStyle(fc, "top", "-9999px");
           Dom.setStyle(fc, "left", "-9999px");
           myEditor.get("element_cont").removeClass("yui-editor-container");
           Dom.setStyle(el, "visibility", "visible");
           Dom.setStyle(el, "top", "");
           Dom.setStyle(el, "left", "");
           Dom.setStyle(el, "position", "static");
       } else {
           YAHOO.log("state is off, so turn on", "info", "example");
           state = "on";
           YAHOO.log("Set Editor container to position: static, top: 0, left: 0. Set textarea to hidden", "info", "example");
           var fc = myEditor.get("element").previousSibling,
               el = myEditor.get("element");
           Dom.setStyle(fc, "position", "static");
           Dom.setStyle(fc, "top", "0");
           Dom.setStyle(fc, "left", "0");
           Dom.setStyle(el, "visibility", "hidden");
           Dom.setStyle(el, "top", "-9999px");
           Dom.setStyle(el, "left", "-9999px");
           Dom.setStyle(el, "position", "absolute");
           myEditor.get("element_cont").addClass("yui-editor-container");
           YAHOO.log("Reset designMode on the Editor", "info", "example");
           myEditor._setDesignMode("on");
           YAHOO.log("Inject the HTML from the textarea into the editor", "info", "example");
           myEditor.setEditorHTML(myEditor.get("textarea").value.replace(/\n/g, "
"));
       }
   });

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Use the Editor Control with Basic Buttons.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Editor — Basic Buttons</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class=" yui-skin-sam">

Editor — Basic Buttons

This example demonstrates how to use the Editor Control with Basic Buttons.

<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
</textarea> </form> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   var myConfig = {
       height: "300px",
       width: "600px",
       dompath: true,
       focusAtStart: true
   };
   YAHOO.log("Create the Editor..", "info", "example");
   var myEditor = new YAHOO.widget.Editor("editor", myConfig);
   myEditor._defaultToolbar.buttonType = "basic";
   myEditor.render();

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Use the SimpleEditor Control with Basic Buttons.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Simple Editor — Basic Buttons</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/simpleeditor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/simpleeditor-min.js"></script>

</head> <body class=" yui-skin-sam">

Simple Editor — Basic Buttons

This example demonstrates how to use the SimpleEditor Control with Basic Buttons.

<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
</textarea> </form> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   var myConfig = {
       height: "300px",
       width: "600px",
       dompath: true,
       focusAtStart: true
   };
   YAHOO.log("Create the Editor..", "info", "example");
   var myEditor = new YAHOO.widget.SimpleEditor("editor", myConfig);
   myEditor.render();

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Using the autoHeight config to make the Editor change it"s height based on the content.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Editor Auto Adjusting Height</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/editor-min.js"></script>

</head> <body class=" yui-skin-sam">

Editor Auto Adjusting Height

Using the autoHeight config to make the Editor change it"s height based on the content.

<style> </style> <form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
This is some more test text.
</textarea> </form> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   var myConfig = {
       height: "300px",
       width: "600px",
       animate: true,
       dompath: true,
       focusAtStart: true,
       autoHeight: true
   };
   YAHOO.log("Create the Editor..", "info", "example");
   var myEditor = new YAHOO.widget.Editor("editor", myConfig);
   myEditor.render();

})(); </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/RichText_Editor&oldid=4051»