Skip to content

Instantly share code, notes, and snippets.

@acdha

acdha/yui-multiformat-editor.html

Created March 16, 2009 22:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acdha/80122 to your computer and use it in GitHub Desktop.
Save acdha/80122 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstration side-by-side HTML and plain-text editor using the YUI Rich Editor control
Raw
yui-multiformat-editor.html
<!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>Multi-Format Editor Example</title>
<!--
Normal:
http://developer.yahoo.com/yui/articles/hosting/?animation&base&button&container&editor&element&fonts&layout&logger&menu&reset&reset-fonts&resize&selector&tabview&MIN
Debug:
http://developer.yahoo.com/yui/articles/hosting/?animation&base&button&container&editor&element&fonts&layout&logger&menu&reset&reset-fonts&resize&selector&tabview&DEBUG&norollup
-->
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts/reset-fonts.css&2.7.0/build/base/base-min.css&2.7.0/build/assets/skins/sam/skin.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/animation/animation-min.js&2.7.0/build/element/element-min.js&2.7.0/build/dragdrop/dragdrop-min.js&2.7.0/build/container/container-min.js&2.7.0/build/menu/menu-min.js&2.7.0/build/button/button-min.js&2.7.0/build/editor/editor-min.js&2.7.0/build/resize/resize-min.js&2.7.0/build/selector/selector-min.js&2.7.0/build/layout/layout-min.js&2.7.0/build/logger/logger-min.js&2.7.0/build/tabview/tabview-min.js"></script>
<style type="text/css">
#text {
font-family: monospace;
}
body { height: 100%;}
#controls {
margin: 5px auto;
width: 150px;
}
#editors {
height: 450px;
width: 1020px;
margin: 0 auto;
}
#editors > div {
float:left;
margin: 3px;
}
#editors textarea {
width: 500px;
height: 450px;
}
</style>
</head>
<body class="yui-skin-sam">
<h1>YUI Rich Editor Example</h1>
<p>A side-by-side editor for both HTML and plain-text versions of the same content</p>
<div id="controls"></div>
<div id="editors">
<div><textarea id="text">This is the plain text content</textarea></div>
<div><textarea id="html">This is where <b>HTML</b> content will go.</textarea></div>
</div>
<script>
var HTMLEditor, controlButtons;
YAHOO.util.Event.onDOMReady(function(){
HTMLEditor = new YAHOO.widget.Editor('html', {
animate: false,
dompath: true,
focusAtStart: true
});
var resizeTextArea = function () {
YAHOO.util.Dom.get("text").style.height = HTMLEditor.get("element_cont").get('element').clientHeight + "px";
};
HTMLEditor.on("resize", resizeTextArea);
HTMLEditor.on("windowRender", resizeTextArea);
HTMLEditor.render();
HTMLEditor.on('toolbarLoaded', function() {
HTMLEditor.toolbar.on("toolbarExpanded", resizeTextArea);
HTMLEditor.toolbar.on("toolbarCollapsed", resizeTextArea);
});
new YAHOO.widget.Button({
container:"controls",
label: "&larr;",
onclick: {
fn: function() {
HTMLEditor.saveHTML();
var msg = HTMLEditor.get("textarea").value;
msg = msg.replace(/<(br|ul|ol)>/gi, "\n");
msg = msg.replace(/<li>(.*?)<\/li>/g, '* $1\n');
msg = msg.replace(/<(p|div)>/gi, "\n");
msg = msg.replace(/<\S[^><]*>/g, '');
YAHOO.util.Dom.get("text").value = msg;
}
}
});
new YAHOO.widget.Button({
container:"controls",
label: "Save",
onclick: {
fn: function() {
alert("This could do something useful");
}
}
});
new YAHOO.widget.Button({
container:"controls",
label: "&rarr;",
onclick: {
fn: function() {
HTMLEditor.clearEditorDoc();
HTMLEditor.setEditorHTML(YAHOO.util.Dom.get("text").value.replace("\n", '<br>'));
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment