ueditor1.1.17简单说明及其应用

本文是对ueditor的一些简单介绍,没有深入,只为大家能使用ueditor提供一些简单的帮助。
本文以php代码为例,因为ueditor对php的支持最好,而且开发的比较完善。环境是php+apache。
ueditor1.1.17开发版:http://ueditor.baidu.com/dev.html

下面分2个方面来介绍。
1.文件夹内的各个文件。(主要说说运用到项目中去的几个文件)
2.一个简单的例子说明下如何运用。

第1个方面:
压缩包内文件的说明
点击在新窗口中浏览此图片
带“★”是全功能版应用到项目中必须的文件。editor_all.js和editor_all_min.js二选一,当然从应用的角度,选择editor_all_min.js比较好。

下面主要讲解带“★”的文件夹,因为这些个文件是应用到项目中必须的文件
如果放在根目录就不说明了,这个几乎不用改就可以使用了。
下面是放在根目录下的其他文件夹内,比如ueditor文件夹内
把文件夹dialogs、server、themes、third-party和文件editor_all_min.js、editor_config.js,拷贝到ueditor文件夹下,
1)首先设置editor_config.js文件。打开文件。
设置路径:第6行UEDITOR_HOME_URL,这里的例子设置为../ueditor/   (不要忘了后面的“/”)
设置表情路径:第285行emotionPath,这里的例子设置为../ueditor/dialogs/emotion/    (不要忘了后面的“/”)
自定义css路径:第265行iframeCssUrl,这里的例子设置为../ueditor/themes/default/iframe.css(没有自定义的css这部不该也没有关系)
注意:出现“Not Found”或者“404错误”就是路径不对

2)修改上传图片路径不对无法显示的问题。
需要修改ueditor/dialogs/image文件夹下image.html文件。
第267行 tmpObj.src = "../server/upload" + ci.url.replace("..","");
修改为tmpObj.src = "../ueditor/server/upload" + ci.url.replace("..","");
注意:以上部分代码修改后无法生效的,均要清空下缓存才可以。

到了这里ueditor全功能的设置基本完成,下面介绍一个简单的例子。

第2个方面:
在根目录下index.html显示ueditor编辑器,并用show.php显示编辑器的代码
建一个html空白页。
head头部放入下面4行代码,第1行是设置为utf-8模式,第4行是引入编辑器的css文件
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/editor_all_min.js"></script>
<link rel="stylesheet" type="text/css" href="ueditor/themes/default/ueditor.css"/>


body中代码
<form action="show.php" method="post">
  <textarea cols="100" rows="8" id="editor"></textarea>
  <input type="submit" value="内容演示" class="button" />
  </form>

最后在“”前加下面代码
<script type="text/javascript">
    var editor = new baidu.editor.ui.Editor({
  textarea: 'editor'
  });
    editor.render('editor');
</script>

到这里index.html的页面完成了,下面是show.php页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<?php echo  stripslashes($_REQUEST['editor']);?>
</body>
</html>


到了这里初步教程事例说完了。其实ueditor是一个很好的编辑器,但是现在刚刚开发出来,很多地方可能不完善,大家可以先试试看再说。
  • 下载列表

目前有 1 条评论

avatar

龙岩割包皮  2012-06-14 10:07 1楼

走过路过支持一下嘿嘿 回复
昵称
邮箱
主页
提交
订阅