phpcms中的ckeditor编辑器升级方法phpcmsCMS教程 - phpcms - 爱建站

爱建站,dedecms,phpcms,帝国cms,WordPress,discuz,ecshop,z-blog,UcHome,UCenter,风讯CMS,科汛cms,新云cms

SEO SEO

首页  >   phpcms > phpcms中的ckeditor编辑器升级方法phpcmsCMS教程  >  正文

phpcms中的ckeditor编辑器升级方法phpcmsCMS教程

2018-09-27 06:51:34 向站长提问 编辑: admin 阅读:

 

准备: 1 当前phpcms最新版本(自带ckeditor 版本为3 6 6) 2 准备替换的最新ckeditor,版本4 2 1   一、开始之前说下原版ckeditor与phpcms的ckeditor的一些主要区别: 1 原版的分页符是一个div标签,而phpcms中编辑器的是[page]


准备:

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.打开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中的ckeditor编辑器升级方法phpcmsCMS教程
http://www.yuedudg.cn/article/71161.html

 

友情链接
wp之家 zblog之家 帝国cms常识
discuz经验网 织梦之家 phpcms之家
ecshop经验网 cms综合网


Tags:


手机浏览本文
phpcms中的ckeditor编辑器升级方法phpcmsCMS教程

phpcms中的ckeditor编辑器升级方法phpcmsCMS教程

站内推荐

网站分类

标签列表

关于我们
文章内容来源互联网仅供参考,如果还有疑问请联系我们!我们将竭力帮您解决您的问题
联系我们:

QQ: 397423577 

email:397423577@qq.com

微信:ganenboy