1.在您页面的<body>标签范围中为ufree编辑器提供一个下挂的<div>标签，并且为这个标签命名一个id，代码可以如下（其中的id可以任意命名）：
<div id="editor"><div>
您的ufree编辑器在编辑器中的位置也由这个下挂<div>的位置进行控制，比如：
<div id="editor" style="position:absolute;top:100px;left:100px;"><div>
2.在您页面的<head>标签范围中添加ufree编辑器所必须的两个js文件和一个css文件，代码如下：
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" type="text/javascript" src="startcode.js"></script>
<script language="javascript" type="text/javascript" src="code.js"></script>
<script language='javascript' type='text/javascript' src='editorcode.js'></script>
标准发行的ufree1.0中已经合并了js文件，那么代码如下：
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" type="text/javascript" src="maincode.js"></script>
3.在您页面的<body>标签尾部加入一段<script></script>标签，示例代码如下：
<script>
editor_aimNode="editor"; //这段代码是必须的，并且其值必须等于您在第一步中设置的用于编辑器下挂的<div>标签的id
editor_width="200px"; //editor_width和editor_height用于控制ufree编辑器的大小，您也可以省略这两个参数的设置，那么编辑器将采用默认大小
editor_height="200px";
</script>
4.获得用户编辑的HTML页面代码，在上传用户编辑页等情况下，您都需要获得用户已完成的HTML页面代码：
用户编辑的HTML页面代码由ufree提供的接口函数提供，ufree通过editorWindow对象提供了两个接口函数getAllPageHTML( )和getEditableHTML( )分别提供完整的用户编辑代码和用户编辑区代码，您可以使用如下方式获得：
<script>
... ...
var usercode=editorWindow.getAllPageHTML( );
... ...
</script>
上面的步骤您部署ufree编辑器所需要的全部步骤,最终一个典型的编辑页的必要部署代码可能如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2321">
<title>编辑新页</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" type="text/javascript" src="maincode.js"></script>
</head>
<body id="topbody">
<div id="editor"><div>
<script>
//指定编辑器下挂DIV标签的ID
editor_aimNode="editor";
//指定编辑器宽度和高度，如果不指定则为默认值
//editor_width="1000px";
//editor_height="200px";
//获得编辑器编辑内容的函数
//var usercode=editorWindow.getAllPageHTML();
</script>
</body>
</html>
