百度WEB前端设计部推出一款开源的编辑器UEditor http://ueditor.baidu.com/index.html ,这款编辑器相当强大,它提供了百度地图,google地图和视频等一些非常强大的功能 ,毕竟是国内大企业肯定是要关注的。
在ueditor1.1.5版本的使用很简单
1、包含头文件
<link href="../themes/default/ueditor.css" rel="stylesheet" type="text/css" />
<script src="../editor_config.js" type="text/javascript"></script>
<script src="../editor_ui_all.js" type="text/javascript"></script>
将入口的js文件和css文件包含进来
2、html代码
<form action="add.php" method="POST" >
<textarea id="editor" ></textarea> <!--内容输入框 注意id的命名-->
<script language="javascript" type="text/javascript"> <!-- UEditor -->
var editor = new baidu.editor.ui.Editor(); <!--new一个对象,通过对象创建编辑器-->
editor.render("editor");<!--出入参数editor为textarea中的id值,并生成编辑器-->
</script>
<input type="submit" name="sub"/>
</form>
3、服务器接收数据
我的form表单中提交到add.php文件中,在add.php中通过$_POST接收编辑器传入的数据(asp、jsp也是一样的,只是提交到服务器的文件不一样)。
UEditor对编辑器编辑的内容有一个默认的名editorValue,所以可以通过$_POST['editorValue']接受出过来的数据。
以上就完成了对UEditor的配置
4、其他问题
1、如果你需要设置UEditor的一些参数的话,只要在HTML代码中的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>
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 啦!