JavaScript DHTML/YUI Library/RichText Editor — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 07:29, 26 мая 2010
Содержание
- 1 Add a button to Rich Text Editor"s Toolbar that displays an Overlay Control with a list of icon images.
- 2 Add a button to Rich Text Editor"s Toolbar to display a Calendar Control
- 3 Create a Code Editor using the Rich Text Editor (using HTML markup)
- 4 Custom resizing for the Rich Text Editor
- 5 Editor � Advanced Buttons
- 6 Editor with Custom Image Browser
- 7 One editor, multiple edit areas
- 8 Provides a new button in the Editor toolbar that opens a custom panel.
- 9 Toggle from a plain text field to the Rich Text Editor with a simple button click.
- 10 Use the Editor Control with Basic Buttons.
- 11 Use the SimpleEditor Control with Basic Buttons.
- 12 Using the autoHeight config to make the Editor change it"s height based on the content.
Add a button to Rich Text Editor"s Toolbar that displays an Overlay Control with a list of icon images.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Icon Insertion</h1>
<div class="exampleIntro">
<p>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.</p>
<p>Click the Icon button (<img src="yui_2.7.0b-assets/editor-assets/suits_default.gif">) in the toolbar to display the Overlay.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<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.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</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("<div id="iconMenu">" + str + "</div>");
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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Calendar Plugin</h1>
<div class="exampleIntro">
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<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. <font face="Times New Roman">This is some more test text. This is some more <b>test <i>text</i></b></font>. 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("<div id="cal1Container"></div>");
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 = " <span class="date">" + (ev.calDate.getMonth() + 1)
+ "/" + ev.calDate.getDate()
+ "/" + ev.calDate.getFullYear() + "</span> ";
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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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)
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Code Editor</h1>
<div class="exampleIntro">
<p>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.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<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.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Custom resizing for the Rich Text Editor</h1>
<div class="exampleIntro">
<p>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>.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<style>
#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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:18 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Simple Editor — Advanced Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates how to use the SimpleEditor Control with Advanced Buttons.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<form method="post" action="#" id="form1">
<textarea id="editor" name="editor" rows="20" cols="75">
This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Editor with Custom Image Browser</h1>
<div class="exampleIntro">
<p>This example will show how to open an "Image Browser" for the YUI Rich Text Editor.</p>
<p><strong>Note</strong>: The "Image Browser" window will probably be blocked by your popup blocker.</p>
<p>Now, click on the "Insert Image" icon (the one outlined in blue) to see the "Image Browser" window.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<p>Double click any of the areas below to edit it"s content. Then click the collapse button in the toolbar to remove the editor.</p>
<div id="editable_cont">
<div class="editable">#1. Double click me to edit the contents</div>
<div class="editable">#2. Double click me to edit the contents</div>
<div class="editable">#3. Double click me to edit the contents</div>
<div class="editable">#4. Double click me to edit the contents</div>
<div class="editable">#5. Double click me to edit the contents</div>
<div class="editable">#6. Double click me to edit the contents</div>
</div>
<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>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Flickr Image Search</h1>
<div class="exampleIntro">
<p>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.</p>
<p>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.</p>
<p>A selected image will be inserted into the Editor for ease of use.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<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. <font face="Times New Roman">This is some more test text. This is some more <b>test <i>text</i></b></font>. 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("<h2>Flickr Image Search</h2><label for="flikr_search">Tag:</label><input type="text" value="" id="flickr_search"><div id="flickr_results"><p>Enter flickr tags into the box above, separated by commas. Be patient, this example my take a few seconds to get the images..</p></div>" + 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"><br>";
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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Plain Text Switcher</h1>
<div class="exampleIntro">
<p>This example demonstrates how to toggle from a plain text field to the Rich Text Editor with a simple button click.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<style>
#toggleEditor {
margin: 1em;
}
</style>
<button type="button" id="toggleEditor">Toggle Editor</button><br>
<form method="post" action="#" id="form1">
<textarea id="editor" name="editor" rows="20" cols="75">
This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</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(/<br>/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, "<br>"));
}
});
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Editor — Basic Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates how to use the Editor Control with Basic Buttons.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<form method="post" action="#" id="form1">
<textarea id="editor" name="editor" rows="20" cols="75">
This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Simple Editor — Basic Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates how to use the SimpleEditor Control with Basic Buttons.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<form method="post" action="#" id="form1">
<textarea id="editor" name="editor" rows="20" cols="75">
This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Editor Auto Adjusting Height</h1>
<div class="exampleIntro">
<p>Using the autoHeight config to make the Editor change it"s height based on the content.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<style>
</style>
<form method="post" action="#" id="form1">
<textarea id="editor" name="editor" rows="20" cols="75">
This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:14 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
