upgrade to yui 2.5.1
806
www/extras/yui/examples/editor/assets/JSON.php
Normal file
|
|
@ -0,0 +1,806 @@
|
|||
<?php
|
||||
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
|
||||
|
||||
/**
|
||||
* Converts to and from JSON format.
|
||||
*
|
||||
* JSON (JavaScript Object Notation) is a lightweight data-interchange
|
||||
* format. It is easy for humans to read and write. It is easy for machines
|
||||
* to parse and generate. It is based on a subset of the JavaScript
|
||||
* Programming Language, Standard ECMA-262 3rd Edition - December 1999.
|
||||
* This feature can also be found in Python. JSON is a text format that is
|
||||
* completely language independent but uses conventions that are familiar
|
||||
* to programmers of the C-family of languages, including C, C++, C#, Java,
|
||||
* JavaScript, Perl, TCL, and many others. These properties make JSON an
|
||||
* ideal data-interchange language.
|
||||
*
|
||||
* This package provides a simple encoder and decoder for JSON notation. It
|
||||
* is intended for use with client-side Javascript applications that make
|
||||
* use of HTTPRequest to perform server communication functions - data can
|
||||
* be encoded into JSON notation for use in a client-side javascript, or
|
||||
* decoded from incoming Javascript requests. JSON format is native to
|
||||
* Javascript, and can be directly eval()'ed with no further parsing
|
||||
* overhead
|
||||
*
|
||||
* All strings should be in ASCII or UTF-8 format!
|
||||
*
|
||||
* LICENSE: Redistribution and use 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.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED ``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 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.
|
||||
*
|
||||
* @category
|
||||
* @package Services_JSON
|
||||
* @author Michal Migurski <mike-json@teczno.com>
|
||||
* @author Matt Knapp <mdknapp[at]gmail[dot]com>
|
||||
* @author Brett Stimmerman <brettstimmerman[at]gmail[dot]com>
|
||||
* @copyright 2005 Michal Migurski
|
||||
* @version CVS: $Id: JSON.php,v 1.1 2007/07/24 18:36:02 davglass Exp $
|
||||
* @license http://www.opensource.org/licenses/bsd-license.php
|
||||
* @link http://pear.php.net/pepr/pepr-proposal-show.php?id=198
|
||||
*/
|
||||
|
||||
/**
|
||||
* Marker constant for Services_JSON::decode(), used to flag stack state
|
||||
*/
|
||||
define('SERVICES_JSON_SLICE', 1);
|
||||
|
||||
/**
|
||||
* Marker constant for Services_JSON::decode(), used to flag stack state
|
||||
*/
|
||||
define('SERVICES_JSON_IN_STR', 2);
|
||||
|
||||
/**
|
||||
* Marker constant for Services_JSON::decode(), used to flag stack state
|
||||
*/
|
||||
define('SERVICES_JSON_IN_ARR', 3);
|
||||
|
||||
/**
|
||||
* Marker constant for Services_JSON::decode(), used to flag stack state
|
||||
*/
|
||||
define('SERVICES_JSON_IN_OBJ', 4);
|
||||
|
||||
/**
|
||||
* Marker constant for Services_JSON::decode(), used to flag stack state
|
||||
*/
|
||||
define('SERVICES_JSON_IN_CMT', 5);
|
||||
|
||||
/**
|
||||
* Behavior switch for Services_JSON::decode()
|
||||
*/
|
||||
define('SERVICES_JSON_LOOSE_TYPE', 16);
|
||||
|
||||
/**
|
||||
* Behavior switch for Services_JSON::decode()
|
||||
*/
|
||||
define('SERVICES_JSON_SUPPRESS_ERRORS', 32);
|
||||
|
||||
/**
|
||||
* Converts to and from JSON format.
|
||||
*
|
||||
* Brief example of use:
|
||||
*
|
||||
* <code>
|
||||
* // create a new instance of Services_JSON
|
||||
* $json = new Services_JSON();
|
||||
*
|
||||
* // convert a complexe value to JSON notation, and send it to the browser
|
||||
* $value = array('foo', 'bar', array(1, 2, 'baz'), array(3, array(4)));
|
||||
* $output = $json->encode($value);
|
||||
*
|
||||
* print($output);
|
||||
* // prints: ["foo","bar",[1,2,"baz"],[3,[4]]]
|
||||
*
|
||||
* // accept incoming POST data, assumed to be in JSON notation
|
||||
* $input = file_get_contents('php://input', 1000000);
|
||||
* $value = $json->decode($input);
|
||||
* </code>
|
||||
*/
|
||||
class Services_JSON
|
||||
{
|
||||
/**
|
||||
* constructs a new JSON instance
|
||||
*
|
||||
* @param int $use object behavior flags; combine with boolean-OR
|
||||
*
|
||||
* possible values:
|
||||
* - SERVICES_JSON_LOOSE_TYPE: loose typing.
|
||||
* "{...}" syntax creates associative arrays
|
||||
* instead of objects in decode().
|
||||
* - SERVICES_JSON_SUPPRESS_ERRORS: error suppression.
|
||||
* Values which can't be encoded (e.g. resources)
|
||||
* appear as NULL instead of throwing errors.
|
||||
* By default, a deeply-nested resource will
|
||||
* bubble up with an error, so all return values
|
||||
* from encode() should be checked with isError()
|
||||
*/
|
||||
function Services_JSON($use = 0)
|
||||
{
|
||||
$this->use = $use;
|
||||
}
|
||||
|
||||
/**
|
||||
* convert a string from one UTF-16 char to one UTF-8 char
|
||||
*
|
||||
* Normally should be handled by mb_convert_encoding, but
|
||||
* provides a slower PHP-only method for installations
|
||||
* that lack the multibye string extension.
|
||||
*
|
||||
* @param string $utf16 UTF-16 character
|
||||
* @return string UTF-8 character
|
||||
* @access private
|
||||
*/
|
||||
function utf162utf8($utf16)
|
||||
{
|
||||
// oh please oh please oh please oh please oh please
|
||||
if(function_exists('mb_convert_encoding')) {
|
||||
return mb_convert_encoding($utf16, 'UTF-8', 'UTF-16');
|
||||
}
|
||||
|
||||
$bytes = (ord($utf16{0}) << 8) | ord($utf16{1});
|
||||
|
||||
switch(true) {
|
||||
case ((0x7F & $bytes) == $bytes):
|
||||
// this case should never be reached, because we are in ASCII range
|
||||
// see: http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
return chr(0x7F & $bytes);
|
||||
|
||||
case (0x07FF & $bytes) == $bytes:
|
||||
// return a 2-byte UTF-8 character
|
||||
// see: http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
return chr(0xC0 | (($bytes >> 6) & 0x1F))
|
||||
. chr(0x80 | ($bytes & 0x3F));
|
||||
|
||||
case (0xFFFF & $bytes) == $bytes:
|
||||
// return a 3-byte UTF-8 character
|
||||
// see: http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
return chr(0xE0 | (($bytes >> 12) & 0x0F))
|
||||
. chr(0x80 | (($bytes >> 6) & 0x3F))
|
||||
. chr(0x80 | ($bytes & 0x3F));
|
||||
}
|
||||
|
||||
// ignoring UTF-32 for now, sorry
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* convert a string from one UTF-8 char to one UTF-16 char
|
||||
*
|
||||
* Normally should be handled by mb_convert_encoding, but
|
||||
* provides a slower PHP-only method for installations
|
||||
* that lack the multibye string extension.
|
||||
*
|
||||
* @param string $utf8 UTF-8 character
|
||||
* @return string UTF-16 character
|
||||
* @access private
|
||||
*/
|
||||
function utf82utf16($utf8)
|
||||
{
|
||||
// oh please oh please oh please oh please oh please
|
||||
if(function_exists('mb_convert_encoding')) {
|
||||
return mb_convert_encoding($utf8, 'UTF-16', 'UTF-8');
|
||||
}
|
||||
|
||||
switch(strlen($utf8)) {
|
||||
case 1:
|
||||
// this case should never be reached, because we are in ASCII range
|
||||
// see: http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
return $utf8;
|
||||
|
||||
case 2:
|
||||
// return a UTF-16 character from a 2-byte UTF-8 char
|
||||
// see: http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
return chr(0x07 & (ord($utf8{0}) >> 2))
|
||||
. chr((0xC0 & (ord($utf8{0}) << 6))
|
||||
| (0x3F & ord($utf8{1})));
|
||||
|
||||
case 3:
|
||||
// return a UTF-16 character from a 3-byte UTF-8 char
|
||||
// see: http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
return chr((0xF0 & (ord($utf8{0}) << 4))
|
||||
| (0x0F & (ord($utf8{1}) >> 2)))
|
||||
. chr((0xC0 & (ord($utf8{1}) << 6))
|
||||
| (0x7F & ord($utf8{2})));
|
||||
}
|
||||
|
||||
// ignoring UTF-32 for now, sorry
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* encodes an arbitrary variable into JSON format
|
||||
*
|
||||
* @param mixed $var any number, boolean, string, array, or object to be encoded.
|
||||
* see argument 1 to Services_JSON() above for array-parsing behavior.
|
||||
* if var is a strng, note that encode() always expects it
|
||||
* to be in ASCII or UTF-8 format!
|
||||
*
|
||||
* @return mixed JSON string representation of input var or an error if a problem occurs
|
||||
* @access public
|
||||
*/
|
||||
function encode($var)
|
||||
{
|
||||
switch (gettype($var)) {
|
||||
case 'boolean':
|
||||
return $var ? 'true' : 'false';
|
||||
|
||||
case 'NULL':
|
||||
return 'null';
|
||||
|
||||
case 'integer':
|
||||
return (int) $var;
|
||||
|
||||
case 'double':
|
||||
case 'float':
|
||||
return (float) $var;
|
||||
|
||||
case 'string':
|
||||
// STRINGS ARE EXPECTED TO BE IN ASCII OR UTF-8 FORMAT
|
||||
$ascii = '';
|
||||
$strlen_var = strlen($var);
|
||||
|
||||
/*
|
||||
* Iterate over every character in the string,
|
||||
* escaping with a slash or encoding to UTF-8 where necessary
|
||||
*/
|
||||
for ($c = 0; $c < $strlen_var; ++$c) {
|
||||
|
||||
$ord_var_c = ord($var{$c});
|
||||
|
||||
switch (true) {
|
||||
case $ord_var_c == 0x08:
|
||||
$ascii .= '\b';
|
||||
break;
|
||||
case $ord_var_c == 0x09:
|
||||
$ascii .= '\t';
|
||||
break;
|
||||
case $ord_var_c == 0x0A:
|
||||
$ascii .= '\n';
|
||||
break;
|
||||
case $ord_var_c == 0x0C:
|
||||
$ascii .= '\f';
|
||||
break;
|
||||
case $ord_var_c == 0x0D:
|
||||
$ascii .= '\r';
|
||||
break;
|
||||
|
||||
case $ord_var_c == 0x22:
|
||||
case $ord_var_c == 0x2F:
|
||||
case $ord_var_c == 0x5C:
|
||||
// double quote, slash, slosh
|
||||
$ascii .= '\\'.$var{$c};
|
||||
break;
|
||||
|
||||
case (($ord_var_c >= 0x20) && ($ord_var_c <= 0x7F)):
|
||||
// characters U-00000000 - U-0000007F (same as ASCII)
|
||||
$ascii .= $var{$c};
|
||||
break;
|
||||
|
||||
case (($ord_var_c & 0xE0) == 0xC0):
|
||||
// characters U-00000080 - U-000007FF, mask 110XXXXX
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$char = pack('C*', $ord_var_c, ord($var{$c + 1}));
|
||||
$c += 1;
|
||||
$utf16 = $this->utf82utf16($char);
|
||||
$ascii .= sprintf('\u%04s', bin2hex($utf16));
|
||||
break;
|
||||
|
||||
case (($ord_var_c & 0xF0) == 0xE0):
|
||||
// characters U-00000800 - U-0000FFFF, mask 1110XXXX
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$char = pack('C*', $ord_var_c,
|
||||
ord($var{$c + 1}),
|
||||
ord($var{$c + 2}));
|
||||
$c += 2;
|
||||
$utf16 = $this->utf82utf16($char);
|
||||
$ascii .= sprintf('\u%04s', bin2hex($utf16));
|
||||
break;
|
||||
|
||||
case (($ord_var_c & 0xF8) == 0xF0):
|
||||
// characters U-00010000 - U-001FFFFF, mask 11110XXX
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$char = pack('C*', $ord_var_c,
|
||||
ord($var{$c + 1}),
|
||||
ord($var{$c + 2}),
|
||||
ord($var{$c + 3}));
|
||||
$c += 3;
|
||||
$utf16 = $this->utf82utf16($char);
|
||||
$ascii .= sprintf('\u%04s', bin2hex($utf16));
|
||||
break;
|
||||
|
||||
case (($ord_var_c & 0xFC) == 0xF8):
|
||||
// characters U-00200000 - U-03FFFFFF, mask 111110XX
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$char = pack('C*', $ord_var_c,
|
||||
ord($var{$c + 1}),
|
||||
ord($var{$c + 2}),
|
||||
ord($var{$c + 3}),
|
||||
ord($var{$c + 4}));
|
||||
$c += 4;
|
||||
$utf16 = $this->utf82utf16($char);
|
||||
$ascii .= sprintf('\u%04s', bin2hex($utf16));
|
||||
break;
|
||||
|
||||
case (($ord_var_c & 0xFE) == 0xFC):
|
||||
// characters U-04000000 - U-7FFFFFFF, mask 1111110X
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$char = pack('C*', $ord_var_c,
|
||||
ord($var{$c + 1}),
|
||||
ord($var{$c + 2}),
|
||||
ord($var{$c + 3}),
|
||||
ord($var{$c + 4}),
|
||||
ord($var{$c + 5}));
|
||||
$c += 5;
|
||||
$utf16 = $this->utf82utf16($char);
|
||||
$ascii .= sprintf('\u%04s', bin2hex($utf16));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return '"'.$ascii.'"';
|
||||
|
||||
case 'array':
|
||||
/*
|
||||
* As per JSON spec if any array key is not an integer
|
||||
* we must treat the the whole array as an object. We
|
||||
* also try to catch a sparsely populated associative
|
||||
* array with numeric keys here because some JS engines
|
||||
* will create an array with empty indexes up to
|
||||
* max_index which can cause memory issues and because
|
||||
* the keys, which may be relevant, will be remapped
|
||||
* otherwise.
|
||||
*
|
||||
* As per the ECMA and JSON specification an object may
|
||||
* have any string as a property. Unfortunately due to
|
||||
* a hole in the ECMA specification if the key is a
|
||||
* ECMA reserved word or starts with a digit the
|
||||
* parameter is only accessible using ECMAScript's
|
||||
* bracket notation.
|
||||
*/
|
||||
|
||||
// treat as a JSON object
|
||||
if (is_array($var) && count($var) && (array_keys($var) !== range(0, sizeof($var) - 1))) {
|
||||
$properties = array_map(array($this, 'name_value'),
|
||||
array_keys($var),
|
||||
array_values($var));
|
||||
|
||||
foreach($properties as $property) {
|
||||
if(Services_JSON::isError($property)) {
|
||||
return $property;
|
||||
}
|
||||
}
|
||||
|
||||
return '{' . join(',', $properties) . '}';
|
||||
}
|
||||
|
||||
// treat it like a regular array
|
||||
$elements = array_map(array($this, 'encode'), $var);
|
||||
|
||||
foreach($elements as $element) {
|
||||
if(Services_JSON::isError($element)) {
|
||||
return $element;
|
||||
}
|
||||
}
|
||||
|
||||
return '[' . join(',', $elements) . ']';
|
||||
|
||||
case 'object':
|
||||
$vars = get_object_vars($var);
|
||||
|
||||
$properties = array_map(array($this, 'name_value'),
|
||||
array_keys($vars),
|
||||
array_values($vars));
|
||||
|
||||
foreach($properties as $property) {
|
||||
if(Services_JSON::isError($property)) {
|
||||
return $property;
|
||||
}
|
||||
}
|
||||
|
||||
return '{' . join(',', $properties) . '}';
|
||||
|
||||
default:
|
||||
return ($this->use & SERVICES_JSON_SUPPRESS_ERRORS)
|
||||
? 'null'
|
||||
: new Services_JSON_Error(gettype($var)." can not be encoded as JSON string");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* array-walking function for use in generating JSON-formatted name-value pairs
|
||||
*
|
||||
* @param string $name name of key to use
|
||||
* @param mixed $value reference to an array element to be encoded
|
||||
*
|
||||
* @return string JSON-formatted name-value pair, like '"name":value'
|
||||
* @access private
|
||||
*/
|
||||
function name_value($name, $value)
|
||||
{
|
||||
$encoded_value = $this->encode($value);
|
||||
|
||||
if(Services_JSON::isError($encoded_value)) {
|
||||
return $encoded_value;
|
||||
}
|
||||
|
||||
return $this->encode(strval($name)) . ':' . $encoded_value;
|
||||
}
|
||||
|
||||
/**
|
||||
* reduce a string by removing leading and trailing comments and whitespace
|
||||
*
|
||||
* @param $str string string value to strip of comments and whitespace
|
||||
*
|
||||
* @return string string value stripped of comments and whitespace
|
||||
* @access private
|
||||
*/
|
||||
function reduce_string($str)
|
||||
{
|
||||
$str = preg_replace(array(
|
||||
|
||||
// eliminate single line comments in '// ...' form
|
||||
'#^\s*//(.+)$#m',
|
||||
|
||||
// eliminate multi-line comments in '/* ... */' form, at start of string
|
||||
'#^\s*/\*(.+)\*/#Us',
|
||||
|
||||
// eliminate multi-line comments in '/* ... */' form, at end of string
|
||||
'#/\*(.+)\*/\s*$#Us'
|
||||
|
||||
), '', $str);
|
||||
|
||||
// eliminate extraneous space
|
||||
return trim($str);
|
||||
}
|
||||
|
||||
/**
|
||||
* decodes a JSON string into appropriate variable
|
||||
*
|
||||
* @param string $str JSON-formatted string
|
||||
*
|
||||
* @return mixed number, boolean, string, array, or object
|
||||
* corresponding to given JSON input string.
|
||||
* See argument 1 to Services_JSON() above for object-output behavior.
|
||||
* Note that decode() always returns strings
|
||||
* in ASCII or UTF-8 format!
|
||||
* @access public
|
||||
*/
|
||||
function decode($str)
|
||||
{
|
||||
$str = $this->reduce_string($str);
|
||||
|
||||
switch (strtolower($str)) {
|
||||
case 'true':
|
||||
return true;
|
||||
|
||||
case 'false':
|
||||
return false;
|
||||
|
||||
case 'null':
|
||||
return null;
|
||||
|
||||
default:
|
||||
$m = array();
|
||||
|
||||
if (is_numeric($str)) {
|
||||
// Lookie-loo, it's a number
|
||||
|
||||
// This would work on its own, but I'm trying to be
|
||||
// good about returning integers where appropriate:
|
||||
// return (float)$str;
|
||||
|
||||
// Return float or int, as appropriate
|
||||
return ((float)$str == (integer)$str)
|
||||
? (integer)$str
|
||||
: (float)$str;
|
||||
|
||||
} elseif (preg_match('/^("|\').*(\1)$/s', $str, $m) && $m[1] == $m[2]) {
|
||||
// STRINGS RETURNED IN UTF-8 FORMAT
|
||||
$delim = substr($str, 0, 1);
|
||||
$chrs = substr($str, 1, -1);
|
||||
$utf8 = '';
|
||||
$strlen_chrs = strlen($chrs);
|
||||
|
||||
for ($c = 0; $c < $strlen_chrs; ++$c) {
|
||||
|
||||
$substr_chrs_c_2 = substr($chrs, $c, 2);
|
||||
$ord_chrs_c = ord($chrs{$c});
|
||||
|
||||
switch (true) {
|
||||
case $substr_chrs_c_2 == '\b':
|
||||
$utf8 .= chr(0x08);
|
||||
++$c;
|
||||
break;
|
||||
case $substr_chrs_c_2 == '\t':
|
||||
$utf8 .= chr(0x09);
|
||||
++$c;
|
||||
break;
|
||||
case $substr_chrs_c_2 == '\n':
|
||||
$utf8 .= chr(0x0A);
|
||||
++$c;
|
||||
break;
|
||||
case $substr_chrs_c_2 == '\f':
|
||||
$utf8 .= chr(0x0C);
|
||||
++$c;
|
||||
break;
|
||||
case $substr_chrs_c_2 == '\r':
|
||||
$utf8 .= chr(0x0D);
|
||||
++$c;
|
||||
break;
|
||||
|
||||
case $substr_chrs_c_2 == '\\"':
|
||||
case $substr_chrs_c_2 == '\\\'':
|
||||
case $substr_chrs_c_2 == '\\\\':
|
||||
case $substr_chrs_c_2 == '\\/':
|
||||
if (($delim == '"' && $substr_chrs_c_2 != '\\\'') ||
|
||||
($delim == "'" && $substr_chrs_c_2 != '\\"')) {
|
||||
$utf8 .= $chrs{++$c};
|
||||
}
|
||||
break;
|
||||
|
||||
case preg_match('/\\\u[0-9A-F]{4}/i', substr($chrs, $c, 6)):
|
||||
// single, escaped unicode character
|
||||
$utf16 = chr(hexdec(substr($chrs, ($c + 2), 2)))
|
||||
. chr(hexdec(substr($chrs, ($c + 4), 2)));
|
||||
$utf8 .= $this->utf162utf8($utf16);
|
||||
$c += 5;
|
||||
break;
|
||||
|
||||
case ($ord_chrs_c >= 0x20) && ($ord_chrs_c <= 0x7F):
|
||||
$utf8 .= $chrs{$c};
|
||||
break;
|
||||
|
||||
case ($ord_chrs_c & 0xE0) == 0xC0:
|
||||
// characters U-00000080 - U-000007FF, mask 110XXXXX
|
||||
//see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$utf8 .= substr($chrs, $c, 2);
|
||||
++$c;
|
||||
break;
|
||||
|
||||
case ($ord_chrs_c & 0xF0) == 0xE0:
|
||||
// characters U-00000800 - U-0000FFFF, mask 1110XXXX
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$utf8 .= substr($chrs, $c, 3);
|
||||
$c += 2;
|
||||
break;
|
||||
|
||||
case ($ord_chrs_c & 0xF8) == 0xF0:
|
||||
// characters U-00010000 - U-001FFFFF, mask 11110XXX
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$utf8 .= substr($chrs, $c, 4);
|
||||
$c += 3;
|
||||
break;
|
||||
|
||||
case ($ord_chrs_c & 0xFC) == 0xF8:
|
||||
// characters U-00200000 - U-03FFFFFF, mask 111110XX
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$utf8 .= substr($chrs, $c, 5);
|
||||
$c += 4;
|
||||
break;
|
||||
|
||||
case ($ord_chrs_c & 0xFE) == 0xFC:
|
||||
// characters U-04000000 - U-7FFFFFFF, mask 1111110X
|
||||
// see http://www.cl.cam.ac.uk/~mgk25/unicode.html#utf-8
|
||||
$utf8 .= substr($chrs, $c, 6);
|
||||
$c += 5;
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return $utf8;
|
||||
|
||||
} elseif (preg_match('/^\[.*\]$/s', $str) || preg_match('/^\{.*\}$/s', $str)) {
|
||||
// array, or object notation
|
||||
|
||||
if ($str{0} == '[') {
|
||||
$stk = array(SERVICES_JSON_IN_ARR);
|
||||
$arr = array();
|
||||
} else {
|
||||
if ($this->use & SERVICES_JSON_LOOSE_TYPE) {
|
||||
$stk = array(SERVICES_JSON_IN_OBJ);
|
||||
$obj = array();
|
||||
} else {
|
||||
$stk = array(SERVICES_JSON_IN_OBJ);
|
||||
$obj = new stdClass();
|
||||
}
|
||||
}
|
||||
|
||||
array_push($stk, array('what' => SERVICES_JSON_SLICE,
|
||||
'where' => 0,
|
||||
'delim' => false));
|
||||
|
||||
$chrs = substr($str, 1, -1);
|
||||
$chrs = $this->reduce_string($chrs);
|
||||
|
||||
if ($chrs == '') {
|
||||
if (reset($stk) == SERVICES_JSON_IN_ARR) {
|
||||
return $arr;
|
||||
|
||||
} else {
|
||||
return $obj;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//print("\nparsing {$chrs}\n");
|
||||
|
||||
$strlen_chrs = strlen($chrs);
|
||||
|
||||
for ($c = 0; $c <= $strlen_chrs; ++$c) {
|
||||
|
||||
$top = end($stk);
|
||||
$substr_chrs_c_2 = substr($chrs, $c, 2);
|
||||
|
||||
if (($c == $strlen_chrs) || (($chrs{$c} == ',') && ($top['what'] == SERVICES_JSON_SLICE))) {
|
||||
// found a comma that is not inside a string, array, etc.,
|
||||
// OR we've reached the end of the character list
|
||||
$slice = substr($chrs, $top['where'], ($c - $top['where']));
|
||||
array_push($stk, array('what' => SERVICES_JSON_SLICE, 'where' => ($c + 1), 'delim' => false));
|
||||
//print("Found split at {$c}: ".substr($chrs, $top['where'], (1 + $c - $top['where']))."\n");
|
||||
|
||||
if (reset($stk) == SERVICES_JSON_IN_ARR) {
|
||||
// we are in an array, so just push an element onto the stack
|
||||
array_push($arr, $this->decode($slice));
|
||||
|
||||
} elseif (reset($stk) == SERVICES_JSON_IN_OBJ) {
|
||||
// we are in an object, so figure
|
||||
// out the property name and set an
|
||||
// element in an associative array,
|
||||
// for now
|
||||
$parts = array();
|
||||
|
||||
if (preg_match('/^\s*(["\'].*[^\\\]["\'])\s*:\s*(\S.*),?$/Uis', $slice, $parts)) {
|
||||
// "name":value pair
|
||||
$key = $this->decode($parts[1]);
|
||||
$val = $this->decode($parts[2]);
|
||||
|
||||
if ($this->use & SERVICES_JSON_LOOSE_TYPE) {
|
||||
$obj[$key] = $val;
|
||||
} else {
|
||||
$obj->$key = $val;
|
||||
}
|
||||
} elseif (preg_match('/^\s*(\w+)\s*:\s*(\S.*),?$/Uis', $slice, $parts)) {
|
||||
// name:value pair, where name is unquoted
|
||||
$key = $parts[1];
|
||||
$val = $this->decode($parts[2]);
|
||||
|
||||
if ($this->use & SERVICES_JSON_LOOSE_TYPE) {
|
||||
$obj[$key] = $val;
|
||||
} else {
|
||||
$obj->$key = $val;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} elseif ((($chrs{$c} == '"') || ($chrs{$c} == "'")) && ($top['what'] != SERVICES_JSON_IN_STR)) {
|
||||
// found a quote, and we are not inside a string
|
||||
array_push($stk, array('what' => SERVICES_JSON_IN_STR, 'where' => $c, 'delim' => $chrs{$c}));
|
||||
//print("Found start of string at {$c}\n");
|
||||
|
||||
} elseif (($chrs{$c} == $top['delim']) &&
|
||||
($top['what'] == SERVICES_JSON_IN_STR) &&
|
||||
((strlen(substr($chrs, 0, $c)) - strlen(rtrim(substr($chrs, 0, $c), '\\'))) % 2 != 1)) {
|
||||
// found a quote, we're in a string, and it's not escaped
|
||||
// we know that it's not escaped becase there is _not_ an
|
||||
// odd number of backslashes at the end of the string so far
|
||||
array_pop($stk);
|
||||
//print("Found end of string at {$c}: ".substr($chrs, $top['where'], (1 + 1 + $c - $top['where']))."\n");
|
||||
|
||||
} elseif (($chrs{$c} == '[') &&
|
||||
in_array($top['what'], array(SERVICES_JSON_SLICE, SERVICES_JSON_IN_ARR, SERVICES_JSON_IN_OBJ))) {
|
||||
// found a left-bracket, and we are in an array, object, or slice
|
||||
array_push($stk, array('what' => SERVICES_JSON_IN_ARR, 'where' => $c, 'delim' => false));
|
||||
//print("Found start of array at {$c}\n");
|
||||
|
||||
} elseif (($chrs{$c} == ']') && ($top['what'] == SERVICES_JSON_IN_ARR)) {
|
||||
// found a right-bracket, and we're in an array
|
||||
array_pop($stk);
|
||||
//print("Found end of array at {$c}: ".substr($chrs, $top['where'], (1 + $c - $top['where']))."\n");
|
||||
|
||||
} elseif (($chrs{$c} == '{') &&
|
||||
in_array($top['what'], array(SERVICES_JSON_SLICE, SERVICES_JSON_IN_ARR, SERVICES_JSON_IN_OBJ))) {
|
||||
// found a left-brace, and we are in an array, object, or slice
|
||||
array_push($stk, array('what' => SERVICES_JSON_IN_OBJ, 'where' => $c, 'delim' => false));
|
||||
//print("Found start of object at {$c}\n");
|
||||
|
||||
} elseif (($chrs{$c} == '}') && ($top['what'] == SERVICES_JSON_IN_OBJ)) {
|
||||
// found a right-brace, and we're in an object
|
||||
array_pop($stk);
|
||||
//print("Found end of object at {$c}: ".substr($chrs, $top['where'], (1 + $c - $top['where']))."\n");
|
||||
|
||||
} elseif (($substr_chrs_c_2 == '/*') &&
|
||||
in_array($top['what'], array(SERVICES_JSON_SLICE, SERVICES_JSON_IN_ARR, SERVICES_JSON_IN_OBJ))) {
|
||||
// found a comment start, and we are in an array, object, or slice
|
||||
array_push($stk, array('what' => SERVICES_JSON_IN_CMT, 'where' => $c, 'delim' => false));
|
||||
$c++;
|
||||
//print("Found start of comment at {$c}\n");
|
||||
|
||||
} elseif (($substr_chrs_c_2 == '*/') && ($top['what'] == SERVICES_JSON_IN_CMT)) {
|
||||
// found a comment end, and we're in one now
|
||||
array_pop($stk);
|
||||
$c++;
|
||||
|
||||
for ($i = $top['where']; $i <= $c; ++$i)
|
||||
$chrs = substr_replace($chrs, ' ', $i, 1);
|
||||
|
||||
//print("Found end of comment at {$c}: ".substr($chrs, $top['where'], (1 + $c - $top['where']))."\n");
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (reset($stk) == SERVICES_JSON_IN_ARR) {
|
||||
return $arr;
|
||||
|
||||
} elseif (reset($stk) == SERVICES_JSON_IN_OBJ) {
|
||||
return $obj;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @todo Ultimately, this should just call PEAR::isError()
|
||||
*/
|
||||
function isError($data, $code = null)
|
||||
{
|
||||
if (class_exists('pear')) {
|
||||
return PEAR::isError($data, $code);
|
||||
} elseif (is_object($data) && (get_class($data) == 'services_json_error' ||
|
||||
is_subclass_of($data, 'services_json_error'))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (class_exists('PEAR_Error')) {
|
||||
|
||||
class Services_JSON_Error extends PEAR_Error
|
||||
{
|
||||
function Services_JSON_Error($message = 'unknown error', $code = null,
|
||||
$mode = null, $options = null, $userinfo = null)
|
||||
{
|
||||
parent::PEAR_Error($message, $code, $mode, $options, $userinfo);
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
/**
|
||||
* @todo Ultimately, this class shall be descended from PEAR_Error
|
||||
*/
|
||||
class Services_JSON_Error
|
||||
{
|
||||
function Services_JSON_Error($message = 'unknown error', $code = null,
|
||||
$mode = null, $options = null, $userinfo = null)
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
BIN
www/extras/yui/examples/editor/assets/blankimage.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
63
www/extras/yui/examples/editor/assets/browser.php
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>YUI: Editor Image Browser</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
<style type="text/css" media="screen">
|
||||
#doc {
|
||||
min-width: 500px;
|
||||
width: 90%;
|
||||
}
|
||||
#images p {
|
||||
float: left;
|
||||
padding: 3px;
|
||||
margin: 3px;
|
||||
border: 1px solid black;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</head>
|
||||
<body class="yui-skin-sam">
|
||||
<div id="doc" class="yui-t7">
|
||||
<p>Click an image to place it in the Editor.</p>
|
||||
<div id="images">
|
||||
<p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/yui.jpg" title="Click me"></p>
|
||||
<p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg" title="Click me"></p>
|
||||
<p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg" title="Click me"></p>
|
||||
<p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg" title="Click me"></p>
|
||||
<p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg" title="Click me"></p>
|
||||
<p><img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg" title="Click me"></p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var Dom = YAHOO.util.Dom,
|
||||
Event = YAHOO.util.Event,
|
||||
myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById('msgpost');
|
||||
//Get a reference to the editor on the other page
|
||||
|
||||
//Add a listener to the parent of the images
|
||||
Event.on('images', 'click', function(ev) {
|
||||
var tar = Event.getTarget(ev);
|
||||
//Check to see if we clicked on an image
|
||||
if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'img')) {
|
||||
//Focus the editor's window
|
||||
myEditor._focusWindow();
|
||||
//Fire the execCommand for insertimage
|
||||
myEditor.execCommand('insertimage', tar.getAttribute('src', 2));
|
||||
//Close this window
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
//Internet Explorer will throw this window to the back, this brings it to the front on load
|
||||
Event.on(window, 'load', function() {
|
||||
window.focus();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</head>
|
||||
BIN
www/extras/yui/examples/editor/assets/calendar_active.gif
Normal file
|
After Width: | Height: | Size: 591 B |
BIN
www/extras/yui/examples/editor/assets/calendar_default.gif
Normal file
|
After Width: | Height: | Size: 591 B |
16
www/extras/yui/examples/editor/assets/exampleslib.inc
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?php
|
||||
function getRawEditorData($paramName) {
|
||||
if ($paramName) {
|
||||
if (isset($_POST[$paramName])) {
|
||||
return $_POST[$paramName];
|
||||
} else if (isset($_GET[$paramName])) {
|
||||
return $_GET[$paramName];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
BIN
www/extras/yui/examples/editor/assets/flickr_active.gif
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
www/extras/yui/examples/editor/assets/flickr_default.gif
Normal file
|
After Width: | Height: | Size: 277 B |
33
www/extras/yui/examples/editor/assets/flickr_proxy.php
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<?php
|
||||
// Yahoo! proxy
|
||||
|
||||
// Hard-code hostname and path:
|
||||
define ('PATH', 'http://www.flickr.com/services/rest/');
|
||||
|
||||
// Get all query params
|
||||
$query = "?";
|
||||
foreach ($_GET as $key => $value) {
|
||||
$query .= urlencode($key)."=".urlencode($value)."&";
|
||||
}
|
||||
|
||||
foreach ($_POST as $key => $value) {
|
||||
$query .= $key."=".$value."&";
|
||||
}
|
||||
$query .= "&api_key=30cc0cf363608a1ffa3fc1631854c8b8";
|
||||
$url = PATH.$query;
|
||||
|
||||
// Open the Curl session
|
||||
$session = curl_init($url);
|
||||
|
||||
// Don't return HTTP headers. Do return the contents of the call
|
||||
curl_setopt($session, CURLOPT_HEADER, false);
|
||||
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
|
||||
|
||||
// Make the call
|
||||
$response = curl_exec($session);
|
||||
|
||||
header("Content-Type: text/xml");
|
||||
echo $response;
|
||||
curl_close($session);
|
||||
|
||||
?>
|
||||
BIN
www/extras/yui/examples/editor/assets/html_editor.gif
Normal file
|
After Width: | Height: | Size: 610 B |
107
www/extras/yui/examples/editor/assets/post.php
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<?php
|
||||
header('Content-Type: application/json');
|
||||
|
||||
/* yadl_spaceid - Skip Stamping */
|
||||
include('exampleslib.inc');
|
||||
|
||||
|
||||
// Use Services_JSON
|
||||
require_once('JSON.php');
|
||||
$json = new Services_JSON();
|
||||
|
||||
//Aggressive filtering...
|
||||
$allow_tags = array(
|
||||
'b',
|
||||
'strong',
|
||||
'i',
|
||||
'em',
|
||||
'u',
|
||||
'a',
|
||||
'p',
|
||||
'sup',
|
||||
'sub',
|
||||
'div',
|
||||
'img',
|
||||
'span',
|
||||
'font',
|
||||
'br',
|
||||
'ul',
|
||||
'ol',
|
||||
'li'
|
||||
);
|
||||
|
||||
$filter = $_POST['filter'];
|
||||
$r_data = getRawEditorData('editor_data');
|
||||
$e_data = strip_tags($r_data, '<'.implode('><', $allow_tags).'>'); //Example
|
||||
|
||||
if ($filter == 'yes') {
|
||||
// Replace the words:
|
||||
$EditorData = fudd($e_data);
|
||||
$EditorData .= '<br><br>--<br>Footer added on server side after filter';
|
||||
} else {
|
||||
$EditorData = $e_data;
|
||||
}
|
||||
|
||||
//Create the payload JSON object to deliver back to the browser..
|
||||
$data = new stdclass();
|
||||
$data->Results = new stdclass();
|
||||
$data->Results->raw_data = $r_data;
|
||||
$data->Results->filter = $filter;
|
||||
$data->Results->status = 'OK';
|
||||
$data->Results->data = $EditorData;
|
||||
|
||||
echo($json->encode($data));
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Elmer Fudd filter code.
|
||||
* Plugin URI: http://dougal.gunters.org/blog/2004/08/30/text-filter-suite
|
||||
* Author: Dougal Campbell
|
||||
* Author URI: http://dougal.gunters.org/
|
||||
*/
|
||||
function filter_cdata_content($content, $filter='none') {
|
||||
if (function_exists($filter)) {
|
||||
$content = preg_replace_callback('/(?(?<=>)|\A)([^<>]+)(?(?=<)|\Z)/s', $filter, $content);
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
function fudd($content) {
|
||||
return filter_cdata_content($content,'fudd_filter');
|
||||
}
|
||||
|
||||
function array_apply_regexp($patterns,$content) {
|
||||
// Extract the values:
|
||||
$keys = array_keys($patterns);
|
||||
$values = array_values($patterns);
|
||||
|
||||
// Replace the words:
|
||||
$content = preg_replace($keys,$values,$content);
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
function fudd_filter($content) {
|
||||
$content = $content[1];
|
||||
|
||||
$patterns = array(
|
||||
'%(r|l)%' => 'w',
|
||||
'%qu%' => 'qw',
|
||||
'%th(\s)%' => 'f$1',
|
||||
'%th%' => 'd',
|
||||
'%n\.%' => 'n, uh-hah-ha-ha.',
|
||||
'%(R|L)%' => 'W',
|
||||
'%(Qu|QW)%' => 'QW',
|
||||
'%TH(\s)%' => 'F$1',
|
||||
'%Th%' => 'D',
|
||||
'%N\.%' => 'N, uh-hah-hah-hah.'
|
||||
);
|
||||
|
||||
$content = array_apply_regexp($patterns,$content);
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
?>
|
||||
BIN
www/extras/yui/examples/editor/assets/suit1.gif
Normal file
|
After Width: | Height: | Size: 1 KiB |
BIN
www/extras/yui/examples/editor/assets/suit2.gif
Normal file
|
After Width: | Height: | Size: 623 B |
BIN
www/extras/yui/examples/editor/assets/suit3.gif
Normal file
|
After Width: | Height: | Size: 596 B |
BIN
www/extras/yui/examples/editor/assets/suit4.gif
Normal file
|
After Width: | Height: | Size: 581 B |
BIN
www/extras/yui/examples/editor/assets/suit5.gif
Normal file
|
After Width: | Height: | Size: 1 KiB |
BIN
www/extras/yui/examples/editor/assets/suit6.gif
Normal file
|
After Width: | Height: | Size: 634 B |
BIN
www/extras/yui/examples/editor/assets/suit7.gif
Normal file
|
After Width: | Height: | Size: 607 B |
BIN
www/extras/yui/examples/editor/assets/suit8.gif
Normal file
|
After Width: | Height: | Size: 596 B |
BIN
www/extras/yui/examples/editor/assets/suits_active.gif
Normal file
|
After Width: | Height: | Size: 553 B |
BIN
www/extras/yui/examples/editor/assets/suits_default.gif
Normal file
|
After Width: | Height: | Size: 553 B |
245
www/extras/yui/examples/editor/autoheight_editor.html
Normal file
82
www/extras/yui/examples/editor/autoheight_editor_clean.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!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="../../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/fonts/fonts-min.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-dom-event/yahoo-dom-event.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 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: '530px',
|
||||
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>
|
||||
249
www/extras/yui/examples/editor/autoheight_editor_log.html
Normal file
582
www/extras/yui/examples/editor/cal_editor.html
Normal file
179
www/extras/yui/examples/editor/cal_editor_clean.html
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
<!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="../../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/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/editor/assets/skins/sam/editor.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.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/calendar/calendar-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 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.com/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="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( 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( assets/calendar_active.gif );
|
||||
background-position: 1px 0px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#insertdate {
|
||||
background-color: transparent;
|
||||
}
|
||||
</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: '530px',
|
||||
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>
|
||||
586
www/extras/yui/examples/editor/cal_editor_log.html
Normal file
511
www/extras/yui/examples/editor/code_editor.html
Normal file
164
www/extras/yui/examples/editor/code_editor_clean.html
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!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="../../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/fonts/fonts-min.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-dom-event/yahoo-dom-event.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 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( 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( 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>
|
||||
|
||||
<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,
|
||||
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>
|
||||
515
www/extras/yui/examples/editor/code_editor_log.html
Normal file
222
www/extras/yui/examples/editor/editor_adv_editor.html
Normal file
77
www/extras/yui/examples/editor/editor_adv_editor_clean.html
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<!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="../../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/fonts/fonts-min.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-dom-event/yahoo-dom-event.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 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: '530px',
|
||||
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>
|
||||
226
www/extras/yui/examples/editor/editor_adv_editor_log.html
Normal file
714
www/extras/yui/examples/editor/flickr_editor.html
Normal file
326
www/extras/yui/examples/editor/flickr_editor_clean.html
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
<!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="../../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/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/editor/assets/skins/sam/editor.css" />
|
||||
<script type="text/javascript" src="../../build/utilities/utilities.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/autocomplete/autocomplete-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 class="yui-skin-sam">
|
||||
|
||||
<h1>Flickr Image Search</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example provides a new button (<img src="assets/flickr_default.gif">) in the toolbar that opens a custom panel.</p>
|
||||
<p>This custom panel contains an <a href="http://developer.yahoo.com/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( 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( 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>
|
||||
|
||||
<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("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.com/' + sServer + '/' + sId + '_' + sSecret;
|
||||
var sUrl = urlPart + '_s.jpg';
|
||||
var lUrl = urlPart + '_m.jpg';
|
||||
var fUrl = 'http:/'+'/www.flickr.com/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: '530px',
|
||||
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>
|
||||
718
www/extras/yui/examples/editor/flickr_editor_log.html
Normal file
459
www/extras/yui/examples/editor/icon_editor.html
Normal file
152
www/extras/yui/examples/editor/icon_editor_clean.html
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<!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="../../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/fonts/fonts-min.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/utilities/utilities.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 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.com/yui/container/overlay/">Overlay Control</a> with a list of icon images.</p>
|
||||
|
||||
<p>Click the Icon button (<img src="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( 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( 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>
|
||||
|
||||
<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: '530px',
|
||||
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="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>
|
||||
463
www/extras/yui/examples/editor/icon_editor_log.html
Normal file
383
www/extras/yui/examples/editor/imagebrowser_editor.html
Normal file
104
www/extras/yui/examples/editor/imagebrowser_editor_clean.html
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<!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="../../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/fonts/fonts-min.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-dom-event/yahoo-dom-event.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 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: '532px',
|
||||
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('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>
|
||||
387
www/extras/yui/examples/editor/imagebrowser_editor_log.html
Normal file
86
www/extras/yui/examples/editor/index.html
Normal file
372
www/extras/yui/examples/editor/multi_editor.html
Normal file
374
www/extras/yui/examples/editor/multi_editor_log.html
Normal file
150
www/extras/yui/examples/editor/multi_editor_source.html
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
|
||||
<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/editor/assets/skins/sam/editor.css" />
|
||||
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-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>
|
||||
<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);
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
437
www/extras/yui/examples/editor/post_editor.html
Normal file
130
www/extras/yui/examples/editor/post_editor_clean.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<!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 Data Post with Connection Manager</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="../../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/fonts/fonts-min.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/utilities/utilities.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 class="yui-skin-sam">
|
||||
|
||||
<h1>Editor Data Post with Connection Manager</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates how to use <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a> to post data to the server, filter it and return it to the Editor.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<style>
|
||||
#submitEditor {
|
||||
margin: 1em;
|
||||
}
|
||||
#status {
|
||||
margin: 2em;
|
||||
border: 1px solid black;
|
||||
background-color: #ccc;
|
||||
height: 4em;
|
||||
}
|
||||
</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>
|
||||
<input type="checkbox" id="filter" checked> <label for="filter">Filter editor data on server.</label><br>
|
||||
|
||||
<button type="button" id="submitEditor">Submit Form</button><br>
|
||||
|
||||
<div id="status"></div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var Dom = YAHOO.util.Dom,
|
||||
Event = YAHOO.util.Event,
|
||||
status = null;
|
||||
|
||||
var handleSuccess = function(o) {
|
||||
YAHOO.log('Post success', 'info', 'example');
|
||||
var json = o.responseText.substring(o.responseText.indexOf('{'), o.responseText.lastIndexOf('}') + 1);
|
||||
var data = eval('(' + json + ')');
|
||||
status.innerHTML = 'Status: ' + data.Results.status + '<br>Filter: ' + data.Results.filter + '<br>' + (new Date().toString());
|
||||
myEditor.setEditorHTML(data.Results.data);
|
||||
}
|
||||
var handleFailure = function(o) {
|
||||
YAHOO.log('Post failed', 'info', 'example');
|
||||
var json = o.responseText.substring(o.responseText.indexOf('{'), o.responseText.lastIndexOf('}') + 1);
|
||||
var data = eval('(' + json + ')');
|
||||
status.innerHTML = 'Status: ' + data.Results.status + '<br>';
|
||||
}
|
||||
|
||||
var callback = {
|
||||
success: handleSuccess,
|
||||
failure: handleFailure
|
||||
};
|
||||
|
||||
|
||||
YAHOO.log('Create Button Control (#toggleEditor)', 'info', 'example');
|
||||
var _button = new YAHOO.widget.Button('submitEditor');
|
||||
|
||||
var myConfig = {
|
||||
height: '300px',
|
||||
width: '530px',
|
||||
animate: true,
|
||||
dompath: true
|
||||
};
|
||||
|
||||
YAHOO.log('Create the Editor..', 'info', 'example');
|
||||
var myEditor = new YAHOO.widget.Editor('editor', myConfig);
|
||||
myEditor.render();
|
||||
|
||||
_button.on('click', function(ev) {
|
||||
YAHOO.log('Button clicked, initiate transaction', 'info', 'example');
|
||||
Event.stopEvent(ev);
|
||||
myEditor.saveHTML();
|
||||
window.setTimeout(function() {
|
||||
var sUrl = "assets/post.php";
|
||||
var data = 'filter=' + ((Dom.get('filter').checked) ? 'yes' : 'no') + '&editor_data=' + encodeURIComponent(myEditor.get('textarea').value);
|
||||
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, data);
|
||||
}, 200);
|
||||
});
|
||||
|
||||
|
||||
Event.onDOMReady(function() {
|
||||
status = Dom.get('status');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
441
www/extras/yui/examples/editor/post_editor_log.html
Normal file
220
www/extras/yui/examples/editor/simple_adv_editor.html
Normal file
76
www/extras/yui/examples/editor/simple_adv_editor_clean.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<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/editor/assets/skins/sam/simpleeditor.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-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/simpleeditor-beta-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: '530px',
|
||||
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>
|
||||
224
www/extras/yui/examples/editor/simple_adv_editor_log.html
Normal file
208
www/extras/yui/examples/editor/simple_editor.html
Normal file
71
www/extras/yui/examples/editor/simple_editor_clean.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/editor/assets/skins/sam/simpleeditor.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/editor/simpleeditor-beta-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: '530px',
|
||||
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>
|
||||
212
www/extras/yui/examples/editor/simple_editor_log.html
Normal file
831
www/extras/yui/examples/editor/skinning_editor.html
Normal file
399
www/extras/yui/examples/editor/switch_editor.html
Normal file
129
www/extras/yui/examples/editor/switch_editor_clean.html
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<!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="../../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/fonts/fonts-min.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-dom-event/yahoo-dom-event.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 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: '530px',
|
||||
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');
|
||||
Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'position', 'absolute');
|
||||
Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'top', '-9999px');
|
||||
Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'left', '-9999px');
|
||||
myEditor.get('element_cont').removeClass('yui-editor-container');
|
||||
Dom.setStyle(myEditor.get('element'), 'visibility', 'visible');
|
||||
Dom.setStyle(myEditor.get('element'), 'top', '');
|
||||
Dom.setStyle(myEditor.get('element'), 'left', '');
|
||||
Dom.setStyle(myEditor.get('element'), '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');
|
||||
Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'position', 'static');
|
||||
Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'top', '0');
|
||||
Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'left', '0');
|
||||
Dom.setStyle(myEditor.get('element'), 'visibility', 'hidden');
|
||||
Dom.setStyle(myEditor.get('element'), 'top', '-9999px');
|
||||
Dom.setStyle(myEditor.get('element'), 'left', '-9999px');
|
||||
Dom.setStyle(myEditor.get('element'), '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>
|
||||
403
www/extras/yui/examples/editor/switch_editor_log.html
Normal file
364
www/extras/yui/examples/editor/tabview_editor.html
Normal file
119
www/extras/yui/examples/editor/tabview_editor_clean.html
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<!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 inside a Tabview Control</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="../../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/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.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-dom-event/yahoo-dom-event.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/tabview/tabview-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 class=" yui-skin-sam">
|
||||
|
||||
<h1>Editor inside a Tabview Control</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates how to render an Editor inside of a <a href="http://developer.yahoo.com/yui/tabview/">TabView Control</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<style>
|
||||
.yui-content {
|
||||
height: 250px;
|
||||
}
|
||||
.yui-content textarea {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="e_tabs"></div>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
var Dom = YAHOO.util.Dom,
|
||||
Event = YAHOO.util.Event,
|
||||
editorTab = null;
|
||||
|
||||
|
||||
YAHOO.log('Create the Tabview..', 'info', 'example');
|
||||
var myTabs = new YAHOO.widget.TabView('e_tabs');
|
||||
|
||||
YAHOO.log('Add the first tab..', 'info', 'example');
|
||||
myTabs.addTab( new YAHOO.widget.Tab({
|
||||
label: 'Tab One Label',
|
||||
content: '<p>Tab One Content</p>',
|
||||
active: true
|
||||
}));
|
||||
|
||||
YAHOO.log('Add the editor tab..', 'info', 'example');
|
||||
editorTab = new YAHOO.widget.Tab({
|
||||
label: 'Editor Tab',
|
||||
content: '<textarea id="editor">This is the editor content.. You can edit me!</textarea> '
|
||||
});
|
||||
|
||||
myTabs.addTab(editorTab);
|
||||
|
||||
YAHOO.log('Add the third tab..', 'info', 'example');
|
||||
myTabs.addTab( new YAHOO.widget.Tab({
|
||||
label: 'Tab Three Label',
|
||||
content: '<p>Tab Three Content</p>'
|
||||
}));
|
||||
|
||||
myTabs.on('activeTabChange', function(ev) {
|
||||
YAHOO.log('Active tab Change, check to see if we are showing the editor..', 'info', 'example');
|
||||
if (ev.newValue == editorTab) {
|
||||
YAHOO.log('Editor showing, calling myEditor.show()..', 'info', 'example');
|
||||
myEditor.show();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var myConfig = {
|
||||
height: '100px',
|
||||
width: '530px',
|
||||
animate: true,
|
||||
dompath: 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>
|
||||