中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

phpcms中如何給ckeditor編輯器升級(jí)

2019-12-03    來(lái)源：愛站科技

容器云強(qiáng)勢(shì)上線！快速搭建集群，上萬(wàn)Linux鏡像隨意使用

隨著科技的發(fā)展，現(xiàn)在很多軟件都在不斷更新這樣才能跟上發(fā)展步伐，在phpcms中都會(huì)使用到編輯器，那么你知道phpcms中如何給ckeditor編輯器升級(jí)嗎？下面我們就跟小編一起去看看吧。

準(zhǔn)備：

1.當(dāng)前phpcms最新版本（自帶ckeditor 版本為3.6.6）

2.準(zhǔn)備替換的最新ckeditor,版本4.2.1

?

一、開始之前說(shuō)下原版ckeditor與phpcms的ckeditor的一些主要區(qū)別：

1.原版的分頁(yè)符是一個(gè)div標(biāo)簽，而phpcms中編輯器的是[page]。

2.phpcms編輯器下方，多了3個(gè)按鈕，“分頁(yè)符”，“子標(biāo)題”，“附件上傳”。

3.由于ckeditor的版本不一樣，一些自己開發(fā)的插件不能兼容。

二、下面開始替換。

1.備份phpcms的 /statics/js/ckeditor 文件夾（重命名即可）。以及/phpcms/libs/classes/form.class.php （這個(gè)文件中有個(gè)方法就是創(chuàng)建一個(gè)編輯器，使用一些編輯器的工具欄配置需要在這里操作）

2.把新版ckedtior復(fù)制到/statics/js/下。打開/statics/js/ckeditor/config.js 文件，用舊版的config.js替換。但請(qǐng)注釋掉 config.extraPlugins = ''; 這一行（我想應(yīng)該是插件不兼容問題）

?

復(fù)制代碼
代碼如下:

/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* 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("請(qǐng)輸入子標(biāo)題");
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 做一些修改，目的是 把工具欄上的分頁(yè)按鈕與phpcms的分頁(yè)保持一致。

找到：

?

復(fù)制代碼
代碼如下:

CKEDITOR.plugins.pagebreakCmd={exec:function(a){var b=a.lang.pagebreak.alt,b=CKEDITOR.dom.element.createFromHtml('
?
',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}"};

?

替換為：

?

復(fù)制代碼
代碼如下:

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 添加一些內(nèi)容，目的是加上編輯器底部的三個(gè)按鈕。（phpcms之前是在 ckeditor.js中做的。）

在下面代碼后面

?

復(fù)制代碼
代碼如下:

if(!defined('IMAGES_INIT')) {
$ext_str .= '';
define('IMAGES_INIT', 1);
}

?

添加：

?

復(fù)制代碼
代碼如下:

$ext_str.="
";
if(!$disabled_page){
$ext_str.="分頁(yè)符子標(biāo)題";
}
$ext_str.="附件上傳
";

?

5.復(fù)制舊版ckeditor/skins/kama/images/文件夾下的文件 到 新版ckeditor/skins/moono/images/下。目的是一些樣式的需要。

6.打開ckeditor\skins\moonoeditor_gecko.css文件，在最后加入三個(gè)按鈕的樣式即可

?

復(fù)制代碼
代碼如下:

/*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編輯器升級(jí)完成，需要說(shuō)明一下的是，phpcms本身自帶一個(gè)capture插件，本次升級(jí)沒有考慮它，一是用處不大，而是只能在ie中使用。

看完后你知道phpcms中如何給ckeditor編輯器升級(jí)了嗎？上文中我就把ckeditor編輯器升級(jí)的方法分享給大家，希望你們能從中學(xué)到一些東西。

標(biāo)簽： PHPCMS ckeditor編輯器

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。

上一篇:PHPCMS V9如何定時(shí)發(fā)布文章

下一篇:PhpCms地區(qū)管理的教程