Hi,
Here is a sample code to turn transliteration on on YUI editor.
The key here is following statement
****
control.makeTransliteratable(['yahoo_editor']);
****
where yahoo is the name and id of the textarea using to create YUI
editor. Here is the complete sample code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Rich Text Editor: Icon Insertion</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/yui/2.8.0r4/assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(http://ajax.googleapis.com/ajax/libs/
yui/2.8.0r4/assets/bg_hd.gif);}
</style>
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/yui/2.8.0r4/assets/
dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/menu/assets/skins/sam/
menu.css" />
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/button/assets/skins/
sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/container/assets/skins/
sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/editor/assets/skins/
sam/editor.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/yuiloader/yuiloader-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/event/event-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/container/container-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/button/button-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/yui/2.8.0r4/build/editor/editor.js"></script>
<script src="http://www.google.com/jsapi?
key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></
script>
<script type="text/javascript">
/*
* How to setup a textarea that allows Transliteration from
English to Hindi.
*/
google.load("elements", "1", { packages: "transliteration" });
</script>
<!--there is no custom header content for this example-->
<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) &&
(YAHOO.util.Event)) {
YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<!--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>
<style>
.yui-toolbar-group-insertitem {
*width: auto;
}
.style1
{
width: 210px;
}
</style>
<form method="post" action="#" id="form1">
<table><tr><td><div id="googTrans"><textarea id="yahoo" name="yahoo"
rows="20" cols="75">
</textarea></div></td></tr></table>
</form>
<script>
(function() {
var myConfig = {
height: '150px',
width: '380px',
animate: true,
limitCommands: true,
dompath: true,
extracss: 'body { font-size: 10px; font-family: Tahoma; }',
insert: true,
focusAtStart: true,
toolbar: {
titlebar: 'My Editor',
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: 'spin', label: '13', value:
'fontsize', range: [9, 75], disabled: false },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value:
'forecolor', disabled: false },
{ type: 'color', label: 'Background Color',
value: 'backcolor', disabled: false },
{ type: 'push', label: 'Hindi
Transliteration', value: 'inserticon' }
]
}
]
}
};
YAHOO.log('Editor created..', 'info', 'example');
myEditor = new YAHOO.widget.Editor('yahoo', myConfig);
var control = null;
myEditor.on('toolbarLoaded', function() {
myEditor.toolbar.on('inserticonClick', function(ev) {
control.toggleTransliteration();
return false;
}, myEditor, true);
});
myEditor.render();
myEditor.on('afterRender', function() {
setTimeout(function() {
var content = document.getElementById('googTrans');
// Create the HTML for our text area
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.HINDI],
transliterationEnabled: false
};
// Create an instance on TransliterationControl with the
required
// options.
control =
new
google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['yahoo_editor']);
}, 1000);
});
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google AJAX APIs" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en.
