oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui/examples/editor/skinning_editor.html
JT Smith ff7d72becc upgrade to yui 2.5.1
2008-03-25 16:13:25 +00:00

831 lines
35 KiB
HTML
Raw Blame History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Rich Text Editor (beta): Skinning the Editor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="../../build/editor/assets/skins/sam/editor.css" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/container/container-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<script type="text/javascript" src="../../build/editor/editor-beta-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p><em>
<a href="http://developer.yahoo.com">Yahoo! Developer Network Home</a> <i> - </i>
<a href="http://help.yahoo.com/help/us/ysearch">Help</a>
</em>
</p>
<form action="http://search.yahoo.com/search"><label for="ygsp">YDN Site Search</label>
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="fr" type="hidden" value="ush-myweb">
<input id="ygsp" name="va" size="22">
<input type="submit" value="Search" class="ygbt"></form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/yui.gif" border="0" width="378" height="28"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Rich Text Editor (beta): Skinning the Editor</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example">
<div class="promo">
<h1>Rich Text Editor (beta): Skinning the Editor</h1>
<div class="exampleIntro">
<p>Editor skinning is done via CSS. The Editor comes with a default skin, but you can extend or override this as needed.</p>
</div>
<div class="example-container module ">
<div id="example-canvas" class="bd">
<!--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: '530px',
animate: true,
dompath: true
};
var myEditor = new YAHOO.widget.Editor('editor', myConfig);
myEditor.render();
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<h2 class="first">Editor's core CSS file</h2>
<p>The editors base class is a starting point for skinning the Editor. Include this file and use the skin file as a reference for your new skin (<a href="../../build/editor/assets/editor-core.css">you can view the full contents of the base class here</a>).</p>
<h2>Sam's skin CSS file</h2>
<p>Once you have the base class in place, you can proceed to customize the look and feel of your Editor by working with the skinnning file. Starting with the Sam Skin version below is generally the fastest approach, allowing you to customize just those parts of the skin that will make your implementation resonate with the overall design of your application.</p>
<textarea name="code" class="CSS">
/* Place the border around the editor */
.yui-skin-sam .yui-editor-container {
border: 1px solid #808080;
}
/* Color the border of the container */
.yui-skin-sam .yui-toolbar-container {
zoom: 1;
}
/* Load the background image on the Toolbars titlebar */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar {
background: url(sprite.png) repeat-x 0 -200px;
position: relative;
}
/* Give the titlebar some color and padding */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar h2 {
color: #000000;
font-weight: bold;
margin: 0;
padding: 0.3em 1em;
font-size: 100%;
text-align: left;
}
/* Give the toolbars groups titles some color and padding */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-group h3 {
color: #808080;
font-size: 75%;
margin: 1em 0 0;
padding-bottom: 0;
padding-left: 0.25em;
text-align: left;
}
/* Hide all of the sepatators borders */
.yui-toolbar-container span.yui-toolbar-separator {
border: none;
text-indent: 33px;
overflow: hidden;
margin: .25em;
}
/* Background color of the toolbar */
.yui-skin-sam .yui-toolbar-container {
background-color: #F2F2F2;
}
/* Add some padding to the toolbars sub container */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-subcont {
padding: 0 1em 0.35em;
border-bottom:1px solid #808080;
}
/* When the collapsed class is added, add a border to the bottom of the titlebar (since the toolbar itself is display none) */
.yui-skin-sam .yui-toolbar-container-collapsed .yui-toolbar-titlebar {
border-bottom:1px solid #808080;
}
/* Remove the shadows from the menus in the toolbar - Menu.css override */
.yui-skin-sam .yui-editor-container .visible .yui-menu-shadow, .yui-skin-sam .yui-editor-panel .visible .yui-menu-shadow {
display: none;
}
/* Remove padding/margin from lists */
.yui-skin-sam .yui-editor-container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Remove padding/margin from list items */
.yui-skin-sam .yui-editor-container ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Float the LI's that wrap the buttons */
.yui-skin-sam .yui-toolbar-group ul li.yui-toolbar-groupitem {
float: left;
}
/* Set the color and the border of the dompath container at the bottom of the editor */
.yui-skin-sam .yui-editor-container .dompath {
background-color: #F2F2F2;
border-top:1px solid #808080;
color: #999;
text-align: left;
padding: 0.25em;
}
/* Set the image for the collapse button on the toolbar */
.yui-skin-sam .yui-toolbar-container .collapse {
background: url(sprite.png) no-repeat 0 -400px;
}
/* Position the image and the container */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar span.collapse {
cursor: pointer;
position: absolute;
top: 4px;
right: 2px;
display: block;
overflow: hidden;
height: 15px;
width: 15px;
text-indent: 9999px;
}
/* Set the default styles for the buttons */
.yui-skin-sam .yui-toolbar-container .yui-push-button,
.yui-skin-sam .yui-toolbar-container .yui-color-button,
.yui-skin-sam .yui-toolbar-container .yui-menu-button {
background: url(sprite.png) repeat-x 0 0;
position: relative;
display: block;
height: 22px;
width: 30px;
margin: 0;
border-color: #808080;
border-style: solid;
border-width: 1px 0;
}
/* Set the height of the buttons and pad them on the left for the icon */
.yui-skin-sam .yui-toolbar-container .yui-push-button a,
.yui-skin-sam .yui-toolbar-container .yui-color-button a,
.yui-skin-sam .yui-toolbar-container .yui-menu-button a {
padding-left: 35px;
height: 20px;
text-decoration: none;
font-size: 93%;
line-height: 2;
display: block;
color: #000000;
overflow: hidden;
}
/* Set the height of the buttons and pad them on the left for the icon */
.yui-skin-sam .yui-toolbar-container .yui-push-button .first-child,
.yui-skin-sam .yui-toolbar-container .yui-color-button .first-child,
.yui-skin-sam .yui-toolbar-container .yui-menu-button .first-child {
border-color: #808080;
border-style: solid;
border-width: 0 1px;
margin: 0 -1px;
display: block;
}
.yui-skin-sam .yui-toolbar-container .yui-push-button-disabled .first-child,
.yui-skin-sam .yui-toolbar-container .yui-color-button-disabled .first-child,
.yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled .first-child {
border-color: #ccc;
}
.yui-skin-sam .yui-toolbar-container .yui-push-button-disabled a,
.yui-skin-sam .yui-toolbar-container .yui-color-button-disabled a,
.yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled a {
color: #A6A6A6;
cursor: default;
}
.yui-skin-sam .yui-toolbar-container .yui-push-button-disabled,
.yui-skin-sam .yui-toolbar-container .yui-color-button-disabled,
.yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled {
border-color: #ccc;
}
/* IE needs a little help positioning the first child */
.yui-skin-sam .yui-toolbar-container .yui-button .first-child {
*left: 0px;
}
/* Font Family Drop Down */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-fontname {
width: 135px;
}
/* Header Drop Down */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-heading {
width: 92px;
}
/* Handle the hover state of the buttons */
.yui-skin-sam .yui-toolbar-container .yui-button-hover {
background:url(sprite.png) repeat-x 0 -1300px;
border-color: #808080;
}
/* Handle the selected state of the buttons */
.yui-skin-sam .yui-toolbar-container .yui-button-selected {
background: url(sprite.png) repeat-x 0 -1700px;
border-color: #808080;
}
/* When the nogrouplabels class is applied, set the h3's to display none */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels h3 {
display: none;
}
/* When not showing the h3 group labels, add some margin to make up for them*/
.yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels .yui-toolbar-group {
margin-top: .75em;
}
/* Handle the icon placeholder for the buttons
This is very important - position of this must be absolute.
If it is not positioned absolute, IE will place it over the a in the Toolbar
Doing this will cause the editor to loose focus and loose the selection.
*/
.yui-skin-sam .yui-toolbar-container .yui-push-button span.yui-toolbar-icon,
.yui-skin-sam .yui-toolbar-container .yui-color-button span.yui-toolbar-icon,
.yui-skin-sam .yui-toolbar-container .yui-menu-button span.yui-toolbar-icon {
display: block;
position: absolute;
top: 2px;
height: 18px;
width: 18px;
overflow: hidden;
background: url(editor-sprite.gif) no-repeat 30px 30px;
}
/* Swap out the image to an active image */
.yui-skin-sam .yui-toolbar-container .yui-button-selected span.yui-toolbar-icon, .yui-skin-sam .yui-toolbar-container .yui-button-hover span.yui-toolbar-icon {
background-image: url(editor-sprite-active.gif);
}
/* Change the defaults to make them look more like the editor */
.yui-skin-sam .yui-toolbar-container .visible .yuimenuitemlabel {
cursor: pointer;
color: #000;
*position: relative;
}
/* Set the background color of all menu containers */
.yui-skin-sam .yui-toolbar-container .yui-button-menu {
background-color: #fff;
}
/* Set the background of all menu items that are selected */
.yui-skin-sam div.yuimenu li.selected {
background-color: #B3D4FF;
}
/* Set the color of the hrefs in a selected menu item */
.yui-skin-sam div.yuimenu li.selected a.selected {
color: #000;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-bold span.yui-toolbar-icon {
background-position: 0 0;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-italic span.yui-toolbar-icon {
background-position: 0 -36px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-underline span.yui-toolbar-icon {
background-position: 0 -72px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-subscript span.yui-toolbar-icon {
background-position: 0 -180px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-superscript span.yui-toolbar-icon {
background-position: 0 -144px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-forecolor span.yui-toolbar-icon {
background-position: 0 -216px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-backcolor span.yui-toolbar-icon {
background-position: 0 -288px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyleft span.yui-toolbar-icon {
background-position: 0 -324px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifycenter span.yui-toolbar-icon {
background-position: 0 -360px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyright span.yui-toolbar-icon {
background-position: 0 -396px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyfull span.yui-toolbar-icon {
background-position: 0 -432px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-indent span.yui-toolbar-icon {
background-position: 0 -720px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-outdent span.yui-toolbar-icon {
background-position: 0 -684px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-createlink span.yui-toolbar-icon {
background-position: 0 -792px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-insertimage span.yui-toolbar-icon {
background-position: 1px -756px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-left span.yui-toolbar-icon {
background-position: 0 -972px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-right span.yui-toolbar-icon {
background-position: 0 -936px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-inline span.yui-toolbar-icon {
background-position: 0 -900px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-block span.yui-toolbar-icon {
background-position: 0 -864px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-bordercolor span.yui-toolbar-icon {
background-position: 0 -252px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-removeformat span.yui-toolbar-icon {
background-position: 0 -1080px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-hiddenelements span.yui-toolbar-icon {
background-position: 0 -1044px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-insertunorderedlist span.yui-toolbar-icon {
background-position: 0 -468px;
left: 5px;
}
/* Setting the background position of the sprite */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-insertorderedlist span.yui-toolbar-icon {
background-position: 0 -504px;
left: 5px;
}
/* Set the width of the spin buttons */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton,
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child {
width: 35px;
}
/* Pad the first child */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child a {
padding-left: 2px;
text-align: left;
}
/* Spin Buttons - Remove the icon holder, they don't need it */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton span.yui-toolbar-icon {
display: none;
}
/* Spin Buttons - Prep the arrows */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.up,
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.down {
right: 2px;
background: url(editor-sprite.gif) no-repeat 0 -1222px;
overflow: hidden;
height: 6px;
width: 7px;
min-height: 0;
padding: 0;
}
/* Spin Buttons - The up arrow */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.up {
top: 2px;
background-position: 0 -1222px;
}
/* Spin Buttons - The down arrow */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.down {
bottom: 2px;
background-position: 0 -1187px;
}
/* Handle plain Select Elements */
.yui-skin-sam .yui-toolbar-container select {
height: 22px;
border: 1px solid #808080;
}
/* Pad and align the Select Menus */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-select .first-child a {
padding-left: 5px;
text-align: left;
}
/* Set the icon of the select menu for the drop down arrow */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-select span.yui-toolbar-icon {
background: url( editor-sprite.gif ) no-repeat 0 -1144px;
overflow: hidden;
right: -2px;
top: 0px;
height: 20px;
}
/* Fix the color menu background if it's inside a Property Editor */
.yui-skin-sam .yui-editor-panel .yui-color-button-menu .bd {
background-color: transparent;
border: none;
width: 135px;
}
/* Place a border around the color menu */
.yui-skin-sam .yui-color-button-menu .yui-toolbar-colors {
border: 1px solid #808080;
}
/* Property Editor Panel styles */
.yui-skin-sam .yui-editor-panel {
padding: 0;
margin: 0;
border: none;
background-color: transparent;
overflow: visible;
}
/* Margins on the header of the Property Editor */
.yui-skin-sam .yui-editor-panel .hd {
margin: 10px 0 0;
padding: 0;
border: none;
}
/* Setup the background image on the title bar
We are styling the h3 instead if the div so we can make room
for the "knob" that floats on the top of the window.
*/
.yui-skin-sam .yui-editor-panel .hd h3 {
color: #000;
border: 1px solid #808080;
background: url(sprite.png) repeat-x 0 -200px;
width: 99%;
position: relative;
margin: 0;
padding: 3px 0 0 0;
font-size: 93%;
text-indent: 5px;
height: 20px;
}
/* Style the body of the Property Editor */
.yui-skin-sam .yui-editor-panel .bd {
background-color: #F2F2F2;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
width: 99%;
margin: 0;
padding: 0;
overflow: visible;
}
/* Remove the padding/margin on lists in the Property Editor */
.yui-skin-sam .yui-editor-panel ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Remove the padding/margin on list items in the Property Editor */
.yui-skin-sam .yui-editor-panel ul li {
margin: 0;
padding: 0;
}
/* IE is havig trouble with our menu sizes here */
.yui-skin-sam .yui-editor-panel .yuimenu {
/**width: 90px !important;*/
}
/* Remove the border from the toolbar's container and add some margin to it */
.yui-skin-sam .yui-editor-panel .yui-toolbar-container .yui-toolbar-subcont {
padding: 0;
border: none;
margin-top: 0.35em;
}
/* Set the width of the bordersize and bordertype menu buttons */
.yui-skin-sam .yui-editor-panel .yui-toolbar-bordersize, .yui-skin-sam .yui-editor-panel .yui-toolbar-bordertype {
width: 50px;
}
/* Form styling */
.yui-skin-sam .yui-editor-panel label {
display: block;
float: none;
padding: 4px 0;
margin-bottom: 7px;
}
/* Form styling */
.yui-skin-sam .yui-editor-panel label strong {
font-weight: normal;
font-size: 93%;
text-align: right;
padding-top: 2px;
}
/* Form styling */
.yui-skin-sam .yui-editor-panel label input {
width: 75%;
}
/* Form styling */
.yui-skin-sam .yui-editor-panel #createlink_target,
.yui-skin-sam .yui-editor-panel #insertimage_target {
width: auto;
margin-right: 5px;
}
/* Form styling */
.yui-skin-sam .yui-editor-panel .removeLink {
width: 98%;
}
/* Color the input yellow if it has the warning class applied */
.yui-skin-sam .yui-editor-panel label input.warning {
background-color: #FFEE69;
}
/* Style the titles of the toolbar groups */
.yui-skin-sam .yui-editor-panel .yui-toolbar-group h3 {
color: #000;
float: left;
font-weight: normal;
font-size: 93%;
margin: 5px 0 0 0;
padding: 0 3px 0 0;
text-align: right;
}
/* Style the header for the Height and Width boxes */
.yui-skin-sam .yui-editor-panel .height-width h3 {
margin: 3px 0 0 10px;
}
/* Style the height and width container */
.yui-skin-sam .yui-editor-panel .height-width {
margin: 3px 0 0 35px;
*margin-left: 14px;
width: 42%;
*width: 44%;
}
/* Give the border group a width */
.yui-skin-sam .yui-editor-panel .yui-toolbar-group-border {
width: 190px;
}
.yui-skin-sam .yui-editor-panel .no-button .yui-toolbar-group-border {
width: 210px;
}
/* Give the padding group a width */
.yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding {
width: 203px;
}
.yui-skin-sam .yui-editor-panel .no-button .yui-toolbar-group-padding {
width: 172px;
}
/* Fix some margins for the H3's */
.yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding h3 {
margin-left: 25px;
*margin-left: 12px;
}
/* Image Properties - Text flow container size */
.yui-skin-sam .yui-editor-panel .yui-toolbar-group-textflow {
width: 182px;
}
/* Remove the background image set in Panel.css */
.yui-skin-sam .yui-editor-panel .hd {
background: none;
}
/* Give the footer som color and a border */
.yui-skin-sam .yui-editor-panel .ft {
background-color: #F2F2F2;
border: 1px solid #808080;
border-top: none;
padding: 0;
margin: 0 0 2px 0;
}
/* Style the close button in the Property Editor */
.yui-skin-sam .yui-editor-panel .hd span.close {
background:url(sprite.png) no-repeat 0 -300px;
cursor:pointer;
display:block;
height:16px;
overflow:hidden;
position:absolute;
right:5px;
text-indent:500px;
top:2px;
width:26px;
}
/* Style the tip in the footer */
.yui-skin-sam .yui-editor-panel .ft span.tip {
background-color: #EDF5FF;
border-top: 1px solid #808080;
}
/* Style the tip in the footer */
.yui-skin-sam .yui-editor-panel .ft span.tip strong {
display: block;
float: left;
margin: 0 2px 8px 0;
}
/* Setup the icon for a tip */
.yui-skin-sam .yui-editor-panel .ft span.tip span.icon {
background: url( editor-sprite.gif ) no-repeat 0 -1260px;
display: block;
height: 20px;
left: 2px;
position: absolute;
top: 8px;
width: 20px;
}
/* Setup the background image for an info icon */
.yui-skin-sam .yui-editor-panel .ft span.tip span.icon-info {
background-position: 2px -1260px;
}
/* Setup the background image for a warning icon */
.yui-skin-sam .yui-editor-panel .ft span.tip span.icon-warn {
background-position: 2px -1296px;
}
/* Handle the knob that floats on top of the panel */
.yui-skin-sam .yui-editor-panel .hd span.knob {
position: absolute;
height: 10px;
width: 28px;
top: -10px;
left: 25px;
text-indent: 9999px;
overflow: hidden;
background: url( editor-knob.gif ) no-repeat 0 0;
}
/* Reset some styles from the editor toolbar, when a toolbar is inside the Property Editor */
.yui-skin-sam .yui-editor-panel .yui-toolbar-container {
float: left;
width: 100%;
background-image: none;
border: none;
}
/* Reset styles for menu buttons inside the Property Editor */
.yui-skin-sam .yui-editor-panel .yui-toolbar-container .bd {
background-color: #ffffff;
}
/* This image is the one used to place the blankimage placeholder into the editor when you click on Insert an Image */
.yui-editor-blankimage {
background-image: url( blankimage.png );
}
</textarea>
</div>
<div class="yui-u">
<div id="examples">
<h3 class='firstContent'>Rich Text Editor (beta) Examples:</h3>
<div id="exampleToc">
<ul>
<li><a href='../editor/flickr_editor.html'>Flickr Image Search</a></li><li><a href='../editor/cal_editor.html'>Calendar Plugin</a></li><li><a href='../editor/icon_editor.html'>Icon Insertion</a></li><li><a href='../editor/switch_editor.html'>Plain Text Switcher</a></li><li><a href='../editor/post_editor.html'>Editor Data Post with Connection Manager</a></li><li class='selected'><a href='../editor/skinning_editor.html'>Skinning the Editor</a></li><li><a href='../editor/toolbar_editor.html'>Default Toolbar Config</a></li><li><a href='../editor/code_editor.html'>Code Editor</a></li><li><a href='../editor/tabview_editor.html'>Editor inside a Tabview Control</a></li><li><a href='../editor/multi_editor.html'>One Editor, Multiple Edit Areas</a></li><li><a href='../editor/imagebrowser_editor.html'>Editor with Custom Image Browser</a></li><li><a href='../editor/simple_editor.html'>Simple Editor &mdash; Basic Buttons</a></li><li><a href='../editor/simple_adv_editor.html'>Simple Editor &mdash; Advanced Buttons</a></li><li><a href='../editor/editor_adv_editor.html'>Editor &mdash; Basic Buttons</a></li><li><a href='../editor/autoheight_editor.html'>Editor Auto Adjusting Height</a></li><li><a href='../resize/rte_resize.html'>Custom resizing for the Rich Text Editor (included with examples for Resize Utility (beta))</a></li><li><a href='../layout/calrte_layout.html'>Simple Application (included with examples for Layout Manager (beta))</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager (beta))</a></li> </ul>
</div>
</div>
<div id="module">
<h3>More Rich Text Editor (beta) Resources:</h3>
<ul>
<li><a href="http://developer.yahoo.com/yui/editor/">User's Guide</a> (external)</li>
<li><a href="../../docs/module_editor.html">API Documentation</a></li>
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/editor.pdf">Cheat Sheet PDF</a> (external)</li></ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts (experimental)</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie (beta)</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable (beta)</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper (beta)</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager (beta)</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler (beta)</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer (beta)</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize (beta)</a></li><li class="selected "><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor (beta)</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector (beta)</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader (beta)</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<script src='../../assets/YUIexamples.js'></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink