phpcms中的ckeditor编辑器升级方法(2)-木庄网络博客

代码如下:

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.打开ckeditor\skins\moonoeditor_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中使用。

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

更多PHPCMS内容来自木庄网络博客

标签：PHPCMS

返回前面的内容