如何将UEditor部署到PHP程序上
- 格式:doc
- 大小:34.50 KB
- 文档页数:3
php xdebug插件用法摘要:1.PHP 与Xdebug 插件概述2.Xdebug 插件的安装与配置3.Xdebug 插件的功能与用法4.Xdebug 插件的优点与应用场景5.总结正文:【1.PHP 与Xdebug 插件概述】PHP 是一种流行的服务器端脚本语言,常被用于Web 开发。
在PHP 的开发过程中,调试是一个非常重要的环节。
而Xdebug 插件,就是一款功能强大的PHP 调试工具。
【2.Xdebug 插件的安装与配置】要在PHP 中使用Xdebug 插件,首先需要安装并配置。
安装过程相对简单,只需在php.ini 文件中取消xdebug.extension 的注释,并设置相应的参数。
配置时,可以通过修改php.ini 文件或使用Xdebug 命令行工具来完成。
【3.Xdebug 插件的功能与用法】Xdebug 插件提供了许多实用的调试功能,包括:(1)代码覆盖率分析:通过Xdebug,可以轻松地查看PHP 代码的执行情况,了解代码的覆盖率。
(2)变量调试:可以使用Xdebug 查看PHP 变量的值,包括全局变量、局部变量和引用的变量。
(3)调试器:Xdebug 内置的调试器可以逐行执行PHP 代码,方便开发者找出代码中的问题。
(4)性能分析:Xdebug 可以对PHP 代码的执行性能进行分析,提供有关内存使用、执行时间等信息。
【4.Xdebug 插件的优点与应用场景】Xdebug 插件具有以下优点:(1)功能强大:Xdebug 提供了丰富的调试功能,可以满足开发者各种调试需求。
(2)易用性高:Xdebug 插件的安装和使用非常简单,即使是初学者也能快速上手。
(3)性能影响小:Xdebug 插件对PHP 代码的性能影响较小,可以在生产环境中使用。
应用场景:Xdebug 插件非常适合在PHP 开发过程中进行代码调试、性能分析和代码优化。
【5.总结】总的来说,Xdebug 插件是一款非常实用的PHP 调试工具,可以帮助开发者提高代码质量和开发效率。
教大家怎样把网站程序上传到服务器空间,以及安装网站程序。
1、首先,我们从源码网站上下载模板。
根据自己的需要进行更改。
下载好的源码:
2、用ftp连接自己的服务器空间,找到网站根目录,一般在/var/www/html下。
把文件夹里的源码用鼠标拉到上传框里,右键,传输列队。
如图,正在上传。
3、上传完成,在浏览器输入localhost/index.php 即可自动安装网站程序。
可以看到已经可以了。
但是还有乱码,然后调试之后就行了。
(注:专业文档是经验性极强的领域,无法思考和涵盖全面,素材和资料部分来自网络,供参考。
可复制、编制,期待你的好评与关注)。
在 Dreamweaver CS5 中定义 PHP 站点因为 PHP 文件需要由 Web 服务器处理,所以您需要将测试服务器的位置告知 Dreamweaver。
您还需要告诉 Dreamweaver 测试文件时要使用的正确 URL。
以下说明假设您已经按上述部分中的描述在自己的计算机上设置一个本地测试环境。
理论上,您可以找到计算机上任何位置的 PHP 文件,当使用“实时视图”或“在浏览器中预览”时,Dreamweaver 会将它们复制到测试服务器。
但是,这会为每个文件生成两个相同的副本。
一般将项目文件存储在测试服务器的文档根中文件夹中,您在本教程中也将这样做。
找到服务器文档根文档根是服务器查找网页的顶级文件夹。
它的位置取决于 PHP 测试环境的安装位置和方式。
以下是一般 PHP 设置的默认位置:∙XAMPP: C:\xampp\htdocs∙IIS: C:\inetpub\wwwroot∙WampServer: C:\wamp\www∙MAMP: /Applications/MAMP/htdocs文档根的 URL 为 http://localhost/。
注意:如果要使用 MAMP 默认端口,请使用 http://localhost:8888/ 作为 URL。
指定工作文件夹要指定工作文件夹:1.在 Dreamweaver 中,选择“站点”>“新建站点”。
2.在“站点名称”文本框中,键入站点名称,如PHP Test Site。
该名称用于在 Dreamweaver 中识别此项目。
3.单击“本地站点文件夹”文本框旁的文件夹图标,浏览到测试服务器的文档根。
4.创建一个名为 php_test的文档根的子文件夹并选择它。
5.依次单击“打开”和“选择”(Mac 上是“选取”)。
6.验证“站点设置”对话框中的设置(请参阅图 12),然后单击“保存”。
(“本地站点文件夹”的位置取决于 PHP 的安装方式。
)图 12.验证 PHP 测试站点的基本设置。
thinkPHP下ueditor的使⽤⽅法详解本⽂实例讲述了thinkPHP下ueditor的使⽤⽅法。
分享给⼤家供⼤家参考,具体如下:2、下载对应的php版的,下载后重命名为ueditor,根据需要放到对应的项⽬⽬录中。
我放的位置为Public/admin⽂件夹下,admin为后台的访问⼊⼝⽂件⽬录。
3、在项⽬中的使⽤⾸先需要引⼊核⼼的js⽂件:<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.all.js"></script>然后再⽂件中加⼊<textarea>标签,注意设置id属性复制代码代码如下:<textarea name="content" id="EditorId"> </textarea>接着是初始化编辑器,注意配置路径<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "__PUBLIC__/admin/ueditor/";window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的⾼度window.UEDITOR_CONFIG.initialFrameWidth=800;//编辑器的宽度var editor = new UE.ui.Editor({imageUrl : '__APP__/Editor/uploadImage',fileUrl : '__APP__/Editor/uploadFile',imagePath : '',filePath : '',imageManagerUrl:'__APP__/Editor/imageManage', //图⽚在线管理的处理地址imageManagerPath:'__ROOT__/'});editor.render("EditorId");}</script>注意:1、UEDITOR_HOME_URL的路径配置为ueditor所在的位置。
KindEditor3.5.2最新ASP/PHP版分享及使用方法最近做web网站在找编辑器的时候在选择编辑器,分别测试了fckeditor和kindeditor这两款,下面做一个简单的说明:[1].fckeditor编辑器对于从word复制过来的格式会乱掉,另外考虑其自身的安全问题,就没用它了[2].kindeditor则是js+html的编辑器,当然另外如果你加入图片上传功能就要提供php或asp的脚本[3].比较遗憾的是kindeditor只能传图片,其他附件无法上传,不过如果加入这个功能也不难,可以参考image上传来编写因此本次的重点就是讲解kindeditor的使用,刚好这次同时使用了asp和php编写,因此两个都会分享。
<!--more-->1.ASP版KindEditor3.5.2使用方法及常见问题使用的时候可以参考原版里面的asp/demo.asp来操作,这里要重点说明是关于调用编辑器代码:[javascript]<script type="text/javascript" charset="utf-8" src="../keditor/kindeditor.js"></script> <script type="text/javascript">KE.show({id : 'content',// 这个是相对于/plugins/image目录而言,一般保持默认即可imageUploadJson : '../../asp/upload_json.asp',fileManagerJson : '../../asp/file_manager_json.asp',// 同上allowFileManager : true,afterCreate : function(id) {KE.event.ctrl(document, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});}});</script>[/javascript]在asp要调用编辑器比较常见问题是图片上传问题,我说下我这个编辑器的配置目录问题(1).编辑器在根目录,而我调用编辑器是后台文章编辑,如下方式:|--keditor # 放在根目录防止爆后台路径|--admin/newedit.asp|--upload #上传目录放在根目录防止暴露后台地址(2).在asp的2个上传文件keditor\asp\file_manager_json.asp # 图片浏览在该文件中,涉及到上传目录的设置问题,代码如下:[vb]rootPath = "/upload/"rootUrl = "../upload/"[/vb]keditor\asp\upload_json.asp # 图片上传在该文件中,涉及到上传目录的设置问题,代码如下:[vb]'文件保存目录路径savePath = "/upload/"'文件保存目录URLsaveUrl = "../upload/"[/vb](3)同时在编辑器中加入插入代码的功能,具体不详说,查看附件代码这样子设置完目录的结构就不会出现"服务器出现故障"的提示,出现这个提示一般可能有以下几种情况:(1).上传目录设置问题(2).从官方下载的版本默认是utf-8格式,如果用到gbk中可能会出现这个错误提示(3).程序本身出错(没有修改程序是不会这个问题!)<a href='/wp-content/uploads/2011/03/keditor.zip'>点我下载:keditor 3.5.2 for asp Modify by 冷锋</a>2.PHP版KindEditor3.5.2使用方法及常见问题PHP版的和ASP原理差不多就是在目录设置有点不一样,注意下就可以了,就不多说,只说下目录结构:|--keditor # 更目录|--keditor/attached # 上传目录|--system/newedit.php # 调用编辑器页面目录在后台目录设置常见keditor/php目录下两个php文件,建议不要调整目录结构。
一、富文本内容交互1、编辑器内容初始化(即往编辑器中设置富文本)场景一:写新文章,编辑器中预置提示、问候等内容。
在editor_config.js文件中找到initialContent参数,设置其值为需要的提示或者问候语即可,如initialContent:’欢迎使用UEditor!’。
场景二:编辑旧文章,从数据库中取出富文本放置到编辑器中。
显然,编辑文章时需要从后台数据库中取出大段富文本,如果仍然采用场景一中的方式去设置初始值的话,必然会带来诸如引号匹配被截断等问题,因此需要采用另外一种方式去设置,此处采用了script标签作为编辑器容器对象,并设置了其类型是纯文本,从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。
2、提交编辑器内容至后端场景一:在编辑器所在的Form中存在提交按钮,提交动作由点击此按钮完成。
该场景适用于最普通的场合,没有太大问题需要注意,仅三点说明:1) 默认情况下提交到后台的表单名称是“editorValue”,在editor_config.js中可以配置,参数名为textarea。
2) 可以在容器标签(即script标签)上设置name属性,以覆盖editor_config.js中的场景二:编辑器所在的Form中不存在提交按钮,提交动作由外部事件触发。
该场景适用于站点前端交互较多的场合,需要注意的事项主要是在触发form提交动作之前如果使用的是jquery validation可以参考如下代码此处editor是编辑器实例对象。
场景三:编辑器不在任何Form中,提交动作由外部事件触发。
该场景使用不多,但特殊时候可能需要。
UEditor也提供了对应的处理方案,基本逻辑跟场景二一样,只是在执行同步操作的时候需要传入提交form的id,如editor.sync(myFormID)即可。
其他同场景二。
二、图片上传交互1、传统图片上传传统图片上传涉及到的前后端交互主要涉及“上传提交路径”以及“图片保存路径”两个参数,后台保存路径以任何形式(绝对或者相对)、在任何页面展示跟前台无关。
/***********************************************/引入百度编辑器ueditor:使用方法如下:下载ueditor编辑器文件后,将其放在自己的引入路径(include)文件夹中,ueditor编辑器文件(使用版)包括editor_all.js,editor_configs.js等文件。
1. php中引入文件及文本域:<link rel="stylesheet" type="text/css" href="ueditor/themes/default/css/ueditor. css"/><script type="text/javascript" src="ueditor/editor_all.js"></script><script type="text/javascript" src="ueditor/editor_config.js"></script><form name="form" action="test.php" method="post"><!--一下页面的三个编辑器如下--><div><script type="text/plain" id="learnTarget" name="learnTarget"></script> </div><div><script type="text/plain" id="learnTarget" name="learnImportant"></scrip t></div><div><script type="text/plain" id="learnTarget" name="learnWay"></script></div></form>*注意引入文件的路径根据实际情况而定2.在php文档包含的js文件中:a.初始化文本编辑器<script>editor1 = new baidu.editor.ui.Editor({ initialContent:'<内容>',initialFrameWidt h:500,initialFrameHeight:300});//定义一个编辑器对象?editor1.render('learnTarget');//实例化编辑器对象,其中learnTarget是编辑器的ideditor2 = new baidu.editor.ui.Editor({ initialContent:'<内容>',initialFrameWidt h:500,initialFrameHeight:300});editor2.render('learnImportant');editor3 = new baidu.editor.ui.Editor({ initialContent:'<内容>',initialFrameWidt h:500,initialFrameHeight:300});editor3.render('learnWay');</script>1)initialContent:表示文本域所给的默认值;1)initialFrameWidth:表示给编辑器设计的宽度;3)initialFrameHeight:表示给编辑器设计的高度;b.用js获取及设置文本域的内容:<script>//获取文本域内容var learnTarget = myTrim(editor1.getContent());var learnImportant = myTrim(editor2.getContent());var learnWay = myTrim(editor3.getContent());//更新文本域内容editor1.setContent('新内容');editor2.setContent('新内容');editor3.setContent('新内容');</script>c.用js提交文本域内容<script>returnEditor = UE.getEditor('learnTarget');//获取编辑器returnEditor.sync();//使编辑器与文本域中的文本保持同步returnEditor = UE.getEditor('learnImportant');returnEditor.sync();returnEditor = UE.getEditor('learnWay');returnEditor.sync();document.form.submit();</script>/***********************************************/。
这篇文章主要为大家介绍了将百度编辑器(Ueditor)整合到dedecms中的方法,通过对应配置文件的修改实现采用百度编辑器替换dedecms原有编辑器的方法,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了将百度编辑器(Ueditor)整合到dedecms中的方法,分享给大家供大家参考。
具体分析如下:现在百度编辑器感觉比dedecms自带的编辑器要强多了,这里就来给大家介绍替换dedecms自带编辑器的方法.Ueditor整合dedecms步骤1. ueditor的下载安装到ueditor官网下载最新版的编辑器源码,到dedecms的include目录新建文件夹ueditor,该文件夹就是ueditor路径,下面修改编辑器配置文件时需要该路径.2. 修改dedecms编辑器配置文件修改网站根目录下的include/inc/inc_fun_funAdmin.php文件,找到如下代码:代码如下:if($GLOBALS['cfg_html_editor']=='fck')替换为代码如下:代码如下:if($GLOBALS['cfg_html_editor']=='ueditor') { $fvalue = $fvalue=='' ? '<p></p>' : $fvalue; $code = '<script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/editor_config.js"></script> <script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/editor_all.js"></script> <link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/css/ueditor.css"/> <textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</textarea> <script type="text/javascript">var ue = new baidu.editor.ui.Editor();ue.render("'.$fname.'");</script>'; if($gtype=="print") { echo $code; } else { return $code; } }else if($GLOBALS['cfg_html_editor']=='fck')补充:1、我使用的是dedecms 5.7; 2、我这里引入的是editor_all.js而不是editor_all_min.js,min是压缩过后的js文件不方便修改。
PHP如何搭建百度Ueditor富⽂本编辑器本⽂为⼤家分享了PHP搭建百度Ueditor富⽂本编辑器的⽅法,供⼤家参考,具体内容如下下载UEditor官⽹:将下载好的⽂件解压到thinkphp项⽬中,本⽂是解压到PUBLIC⽬录下并改⽂件夹名称为ueditor第⼀步引⼊javascript在html中如⼊下⾯的js语句引⼊相关⽂件<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script>第⼆步添加textare⽂本域并设置id值<textarea type="text" name="content" id="EditorId" placeholder="请输⼊内容"></textarea>第三步初始化UEditor编辑器在html代码中添加下⾯的代码初始化UEditor编译器<script type="text/javascript" charset="utf-8">//初始化编辑器window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的⾼度window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度var editor = new UE.ui.Editor({imageUrl : '',fileUrl : '',imagePath : '',filePath : '',imageManagerUrl:'', //图⽚在线管理的处理地址imageManagerPath:'__ROOT__/'});editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea>}</script>第四步设置图⽚上传路径UEditor编辑器的默认图⽚上传路径是根⽬录下/ueditor/php/upload/image/⽬录,没有这个⽬录会⾃动创建,如果要⾃定义图⽚上传路径,可以在ueditor/php/config.json⽂件中12⾏处修改。
在Core中使⽤百度在线编辑器UEditor在 Core中使⽤百度在线编辑器UEditor0x00 起因最近需要⼀个在线编辑器,之前听⼈说过百度的UEditor不错,去官⽹下了⼀个。
不过服务端只有版的,如果是为了能尽快使⽤,只要把版的服务端作为应⽤部署在IIS上就可以⽴即使⽤了。
不过我的需求并不急,所以把移植到了 Core上。
整个过程很简单,只是重新引⽤了⼀些包,修改了⼏处代码,另外就是把Controller中⽐较长的⼀个switch语句块重构为了字典,根据url中的action参数从字典中找出并调⽤相应的Action处理,这样的好处就是如果要扩展action⽀持的操作⽆需修改源代码,只要扩展字典就可以,对扩展开放,对修改关闭。
最后把服务端功能打成了nuget包UEditorNetCore,⽅便使⽤。
这篇博客主要就介绍下如何使⽤UEditorNetCore 快速实现UEditor服务端,也可以直接使⽤源代码中的⽰例,希望对有这⽅⾯需求的园友有所帮助。
0x01 总体设计当接收到action后,UEditorService会从UEditorActionCollection中找到这个action对应的⽅法并调⽤,同时传⼊HttpContext参数。
这些⽅法调⽤基层的服务XxxxHandler完成功能,并把返回内容通过HttpContext.Response.WriteAsync()⽅法写⼊。
如果要扩展对action的⽀持,可以扩展UEditorActionCollection,具体⽅法后⾯有介绍。
0x02 如何使⽤UEditorNetCore1.安装UEditorNetCoreInstall-Package UEditorNetCore2.在Startup.cs的ConfigureServices⽅法中添加UEditorNetCore服务public void ConfigureServices(IServiceCollection services){ //第⼀个参数为配置⽂件路径,默认为项⽬⽬录下config.json //第⼆个参数为是否缓存配置⽂件,默认false services.AddUEditorService() services.AddMvc();}3.添加Controller⽤于处理来⾃UEditor的请求[Route("api/[controller]")] //配置路由public class UEditorController : Controller{private UEditorService ue;public UEditorController(UEditorService ue){this.ue = ue;}public void Do(){ue.DoAction(HttpContext);}}4.修改前端配置⽂件ueditor.config.jsserverUrl需要参照第3步Controller中配置的路由,按照上⾯步骤3中的配置,需要以下配置:serverUrl:"/api/UEditor"这样配置后当前端要获取服务端UEditor配置时就会访问/api/UEditor?action=config。
ueditorPHP版本使⽤⽅法1.ueditor是百度很好⽤的⼀款⽂本编辑器,第⼀次使⽤,在此记录使⽤⽅法。
3.解压:说明dialogs:存放的是弹出对话框对应的资源,还有js⽂件和js⽂件资源lang:语⾔⽂件⽬录php:php⽬录:php⽂件->config.json:配置⽂件themes:主题⽬录third-party:第三⽅插件index.html:demoueditor.all.js:ueditor源码⽂件ueditor.all.min.js:ueditor源码⽂件压缩版ueditor.config.js:配置⽂件(可以创建多个不同版本,在多个地⽅使⽤)ueditor.parse.js:第三⽅插件ueditor.parse.min.js:第三⽅插件压缩版4.在⽂件中建⽴index.html⽂件,引⼊ueditor,两者放在平级⽬录中:如下:5.在index.html中引⼊ueditor,index.html编辑如下:<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>editor测试</title><script src="/ueditor/ueditor.config.js">/*引⼊配置⽂件*/</script><script src="/ueditor/ueditor.all.js">/*引⼊源码⽂件*/</script></head><body><textarea id="content" rows="10" cols="70" style="border:1px solid #E5E5E5;">55222</textarea><script type="text/javascript">UE.getEditor("content");//实例化编辑器传参,id为将要被替换的容器。
UEditor编辑器的使用教程
咱们在开发的时候经常会用到一些所见即所得的编辑器,今天给大家介绍一款由百度开发的UEditor,这个编辑器效果不错,用得起来也很方便简单,大家在开发的时候可以用到这款编辑器。
首先,咱们需要在网上下载这款编辑器:
/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp
我这里下载的是支持jsp的最新版本,它还有支持php,.net的其它版本。
一、完成基本配置:
1.将下载的文件解压到咱们的JavaWeb项目中(如下图):
2.把相应的jar包导入到项目中(如下)
这几个jar包可以在/ueditor/jsp/lib中找到
最后展示的效果如下:
大家可以看到,这里可以完成各种设置(包含字体,表格,表情,图片等东西),整体看来,效果还是非常不错的。
二、参数配置效果
完成基本的配置之,咱们又要学习一下,看怎么来进行一些常用参数的配置。
三、上传图片功能
接下来咱们简单说一下插件的上传图片功能,上传功能是自带的,如果你是jsp+servlet 非常简单,直接使用就可以了,但是我们可以去设计上传的路径与名称。
大家可以在
文件的位置:文件中修改的位置(设置到自己需要的位置)
下面是上传了图片后的效果:
四、Struts2的上传功能
下面做一个扩展,如果咱们的项目是使用的Struts2,那么Struts2的核心过滤器会导致咱们的上传失效。
最近项目中使用到了富文本编辑器,选择的是百度的UEditor。
所以对其进行了研究,发现最近发布了新版本,与以往的用法有的改变。
一下对UEditotr 的是用做一下详细的介绍。
首先是UEditotr的下载,下载地址:/website/download.html在这个页面有很多下载选项,为了简单起见,可以更具开发的环境进行下载。
我用的是JSP,所以下载的是以下的使用说明也都是以JSP的作为介绍,其他的大同小异。
下载完成之后解压出来。
下边开始介绍使用方法:一.导入:将解压好的文件导入工程,我用的是MyEclipse,直接粘贴到工程中的WebRoot下如图:工程中的js文件报错是由于开发工具的问题,不用处理。
二.包的导入:在导入的文件中的jsp->lib下有需要导入的包将这些包拷贝到WEB-INF的lib下导入后有的包不能自动添加,需要手动添加一下。
三.简单例子:在jsp的head中添加:<script type="text/javascript"charset="utf-8"src="ueditor1_4_2-utf8-jsp/ueditor.config.js"></script> <script type="text/javascript"charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.all.js"></script>body中添加:<script id="editor" name="editor" type="text/plain"style="width:1024px;height:500px;"></script><script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor');</script>注意在head中的引用是否正确,一切完成后启动程序,就能看到效果。
百度UEditor编辑器使⽤教程与使⽤⽅法(图⽂)我们在做⽹站的时候,⽹站后台系统⼀般都会⽤到web编辑器,今天笔者就给⼤家推荐⼀款百度UEditor编辑器。
关于这款百度UEditor编辑器官⽹上也有简单的教程,不过看着⽐较费劲,今天笔者就跟⼤家分享⼀下百度UEditor编辑器使⽤教程与使⽤⽅法,希望对⼤家有所帮助。
第⼀:百度UEditor编辑器的官⽅下载地址第⼆:百度UEditor编辑器的功能版本选择当我们进⼊百度UEditor编辑器官⽹点击下载选项后,我们发现⼀共有两个版本供我们选择,⼀个是UBuilder,⼀个是开发版,通过下⾯注释的红⾊⼩字我们可以了解到UBuilder和开发版的区别。
⼀般情况下我们选择UBuilder版本即可。
跟我们以往下载软件的⽅式不同,UEditor采⽤选择性下载。
⾸先是可见功能的选择,共有基本,插⼊,格式化,表格四⼤组,每组下⾯都有若⼲功能按钮,我们可以根据⾃⼰的需求来进⾏选择,如果双击四⼤组则表⽰全选该组按钮。
如果对选择的按钮不满意还可以点击清空选择,有⼀点要提⽰的是如果点击清空选择会清楚掉你原先做过的所有选择。
接着就是隐藏功能,语⾔,服务端版本的选择,隐藏功能默认的是全选,如⾮必要还是不要更改为好。
语⾔选项共分为了中⽂和英⽂两种,默认的是只下载中⽂语⾔包,如果你有需要⽤到英⽂的话可以把英⽂包也加上。
服务端版本⽬前提供了三种,分别为PHP,.NET,JSP,选择完毕后我们就可以点击下载资源包了。
第三:百度UEditor编辑器的配置⽅法技巧1、从官⽹上下载完整源码包,解压到任意⽬录,解压后的源码⽬录结构如下所⽰:_examples:编辑器完整版的⽰例页⾯dialogs:弹出对话框对应的资源和JS⽂件themes:样式图⽚和样式⽂件 php/jsp/.net:涉及到服务器端操作的后台⽂件,根据你选择的不同后台版本,这⾥也会不同,这⾥我们选择phpthird-party:第三⽅插件(包括代码⾼亮,源码编辑等组件)editor_all.js:_src⽬录下所有⽂件的打包⽂件(⽤于发布版本)editor_api.js: API接⼝配置⽂件(开发版本)editor_all_min.js:editor_all.js⽂件的压缩版,建议在正式部署时才采⽤editor_config.js:编辑器的配置⽂件,建议和编辑器实例化页⾯置于同⼀⽬录2、编辑器的实例化页⾯,导⼊编辑器需要的三个⼊⼝⽂件,⽰例代码如下:<script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script><!--使⽤版--><!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>--><!--开发版--><script type="text/javascript" charset="utf-8" src="editor_api.js"></script><script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>3、然后在编辑器的实例化页⾯中创建编辑器实例及其DOM容器,⽰例代码如下:<textarea name="后台取值的key" id="myEditor">这⾥写你的初始化内容</textarea><script type="text/javascript">var editor = new UE.ui.Editor();editor.render("myEditor");//1.2.4以后可以使⽤⼀下代码实例化编辑器//UE.getEditor('myEditor')</script>4、在editor_config.js中查找URL变量配置编辑器在你项⽬中的路径。
百度文本编辑器提供了.net(C#),php,asp,jsp多个版本的开源开发版本下载。
但完整的开发版本的配置稍显麻烦,尤其是v 1.3.5要想比较快速和正确的使用该版本的编辑器,必须手动调整一些配置。
1、将ueditor文件夹加到你的项目解决方案下。
2、找到net文件夹,右键点击“Uploader.cs”确定属性值的设置和下图一致。
3、接下来看Config.cs 。
我是直接去掉了对这跟文件的使用。
觉得这个配置对于项目可能没有必要。
然后看ashx,这里最常用的ashx可能就是ImageUp.ashx和GetRemoteImage.ashx。
前者是在编辑器中上传本地图片时用来调用上传文件的处理程序,后者是用来显示远程图片或者直接搜索图片时,拉取远程图片下载到本地的处理程序。
4、编辑器加载后,上传图片时,一直想显示正在获取文件保存目录,无法点击上传图片的解决办法:打开ueditor.config.js,找到注释掉的SavePath,放开之后就可以显示他注释写法里的两个选项,可以根据实际情况修改。
这个设置是为了让用户手动修改保存的文件夹,我直接设置了一个选项,并且不作为程序保存图片的路径。
我在ImageUp和GetRemoteImage里的路径做了自己的配置,没有使用他的Config.cs 截图如下:如图4-1 ImageSavePath可以做调整或干脆不用,后面的方法是我自己写的,用来配置图片的保存路径的根目录图4-1 Config文件的调整以下代码摘自ImageUp。
<%@WebHandler Language="C#"Class="imageUp" %>using System;using System.Web;using System.IO;using System.Collections;using System.Linq;using COMM;public class imageUp : IHttpHandler{public void ProcessRequest(HttpContext context){if (!String.IsNullOrEmpty(context.Request.QueryString["fetch"])){context.Response.AddHeader("Content-Type","text/javascript;charset=utf-8");context.Response.Write(String.Format("updateSavePath([{0}]);", String.Join(", ", Config.ImageSavePath.Select(x => "\""+ x + "\"").ToArray())));return;}context.Response.ContentType = "text/plain";//上传配置int size = 2; //文件大小限制,单位MB //文件大小限制,单位MBstring[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp"}; //文件允许格式//上传图片Hashtable info = new Hashtable();Uploader up = new Uploader();//此处修改为使用固定路径string path =Config. GetDefaultPath("Upload");// /UEFiles//if (String.IsNullOrEmpty(path))//{// path = Config.ImageSavePath[0];//}//else if (Config.ImageSavePath.Count(x => x == path) == 0)//{// context.Response.Write("{ 'state' : '非法上传目录' }");// return;//}info = up.upFile(context, path + '/', filetype, size); //获取上传状态string title = up.getOtherInfo(context, "pictitle"); //获取图片描述string oriName = up.getOtherInfo(context, "fileName"); //获取原始文件名HttpContext.Current.Response.Write("{'url':'" + info["url"] +"','title':'"+ title + "','original':'"+ oriName + "','state':'"+ info["state"] + "'}"); //向浏览器返回数据json数据}public bool IsReusable{get{return false;}}}经过上述的设置,我发现图片上传本地的时候可以成功,但是却无法正常显示到编辑器,后来我跟断点发现,js文件里的配置还需要改动一下。
使用ThinkPHP框架快速搭建网站这一周一直忙于做实验室的网站,基本功能算是完成了。
比较有收获的是大概了解了ThinkPHP框架。
写一些东西留作纪念吧。
如果对于同样是Web方面新手的你有一丝丝帮助,那就更好了挖。
以前用PHP做过一个很蹩脚的网站,为什么这么说呢,因为写的全是死代码。
做完以后觉得实在是累,前端要div+css,js 后端要php,mysql,这么多东西要弄,十分头疼。
所以,在接到做网站的任务后,我第一时间想到一定要使用开发框架去做,绝不能跟以前一样那么累了。
我选择的是PHP的ThinkPHP框架。
说实话,真的蛮不错的。
瞬间觉得Web开发还是蛮有效率的。
超级链接:ThinkPHP中文网按照套路,首先贴一下实验环境:∙ 1. WAMP(集成的那种,最Easy的几乎不需要配置)∙ 2. ZendStudio7.2(中文网址/,里面提供下载,在线注册机以及使用教程)∙ 3. ThinkPHP框架+百度UEditor编辑器插件∙ 4. Win7-64bit操作系统5. 浏览器(火狐,IE,Chrome),外加火狐FireBug插件用于调试以及偷样式-------------------------------------------------------------华丽分割-------------------------------------------------------------第一步:找网页模板(不会美工,PS,见谅。
)前端页面我找的是一个大学的实验室,这里就不贴了,很普通的那种。
后台直接下载的模板,感觉蛮漂亮的,运行后如下图:第二步:初识百度UEditor插件由于我要做的是实验室的网站。
实验室网站主要内容在如下几个方面:∙介绍实验室的成员∙实验室的项目,成果等实验室的新闻以及学术交流信息可见,信息主要偏重于后台的新闻,文章信息的发布,而前台几乎不存在编辑。
所以重点要在后台实现一个方便的文章发布体系。
引用:/yanghbmail/blog/item/6fc7beec9531e33462d09f2a.htm lkindEditor完整认识 PHP上调用并上传图片说明。
2011年02月03日星期四 20:26最近又重新捣鼓了下kindeditor,之前写的一篇文章/yanghbmail/blog/item/c681be015755160b1d9583e7.htm l感觉有点不太全面细致,所以今天再重新写下。
此文所述KE版本为当前2011年2月3日 20:10:18最新版KindEditor 3.5.2 先看下目录结构我使用的是PHP 所以黄色区域的文件夹是可以删除的。
重命名为:kindeditor看下我的WWW目录:这里的关键文件就是图中的两个其它我划掉的是我自己的文件夹-----------------dome.php----------------------<?php$htmlData = '';if (!empty($_POST['content1'])) {if (get_magic_quotes_gpc()) {echo '上面的';$htmlData = stripslashes($_POST['content1']);} else {echo '下面的';$htmlData = $_POST['content1'];}}?><!doctype html><html><head><meta charset="utf-8" /><title>KindEditor PHP</title><link rel="stylesheet" href="./kindeditor/examples/index.css" /> //此处的引入文件位置路径为相对于该PHP文件的位置此为demo.php<script charset="utf-8" src="./kindeditor/kindeditor.js"></script> //此处的引入文件位置路径为相对于该PHP文件的位置此为demo.php<script>KE.show({id : 'content1',imageUploadJson : '../../php/upload_json.php', //<<相对于kindeditor3.5.5\plugins\image\image.htmlfileManagerJson : '../../php/file_manager_json.php', //<<相对于kindeditor3.5.5\plugins\file_manager\file_manager.htmlallowFileManager : true,afterCreate : function(id) {KE.event.ctrl(document, 13, function() {KE.util.setData(id);document.forms['example'].submit();});KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {KE.util.setData(id);document.forms['example'].submit();});}});</script></head><body class="ke-content"><?php echo $htmlData; ?><form name="example" method="post" action="demo.php"><textarea id="content1" name="content1" cols="100" rows="8"style="width:700px;height:200px;visibility:hidden;"><?php echo htmlspecialchars($htmlData); ?></textarea><br /><input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)</form></body></html>注意上面的4处红色文件的位置。
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。
开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。
最近在开发程序的时候需要集成一个富文本编辑器,UEditor的UI及UE比CKEditor、KindEditor要好出不少。
所以简单地对UEditor研究了一下,记录于此。
一、下载UEditor编辑器
UEditor官方网站:/
在下载频道可以下载到最新版本的UEditor
UEditor的下载方式分为两种,完整下载与定制下载,完整下载提供UTF-8与GBK两种编码的版本,定制下载目前只有UTF-8编码,推荐使用定制下载,按需求定制,如果程序不是UTF-8编码,可以使用EditPlus等工具将压缩包里所有的HTML及JS文件转码,记得同时修改HTML文件中的charset=utf-8。
二、精简UEditor编辑器
完整版的相关文档与示例页面较多,可以自行研究一下,下面为定制版中可以精简的文件。
index.html是所定制的UEditor编辑器的示例文件,删除之。
editor.js与editor.min.js内容相同,editor.min.js是editor.js的压缩版,使用时加载editor.min.js 即可,所以editor.js也可以删除。
三、将UEditor部署到PHP程序上
1.将UEditor的所有文件放在PHP程序的目录中,这里我把文件放在/ueditor目录下。
2.在网页中引入UEditor文件
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor.min.js"></script>
3.在textarea标签下初始化UEditor
<script type="text/javascript">
var editor = new UE.ui.Editor();
textarea:'name'; //与textarea的name值保持一致
editor.render('name');
</script>
四、配置UEditor编辑器
editor_config.js是UEditor的配置文件,首先对路径进行配置。
修改第27行左右的路径配置(根据版本不同可能会有变动)
URL = "ueditor/"; //根据实际情况配置
保存,OK搞定,UEditor编辑器就能使用了,此时同样可以使用POST或者GET接收到提交的数据。
editor_config.js里还有很多常用的配置项目,比如编辑器初始内容、编辑器高度等等,需要配置时只需去掉该行代码前面的注释符号//即可。
使用定制版的童鞋可以下载一个完整版,里面的配置文件比较完整,有些东西可以COPY 过来。
五、UEditor代码高亮
UEditor代码高亮使用了第三方的高亮JS组件–SyntaxHighlighter,在测试的过程中问题不少,使用UEditor编辑器“插入代码”功能插入代码并提交到数据库后,在显示页面代码是不会高亮显示的,需要在该页面加载一下JS和CSS文件。
<script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" />
<script>
SyntaxHighlighter.all() //执行代码高亮中文域名中心
</script>
还有一个问题,当再次使用UEditor编辑之前提交到数据库的代码时,编辑器会自动过滤掉代码中的很多标签,今天在微博上@了一下UEditor团队,UEditor团队的人说需要先转义。
我在提交至数据库之前用PHP的htmlspecialchars函数进行转义:
$content = htmlspecialchars($_POST[codeContent]);
输出页面执行htmlspecialchars_decode函数后输出:
echo htmlspecialchars_decode($Row["content"]);
再查看了官方的文档,官方推荐把textarea容器更换为script容器
<script type="text/plain" id="content" name="content">
//从数据库中取出的内容打印到此处南昌网站建设
</script>
此处采用了script标签作为编辑器容器对象,并设置了其类型是纯文本,从而在避免了标签内部JS代码执行的同时解决了使用传统的textarea标签作为容器所带来的一次额外转码问题,我同时使用了转义和更换textarea容器的方式。
简单测试了HTML、PHP、JA V ASCRIPT和C++代码,暂时没发现问题。
总体来说,UEditor是一个很不错的富文本编辑器,但是由于开发时间不长,还需慢慢完善。