升级phpcms中的php版本,phpcms中的ckeditor编辑器升级方法

最新推荐文章于 2022-11-09 15:21:28 发布

Wakune

最新推荐文章于 2022-11-09 15:21:28 发布

阅读量328

点赞数

文章标签：升级phpcms中的php版本

准备：

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 = ''; 这一行(我想应该是插件不兼容问题)

复制代码代码如下:

/**

* For licensing, see LICENSE.html or http://ckeditor.com/license

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;

};

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");

}

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("请输入子标题");

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('

'+url+' 查看 | 插入 | 删除

');

}

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

找到：

复制代码代码如下:

CKEDITOR.plugins.pagebreakCmd={exec:function(a){var b=a.lang.pagebreak.alt,b=CKEDITOR.dom.element.createFromHtml('

替换为：

复制代码代码如下:

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 .= '';

define('IMAGES_INIT', 1);

}

添加：

复制代码代码如下:

$ext_str.="

if(!$disabled_page){

$ext_str.="分页符子标题";

}

$ext_str.="附件上传

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;

}

.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中使用。

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

Wakune

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
升级phpcms中的php版本,phpcms中的ckeditor编辑器升级方法

准备：1.当前phpcms最新版本(自带ckeditor 版本为3.6.6)2.准备替换的最新ckeditor,版本4.2.1一、开始之前说下原版ckeditor与phpcms的ckeditor的一些主要区别：1.原版的分页符是一个div标签，而phpcms中编辑器的是[page]。2.phpcms编辑器下方，多了3个按钮，“分页符”，“子标题”，“附件上传”。3.由于ckeditor的版本不一样...
复制链接

扫一扫