百度WEB前端设计部推出一款开源的编辑器UEditor http://ueditor.baidu.com/index.html ,这款编辑器相当强大,它提供了百度地图,google地图和视频等一些非常强大的功能 ,毕竟是国内大企业肯定是要关注的。

在ueditor1.1.5版本的使用很简单

1、包含头文件
[sourcecode language=”js”]
<link href="../themes/default/ueditor.css" rel="stylesheet"<div style="display: none"><a href="http://cialisonlineon.com/" title="generic cialis">generic cialis</a></div> type="text/css" />
<script src="../editor_config.js" type="text/javascript"></script>
<script src="../editor_ui_all.js" type="text/javascript"></script>
[/sourcecode]

将入口的js文件和css文件包含进来

2、html代码
[sourcecode language=”html”]
<form action=”add.php” method=”POST” >
<textarea id=”editor” ></textarea> <!–内容输入框 注意id的命名–>
<script language=”javascript” type=”text/javascript”> <!– UEditor <a href="http://www.moab-offroad.com/">australian online pokies</a> –>
var editor = new baidu.editor.ui.Editor(); <!–new一个对象,通过对象创建编辑器–>
editor.render(“editor”);<!–出入参数editor为textarea中的id值,并生成编辑器–>
</script>
<input type=”submit” name=”sub”/>
</form>
[/sourcecode]
3、服务器接收数据

我的form表单中提交到add.php文件中,在add.php中通过$_POST接收编辑器传入的数据(asp、jsp也是一样的,只是提交到服务器的文件不一样)。

UEditor对编辑器编辑的内容有一个默认的名editorValue,所以可以通过$_POST[“editorValue”]接受出过来的数据。

以上就完成了对UEditor的配置

4、其他问题

1、如果你需要设置UEditor的一些参数的话,只要在HTML代码中的js片段断码加以修改
[sourcecode language=”js”]
<script language=”javascript” type=”text/javascript”>
var option = {
initialContent: ‘在编辑器中默认显示的内容’,  //初始化编辑器的内容
minFrameHeight: 200,  //设置高度
textarea: ‘content’ //设置提交时编辑器内容的名字,之前我们用的名字是默认的editorValue
};
var editor = new baidu.editor.ui.Editor(option);//将设置初始化(之前的配置采用的是默认的,所以没有传参数)
editor.render(“editor”);
</script>
[/sourcecode]
2、如果你的UEditor都弄好了,但是发现百度地图、google地图、视屏、表情都无法正常显示,问题可能是你的UEditor文件没有放在你的跟目录下,

但调用的文件是在根目录下(只要你调用UEditor的文件和UEditor文件没有放在同一级文件夹下面)。这是因为UEditor是根据相对路径来确定

调用自身的其他文件的,如果改成绝对路劲就可以解决这个问题了。

解决:

在UEditor(不一定是这个名称,看你命名是哪个就是哪个)文件夹下,有个配置文件editor_config.js,在里面可以更改配置信息。

更改”UEDITOR_HOME_URL”这个值,改为UEditor这个文件夹得在服务器下的绝对路径

例如:

UEDITOR_HOME_URL:”http://localhost/QingBlog/pm-static/UEditor/”, //这里你可以配置成ueditor目录在您网站的绝对路径

OK 啦!

zp8497586rq