本文实例讲述了ThinkPHP使用Ueditor的方法。分享给大家供大家参考,具体如下:
相信很多人现在还在用着FCkeditor,以前我也在用,可是后来发现百度的Ueditor之后,发现,Ueditor比Fckeditor更好看,操作性上也比Fckeditor好多了,所以还是尝试着使用ueditor,但是在ThinkPHP框架下使用ueditor还是遇到了一些问题,也花费了一些时间去解决这些问题,这样,在这里写一个关于ThinkPHP下使用ueditor的教程,给需要使用的人。
1、在网站的根目录下建一个“Public”的文件夹,这个文件夹在ThinkPHP中可以用__PUBLIC__来替换,所以这样方便我们程序的编写,然后将ueditor文件放到这个文件夹中。
2、在我们需要使用ueditor的模板文件中导入ueditor所要使用的js和css,例如,我在App/Tpl/default/Venter/createvent.html中添加以下代码:
<script type="text/javascript" src="__PUBLIC__/ueditor/editor_config.js"></script><script type="text/javascript" src="__PUBLIC__/ueditor/editor_all.js"></script><link rel="stylesheet" href="__PUBLIC__/ueditor/themes/default/ueditor.css"/>
3、配置Ueditor相对于网站根目录的位置,这里我建议使用绝对路径,即类似于http://localhost:1080这样的路径,因为在网站项目的开发中,很多地方会用到ueditor,但是由于所用到的位置不同便导致当前目录和服务器根目录的相对路径变化,也就使得ueditor无法使用,例如,我配置的路径(配置文件:ueditor目录下的editor_config.js),将一下代码进行替换:
URL= tmp.substr(0,tmp.lastIndexOf("//")+1).replace("_examples/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径(指以http开头的绝对路径)
替换成:
URL = "http://localhost:1080/Public/ueditor/";
4、下面便是一个对表单的使用的应用:
<form action="__ROOT__/index.php/Venter/ventChk" method="post"> <script type="text/plain" id="Vent" style="width:500px;"></script> <input type="checkbox" name="opened" value="1"/>公开发表 <input type="submit" value="发泄" /></form><!--注册百度ueditor--><script type="text/javascript"> var editor = new baidu.editor.ui.Editor({ toolbars:[['Spechars','Emotion','InsertImage','Bold','Italic','ForeColor','FontFamily','FontSize', ]],//自定义ueditor工具栏 initialContent: '<span style="color:#ccc">点击这里发泄吧</span>', minFrameHeight: 100,//初始化框架大小 autoFloatEnabled: false,//工具栏自动浮动-》关闭 textarea:'myVent'//form表单将通过该参数获得表单提交的数据 }); editor.render("Vent");</script><!--百度Ueditor注册完毕-->
如上面代码所示,可以通过$_POST['myVent']来获取Ueditor编辑区的内容。
新闻热点
疑难解答