怎么将PHPCMS V9网站程序中整合添加百度编辑器UEDITOR

图片 2

UEditor效果图

预备专门的学业:

分明性,大多数开源程序后台都会自带编辑器,不过洋英国人会埋怨后台自带的编辑器效率非常不足有力,或许利用不是超级低价,明日无忧主机小编再度写一篇关于百度编辑器的教程,正是把phpcms的暗许编辑器替换到都百货度编辑器。
具体方法如下
1、先到官方网址下载能源包(先定制编辑器导航工具,自定义增添供给的功效再下载)

一、简介

1.从UEditor 官方网站上面下载
最新版本的UEditor,今后新型版本为ueditor1_4_3-utf8-php,请下载php版本。

图片 1

UEditor是二个开源无偿的编辑器,由百度web前端研究开发部开荒所见即所得富文本web编辑器,具有轻量,可定制,重视客商体验等风味,开源基于BSD左券,允许私行使用和校勘代码。

2.大家转移的是 news
模块下的编辑器,也正是情报模块,请保管news/admin/上边,news_conadd.php,news_conmod.php,已经破解出源码,如果未有,请自行百度!

百度编辑器

官方网站:

最早入手:

2、上传到phpcms暗中同意的js文件路线,上传后的文本路线如下
staticsjsueditor
3、张开/phpcms/libs/classes/form.class.php,找到如下代码:
if(!defined(‘EDITOR_INIT’)) {
$str = ‘<script type=”text/javascript”
src=”‘.JS_PATH.’ckeditor/ckeditor.js”></script>’;
define(‘EDITOR_INIT’, 1);
}
替换成:
if(!defined(‘EDITOR_INIT’)) {
$str = ‘<script type=”text/javascript”
src=”‘.JS_PATH.’ueditor/editor_config.js”></script>’;
$str .= ‘<script type=”text/javascript”
src=”‘.JS_PATH.’ueditor/editor_all.js”></script>’;
$str .= ‘<link rel=”stylesheet”
href=”‘.JS_PATH.’ueditor/themes/default/ueditor.css”/>’;
define(‘EDITOR_INIT’, 1);
}
$str .= “<script type=”text/javascript”>rn”;
$str .= “var editor = new
baidu.editor.ui.Editor();editor.render(‘$textareaid’);”;
$str .= ‘</script>’;

二、下载地址

1.解压下载的滑坡包直接到phpweb根目录

图片 2

合法下载:

2.打开news_conadd.php文件夹

代码

官网络下载完整源码包,解压到任性目录,解压后的源码目录构造如下所示:
_examples:编辑器完整版的率先垂范页面 dialogs:弹出对话框对应的财富和JS文件
themes:样式图片和样式文件
php/jsp/.net:涉及到服务器端操作的后台文件,依照你选择的差异后台版本,这里也会不一样,这里应该是jsp,php,.net
third-party:第三方插件(包罗代码高亮,源码编辑等构件)
editor_all.js:_src目录下有所文件的打包文件
editor_all_min.js:editor_all.js文件的压缩版,建议在正规安排时才使用
editor_config.js:编辑器的布局文件,提商谈编辑器实例化页面置于同一目录

找到以下代码:

更改后效果

抑或英特网搜寻外人配置好的实例,那样和和气气就不要折腾了。小编要好弄的,结果折腾了许久,差一些想吐弃了!

 代码如下

4、打开/statics/js/ueditor/editor_config.js,找到如下代码:
var URL;
/**
*
此处配置写法适用于UEditor小组成员支付应用,外界陈设客商请依据上述表达方式配置就可以,提议保留下边两行,以极度可在具体每一个页面配置window.UEDITOKuga_HOME_URL的功能。
*/
var tmp = location.protocol.indexOf(“file”)==-1 ? location.pathname :
location.href;
URL =
window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf(“/”)+1).replace(“_examples/”,””卡塔尔.replace(“website/”,””卡塔尔;//这里你能够计划成ueditor目录在您网址的绝对路线也许相对路线(指以http起头的相对路线)

作者下载的是付出版 [1.2.5.1 .Net 版本] 二〇一三年5月五日,最新版本。

<input type=”hidden” name=”body” value=”<?php echo $body; ?>”
/>
<script type=”text/javascript”
src=”../../kedit/KindEditor.js”></script>
<script type=”text/javascript”>

替换成:
var URL;
var tmp = window.location.pathname,
URL= “/statics/js/ueditor/”
/**
*
此处配置写法适用于U艾德itor小组成员支付应用,外部安排客户请依照上述表达方式计划就可以,提出保留下边两行,以同盟可在切实每个页面配置window.UEDITORAV4_HOME_URL的功能。
*/
/ar tmp = location.protocol.indexOf(“file”)==-1 ? location.pathname :
location.href;
//URL =
window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf(“/”)+1).replace(“_examples/”,””卡塔尔国.replace(“website/”,””卡塔尔国;//这里您能够安顿成ueditor目录在你网址的相对路径或许相对路线(指以http开首的相对路线)
即使把默许的“var tmp”和“UHighlanderL”注释掉,换到都百货度编辑器的地点;

三、布署方法

var editor = new KindEditor(“editor”);
 editor.hiddenName = “body”;
 editor.editorWidth = “680px”;
 editor.editorHeight = “300px”;
 editor.skinPath = “../../kedit/skins/default/”;
 editor.uploadPath = “../../kedit/upload_cgi/upload.php”;
 editor.imageAttachPath=”news/pics/”;
 editor.iconPath = “../../kedit/icons/”;
 editor.show();
   function KindSubmit() {
editor.data();
 }

5、改进编辑器默许宽度和冲天,因为phpcms默许编辑器未有那么大:
在/statics/js/ueditor/editor_config.js找到112、113行,
//,initialFrameWidth:1000 //初叶化编辑器宽度,暗中认可1000
//,initialFrameHeight:320 //初阶化编辑器中度,暗中同意320
替换成:

代码构造图

 </script>

,initialFrameWidth:655 //伊始化编辑器宽度,默许1000
,initialFrameHeight:400 //初叶化编辑器低度,暗许320
这么,在丰盛篇章时,编辑器就不会变形。

率先步:在品种的任一文件夹中树立二个用于贮存U艾德itor相关财富和文书的目录,此处在类型根目录下树立,起名字为ueditor。第二步:拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中。个中,除了ueditor目录之外的其它文件均为实际品种文件,此处所列仅供示例。第三步:为轻松起见,此处将以根目录下的index.php页面作为编辑器的实例化页面,用来展现UEditor的总体版效果。在index.php文件中,首开头入编辑器要求的多少个入口文件,示例代码如下:

接下来直接注释掉,也许去除。


复制代码 代码如下:meta “Content-Type”
content=”text/html; charset=UTF-8″title编辑器完整版实例/titlescript
type=”text/javascript” src=”ueditor/editor_config.js”/scriptscript
type=”text/javascript” src=”ueditor/editor_all.js”/script

加入

第四步:然后在index.php文件中开创编辑器实例及其DOM容器。具体代码示比方下:

 代码如下

复制代码 代码如下:textarea
name=”后台取值的key” 这里写你的开端化内容/textareascript
type=”text/javascript” var editor = new UE.ui.Editor(卡塔尔国;
editor.render(“myEditor”卡塔尔(قطر‎; //1.2.4今后能够运用一下代码实例化编辑器
//UE.getEditor(‘myEditor’卡塔尔(قطر‎/script最终一步: 在/UETest/ueditor/
editor_config.js中查找U奥迪Q5L变量配置编辑器在您项目中的路

<script id=”container” name=”body”
type=”text/plain”></script>

复制代码
代码如下://刚烈推荐以这种办法张开相对路线配置UXC60L=
window.UEDITOGL450_HOME_URL||”/UETest/ueditor/”;

接下来在上边插入

于今,叁个总体的编辑器实例就早就布署到大家的品种中了!在浏览器中输入
运营下试试UE强盛的功用吗!

 代码如下

四、注意事项

<!– 配置文件 –>
<script type=”text/javascript”
src=”../../ueditor/ueditor.config.js”></script>
<!– 编辑器源码文件 –>
<script type=”text/javascript”
src=”../../ueditor/ueditor.all.js”></script>
<!– 实例化编辑器 –>
<script type=”text/javascript”>
var ue = UE.getEditor(‘container’,{
   initialFrameWidth:”800″,
   initialFrameHeight:”200″
  });
  
</script>

1.在引用editor_config.js时,最好先于editor_all.js加载,不然一定情景下大概会合世报错。2.一旦想编辑器赋先导值,请参见_examples文件的片段例子代码,只怕阅读官方给出的文书档案表达。3.
亟需小心的是编辑器能源文件根路线。它所代表的意义是:以编辑器实例化页面为这段日子路径,指向编辑器能源文件的路线。鉴于超级多同学在利用编辑器的时候现身的各个路线难点,此处刚烈建议大家利用”相对于网址根目录的相对路线”实行配置。”相对于网址根目录的相对路线”相当于以斜杠早先的形如”/UETest/ueditor/”那样的不二诀要。

如此那般,新闻的丰裕就好了。

别的如若您使用的是相对路线,比如”ueditor/”(相对于图表1门路结构卡塔尔(قطر‎,即使站点中有三个不在同一层级的页面须要实例化编辑器,且援引了同一UEditor的时候,可能不适用于每种页面包车型大巴编辑器。因而,UEditor提供了针对不相同页面包车型地铁编辑器可独自安顿的根路线,具体来讲,在必要实例化编辑器的页面最最上端写上如下代码就能够。当然,需求令这里的U汉兰达L等于对应的安插。window.UEDITO科雷傲_HOME_U奥迪Q5L
=”/xxxx/xxxx/”;举个例子:依据图片1的目录构造

上边正是新闻的校正;

假设您在index.aspx里接受编辑器,那么在editor_config.js里最上面的var
U卡宴L就改成 var U猎豹CS6L = “/UETest/ueditor/”

手续和增长相符只是在实例化编辑器后边参预

五、置身事外难题

 代码如下

1.乱码例如运维成功了,而产出乱码的话,请检查你的编码情势。UEditor引用的本子带有编码格局和meta标签。笔者下载的是utf-8版,运行起来就现身了乱码,作者把引用的台本中的charset=”utf-8″
去掉就从不难题了。

 <script type=”text/javascript”>
var ue = UE.getEditor(‘container’,{
   initialFrameWidth:”800″,
   initialFrameHeight:”200″,
   
  });
  
  ue.ready(function() {
   //设置编辑器的内容
   ue.setContent(‘<?php echo
htmlspecialchars_decode($body);?>’);
   
   
  });
  
</script>

2.上传图片出错假使上传图片现身黄色的叉叉,或然上盛传四分之二不曾影响。把net文件夹上边包车型大巴web.config删除,原因是它里面使用.net
4.0的结构,而3.5和以下的版本就能够有标题,删除不会有震慑。

那样 更改就足以了。

六、末了,附上本人的代码

只顾:更动完毕编辑器后,原本phpweb自带的分页就无法应用了。

复制代码 代码如下:%@ Page Language=”C#”
AutoEventWireup=”true” CodeFile=”Test2.aspx.cs” Inherits=”Test2″
%!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”html
xmlns=””head runat=”server” titleUEditor测试/title script
src=”ueditor/editor_config.js” type=”text/javascript”/script script
src=”ueditor/editor_all.js” type=”text/javascript”/script/headbody form
runat=”server” div asp:TextBox ID=”TextBox1″ runat=”server”
Width=”500px” Height=”300px” TextMode=”MultiLine”/asp:TextBox script
type=”text/javascript” UE.get艾德itor(‘TextBox1’,{
//这里能够选取本人索要的工具开关名称,此处仅接收如下七个 toolbars:[
[‘fullscreen’, ‘source’, ‘|’, ‘undo’, ‘redo’, ‘|’, ‘bold’, ‘italic’,
‘underline’, ‘strikethrough’, ‘superscript’, ‘subscript’,
‘removeformat’, ‘formatmatch’,’autotypeset’,’blockquote’, ‘pasteplain’,
‘|’, ‘forecolor’, ‘backcolor’, ‘insertorderedlist’,
‘insertunorderedlist’,’selectall’, ‘cleardoc’, ‘|’, ‘rowspacingtop’,
‘rowspacingbottom’,’lineheight’,’|’, ‘customstyle’, ‘paragraph’,
‘fontfamily’, ‘fontsize’, ‘|’, ‘directionalityltr’, ‘directionalityrtl’,
‘indent’, ‘|’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’,
‘justifyjustify’, ‘|’,’touppercase’,’tolowercase’,’|’, ‘link’, ‘unlink’,
‘anchor’, ‘|’, ‘imagenone’, ‘imageleft’, ‘imageright’,’imagecenter’,
‘|’, ‘insertimage’, ’emotion’,’scrawl’,
‘insertvideo’,’music’,’attachment’, ‘map’, ‘gmap’,
‘insertframe’,’highlightcode’,’webapp’,’pagebreak’,’template’,’background’,
‘|’, ‘horizontal’, ‘date’, ‘time’, ‘spechars’,’snapscreen’, ‘wordimage’,
‘|’, ‘inserttable’, ‘deletetable’, ‘insertparagraphbeforetable’,
‘insertrow’, ‘deleterow’, ‘insertcol’, ‘deletecol’, ‘mergecells’,
‘mergeright’, ‘mergedown’, ‘splittocells’, ‘splittorows’, ‘splittocols’,
‘|’, ‘print’, ‘preview’, ‘searchreplace’,’help’] ],
//focus时自动清空伊始化时的开始和结果 autoClearinitialContent:true,
//关闭字数总括 wordCount:false, //关闭element帕特h
elementPathEnabled:false
//愈来愈多别的参数,请仿照效法editor_config.js中的配置项 }卡塔尔(قطر‎ /script /div
/form/body/html

图片 3

图片 4

上面是订正消息的时候:

图片 5

写在最终:

百度UEditor 的上传图片路线是统一暗中认可的,若是要改进,请展开ueditor/php/config.json 上边举行更正。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图