富文本编辑器ueditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，

等长微博工具，都是采用的ueditor作为前端的编辑器。首先下载ueditor，http://ueditor.baidu.com/website/index.html页面中找到下载位置，ueditor支持多种后台语言，作者采用PHP。

下载后的目录结构如下：

index.html页面就是ueditor页面，打开源文件:

代码：

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

就是加载富文本编辑器的代码。

用浏览器打开index.html如下图：

先不用管下面的按钮，这些按钮是事件的演示程序，用的时候在分析。

（1）首先我们要修改输入框的样式，这样才能添加到我们的页面当中。

打开ueditor.config.js文件,原始文件的92行，开始设置编辑框样式，

修改initialFrameWidth:440，编辑框的样式就变成下面：

（2）把输入框的内容作为表单内容提交。在<script>外面添加<form>标签包围，

<form method="post" action="">
<script id="editor" type="text/plain" style="width:1024px;height:500px;">
</script>

<div><input type="submit" name="submit" value="生成图片"></div>
</form>

在后端，$_POST['editorValue']来获得表单中的值。

（3）为了达到所见即所得的效果，我们需要对对话框的样式做一些修改。改变编辑框样式的方法有很多，作者喜欢修改/themes/iframe.css文件，来影响编辑框样式，例如，下面的css设置了编辑框背景图片，设置了顶端空间。这样做的还有一个好处，生成富文本文件，可以直接引用在这个样式文件，保证样式文件只在一处保存，防止误修改导致生成的文件样式不一致。

body{
background-repeat:no-repeat;
background-position:0px 0px;
background-image:url(bg.jpg);
padding-top:130px;
}

（4）在php文件中添加验证信息，作者用的Zend_Auth模块，与系统中其他模块验证一致。

<?php
include_once '/opt/lampp/jfjb/library/Zend/Auth.php';

//引入Zend_Auth模块
$s = ini_get('include_path');

//由于作者采用直接包含library的方法，在这动态引入Zend Library
ini_set('include_path',$s . PATH_SEPARATOR . '/opt/lampp/jfjb/library');
$auth = Zend_Auth::getInstance();
if(!$auth->hasIdentity())//前验证
{
exit();
}
?>