门童网，靠谱的在线交易网站 会员购买 自助广告购买 帮助 每日签到

源码交易平台

申请开店
全部分类
首页 商业源码 精品源码 游戏源码 视频教程 织梦模板 免费源码 任务大厅
商品禁止做非法 传播 学习之用 只是借鉴
;

phpcms v9中的ckeditor编辑器升级教程；【 教材来源门童网视频教程

本站优惠价
￥5.00
无折扣 原价：￥0
  • 库存
  • 销量
  • 10000
  • 0
担保交易，安全保证，有问题不解决可申请退款。
  • 分享

源码森林之都

  • 信誉：
  • 掌柜：
  • 我的可乐瓶
  • 宝贝：
  • 32993件
  • 创店：
  • 2019-05-02
  • 联系：
已缴纳保证金1000.00元
  • 描述
    4.99
  • 发货
    5.00
  • 售后
    4.99
源码交易网

1.png

首先说明一下为什么升级？网上很多人升级成了ueditor，可从fckedotror 到 ckeditor，我个人都是比较喜欢的，特别是开放式的插件方式。另外一个就是至少要懂得升级和插件的开发，这样也能给phpcms增色不少

准备：

1.当前phpcms最新版本（自带ckeditor 版本为3.6.6）

2.准备替换的最新ckeditor,版本4.2.1

 

一、开始之前说下原版ckeditor与phpcms的ckeditor的一些主要区别：

1.原版的分页符是一个div标签，而phpcms中编辑器的是[page]。

2.phpcms编辑器下方，多了3个按钮，“分页符”，“子标题”，“附件上传”。

3.由于ckeditor的版本不一样，一些自己开发的插件不能兼容。

二、下面开始替换。

1.备份phpcms的 /statics/js/ckeditor 文件夹（重命名即可）。以及/phpcms/libs/classes/form.class.php （这个文件中有个方法就是创建一个编辑器，使用一些编辑器的工具栏配置需要在这里操作）

2.把新版ckedtior复制到/statics/js/下。打开/statics/js/ckeditor/config.js 文件，用旧版的config.js替换。但请注释掉 config.extraPlugins = ''; 这一行（我想应该是插件不兼容问题）


代码如下:


/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/</p><p>CKEDITOR.editorConfig = function( config ) {
   // Define changes to default configuration here. For example:
   // config.language = 'fr';
   // config.uiColor = '#AADC6E';
   
   config.uiColor = '#f7f5f4';
   config.width = '';
   config.removePlugins = 'elementspath,scayt';
   config.disableNativeSpellChecker = false;
   config.resize_dir = 'vertical';
   config.keystrokes =[[ CKEDITOR.CTRL + 13 /*Enter*/, 'maximize' ]];    
   config.extraPlugins = '';
   config.enterMode = CKEDITOR.ENTER_BR; 
   config.shiftEnterMode = CKEDITOR.ENTER_P;
   config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
};</p><p>
CKEDITOR.on( 'instanceReady', function( ev ){ with (ev.editor.dataProcessor.writer) { setRules("p", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h1", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h2", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h3", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h4", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h5", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("div", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("table", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("tr", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("td", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("iframe", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("li", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("ul", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("ol", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); } }); 
//CKEDITOR.plugins.load('pgrfilemanager');
function insert_page(editorid)
{
   var editor = CKEDITOR.instances[editorid];
   editor.insertHtml('[page]');
   if($('#paginationtype').val()) {
       $('#paginationtype').val(2);
       $('#paginationtype').css("color","red");
   }
}</p><p>function insert_page_title(editorid,insertdata)
{
   if(insertdata)
   {
       var editor = CKEDITOR.instances[editorid];
       var data = editor.getData();
       var page_title_value = $("#page_title_value").val();
       if(page_title_value=='')
       {
           $("#msg_page_title_value").html("<font color='red'>请输入子标题</font>");
           return false;
       }
       page_title_value = '[page]'+page_title_value+'[/page]';
       editor.insertHtml(page_title_value);
       $("#page_title_value").val('');
       $("#msg_page_title_value").html('');
       if($('#paginationtype').val()) {
           $('#paginationtype').val(2);
           $('#paginationtype').css("color","red");
       }
   }
   else
   {
       $("#page_title_div").slideDown("fast");
   }
}
var objid = MM_objid = key = 0;
function file_list(fn,url,obj) {
   $('#MM_file_list_editor1').append('<div id="MM_file_list_'+fn+'">'+url+' <a href='#' onMouseOver='javascript:FilePreview("'+url+'", 1);' onMouseout='javascript:FilePreview("", 0);'>查看</a> | <a href="javascript:insertHTMLToEditor('<img src='+url+'>',''+fn+'')">插入</A> | <a href="javascript:del_file(''+fn+'',''+url+'','+fn+')">删除</a>
');
}

3.打开/statics/js/ckeditor/ckeditor.js 做一些修改，目的是 把工具栏上的分页按钮与phpcms的分页保持一致。

找到：


代码如下:


CKEDITOR.plugins.pagebreakCmd={exec:function(a){var b=a.lang.pagebreak.alt,b=CKEDITOR.dom.element.createFromHtml('<div style="page-break-after: always;"contenteditable="false" title="'+b+'" aria-label="'+b+'" data-cke-display-name="pagebreak" class="cke_pagebreak"></div>',a.document);a.insertElement(b)},context:"div",allowedContent:{div:{styles:"!page-break-after"},span:{match:function(a){return(a=a.parent)&&"div"==a.name&&a.styles["page-break-after"]},styles:"display"}},requiredContent:"div{page-break-after}"};

替换为：


代码如下:


CKEDITOR.plugins.pagebreakCmd={exec:function(a){a.insertHtml('[page]');o=document.getElementById('paginationtype');o.options[2].selected = true}};

 4.打开/phpcms/libs/classes/form.class.php 添加一些内容，目的是加上编辑器底部的三个按钮。（phpcms之前是在 ckeditor.js中做的。）

在下面代码后面


代码如下:


if(!defined('IMAGES_INIT')) {
           $ext_str .= '<script type="text/javascript" src="'.JS_PATH.'swfupload/swf2ckeditor.js"></script>';
           define('IMAGES_INIT', 1);
       }

添加：


代码如下:


$ext_str.="<div class="cke_footer">";
       if(!$disabled_page){
           $ext_str.="<a href="javascript:insert_page('content')">分页符</a><a href="javascript:insert_page_title('content')">子标题</a>";
       }
       $ext_str.="<a onclick="flashupload('flashupload', '附件上传','{$textareaid}','','{$allowuploadnum},{$alowuploadexts},{$allowbrowser}','{$module}','{$catid}','{$authkey}');;return false;" href="javascript:void(0);">附件上传</a>
</div>";

5.复制旧版ckeditor/skins/kama/images/文件夹下的文件 到 新版ckeditor/skins/moono/images/下。目的是一些样式的需要。

6.打开ckeditorskinsmoonoeditor_gecko.css文件，在最后加入三个按钮的样式即可


代码如下:


/*phpcms 新增编辑器底部按钮样式*/
.cke_top {
   background: url("images/line.png") repeat-x scroll 0 0 transparent;
}
.cke_footer {
   float: left;
   margin-top: 3px;
}
.cke_footer a,  .cke_footer a:hover,  .cke_footer a:visited,.cke_footer a:active {
   background: url("images/cke_fot.gif") repeat-x scroll left bottom transparent;
   border: 1px solid #E0E0E0;
   color: #666666;
   cursor: pointer;
   display: block;
   float: left;
   height: 19px;
   line-height: 19px;
   margin-right: 8px;
   padding: 0 10px;
}
.cke_footer a:hover {
   background-position: left top;
}</p><p>
.editor_bottom {
   clear: both;
   height: 12px;
   top:-28px;
   position: relative;
}
#page_title_div {
   display: none;
   height: 78px;
   left: 18px;
   position: absolute;
   top: -120px;
   width: 295px;
   z-index: 99999;
}
#page_title_div table {
   background: none repeat scroll 0 0 #FFFFFF;
   border: 2px solid #D5E0E6;
   height: 78px;
   width: 295px;
}
#page_title_div table td {
   border: medium none;
}
#page_title_div table td.title {
   color: #333333;
   font: 18px/31px "MicroSoft YaHei","SimHei";
   height: 26px;
   margin: 0;
   padding: 0 0 0 12px;
   text-align: left;
}
#page_title_div a.close span {
   display: none;
}
#page_title_div a.close {
   background: url("images/cross.png") no-repeat scroll left 3px transparent;
   display: block;
   float: right;
   height: 16px;
   margin-right: 10px;
   width: 16px;
}
#page_title_div a.close:hover {
   background-position: left -46px;
}
.content_attr {
   background: none repeat scroll 0 0 #FFFFCC;
   border: 1px solid #CCCCCC;
   margin-top: 6px;
   padding: 5px 8px;
}
#Capture {
   color: #474747;
   font-size: 12px;
   line-height: 20px;
}
#Capture font {
   color: #FF0000;
}
#Capture a {
   background: url("images/cdw.png") no-repeat scroll 0 0 transparent;
   color: #0075C0;
   display: inline-block;
   padding-left: 20px;
   text-decoration: none;
}
#Capture a:hover {
   text-decoration: underline;
}
#Capture #CaptureDown {
   background-image: url("images/cd.png");
}

到此，ckeditor编辑器升级完成，需要说明一下的是，phpcms本身自带一个capture插件，本次升级没有考虑它，一是用处不大，而是只能在ie中使用。

如有什么疑问或错误，请告知，谢谢！



[查看全部评价]
  • 商品问答
  • 交易规则

84301461640083.jpg

联系我们
Q Q：2303259007
邮箱：mentongwang@163.com
时间：09:00 - 19:00
源码交流群：972275425门童网交流①群

微信扫描关注我们