帝国cms后台正文编辑器中的一键排版功能导致加粗字体移位的解决方法
时间:2024年03月28日
/来源:网络
/编辑:佚名
帝国cms后台编辑器使用ckeditor,其中自带的一键排版功能可以很方便的把文章格式化,
但如果遇到加粗字体,比如b或strong标签,这部分文字会自动移位,如下面的效果:
帝国cms后台正文编辑器中的一键排版功能导致加粗字体移位的解决方法图1
执行一键排版后,加粗部分变成了独立行:
帝国cms后台正文编辑器中的一键排版功能导致加粗字体移位的解决方法图2
这样同一行中有加粗字时会造成困扰,可以通过下面的方法解决。
打开/e/admin/ecmseditor/infoeditor/plugins/autoformat/plugin.js,注释掉加粗字的处理部分,修改后完整的代码如下:
CKEDITOR.plugins.add('autoformat',
{
init: function(editor)
{
//plugin code goes here
var pluginName = 'autoformat';
editor.addCommand(pluginName, new CKEDITOR.autoformatCommand());
editor.ui.addButton('autoformat',
{
label: '一键排版',
command: 'autoformat',
icon: CKEDITOR.plugins.getPath('autoformat') + 'images/autoformat.gif'
});
}
});
CKEDITOR.autoformatCommand = function(){};
CKEDITOR.autoformatCommand.prototype =
{
async:true,
exec : function( editor )
{
FormatText(editor);
}
};
if(window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for(var i=0;i<attrs.length;i++){
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i<childS.length; i++) {
if(childS[i].nodeType==1){
anyString += childS[i].tagName=="BR" ? 'n' : childS[i].innerText;
}else if(childS[i].nodeType==3){
anyString += childS[i].nodeValue;
}
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
}
);
}
//格式化
function FormatText(editor) {
var myeditor = editor;
if (myeditor.mode=="wysiwyg"){
var tempimg = new Array();
var temptable = new Array();
var tempobject = new Array();
var isPart = false; //暂时无法实现局部格式化
if (!isPart) {
var tmpDiv=document.createElement("DIV");
var editorhtml = myeditor.getData();
//page
//editorhtml = editorhtml.replace(/<div style="page-break-after: always;?">s*<span style="display: none;?"> </span>s*</div>/gi,'<p>
但如果遇到加粗字体,比如b或strong标签,这部分文字会自动移位,如下面的效果:
帝国cms后台正文编辑器中的一键排版功能导致加粗字体移位的解决方法图1
执行一键排版后,加粗部分变成了独立行:
帝国cms后台正文编辑器中的一键排版功能导致加粗字体移位的解决方法图2
这样同一行中有加粗字时会造成困扰,可以通过下面的方法解决。
打开/e/admin/ecmseditor/infoeditor/plugins/autoformat/plugin.js,注释掉加粗字的处理部分,修改后完整的代码如下:
CKEDITOR.plugins.add('autoformat',
{
init: function(editor)
{
//plugin code goes here
var pluginName = 'autoformat';
editor.addCommand(pluginName, new CKEDITOR.autoformatCommand());
editor.ui.addButton('autoformat',
{
label: '一键排版',
command: 'autoformat',
icon: CKEDITOR.plugins.getPath('autoformat') + 'images/autoformat.gif'
});
}
});
CKEDITOR.autoformatCommand = function(){};
CKEDITOR.autoformatCommand.prototype =
{
async:true,
exec : function( editor )
{
FormatText(editor);
}
};
if(window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for(var i=0;i<attrs.length;i++){
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i<childS.length; i++) {
if(childS[i].nodeType==1){
anyString += childS[i].tagName=="BR" ? 'n' : childS[i].innerText;
}else if(childS[i].nodeType==3){
anyString += childS[i].nodeValue;
}
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
}
);
}
//格式化
function FormatText(editor) {
var myeditor = editor;
if (myeditor.mode=="wysiwyg"){
var tempimg = new Array();
var temptable = new Array();
var tempobject = new Array();
var isPart = false; //暂时无法实现局部格式化
if (!isPart) {
var tmpDiv=document.createElement("DIV");
var editorhtml = myeditor.getData();
//page
//editorhtml = editorhtml.replace(/<div style="page-break-after: always;?">s*<span style="display: none;?"> </span>s*</div>/gi,'<p>
新闻资讯 更多
- 【帝国cms教程】帝国CMS模板变量$GLOBALS[navclassid]用法分析04-03
- 【帝国cms教程】鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总04-03
- 【帝国cms教程】怎么快速找出帝国CMS数据库配置文件路径及迁移网站后修改技巧!04-03
- 【帝国cms教程】帝国CMS模板$GLOBALS[navclassid]用法详解04-03
- 【帝国cms教程】帝国cms 7.5版列表页分页样式修改笔记04-02
- 【帝国cms教程】解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法04-02
- 【帝国cms教程】帝国CMS只备份栏目和模板的方法04-02
- 【帝国cms教程】帝国CMS怎样删除清空数据库记录?04-02
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 9帝国cms后台登录出现”您还未登录”怎么解决?
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法