【版本3.6.1】编辑器无法显示问题的处理方案

马太胖
马太胖 这家伙很懒,还没有设置简介

0 人点赞了该文章 · 1597 浏览

问题描述:

升级 3.6.1 后,PC端编辑器无法显示,具体表现如下:

  • 移动端无碍(因为移动端使用的插件是wc_mobile_editor)
  • PC端无法显示,不论后台卸载后重装,或者设置什么配置,都无效。

导致原因:

代码的Bug,导致JS脚本无法正常切换和加载。

代码的具体位置是:\plugins\wc_editor\view\init.tpl.htm

<?php if($this->type=='markdown' || $this->type=='all') {?>

这段代码中,$this->type 是无法取到值的。结果就是无法进行编辑器类型匹配,所以对应的js脚本就无法加载。

解决方案

总体思路就是,获取正确的编辑类型值:$this->config['type']['value'] 然后进行类型判断。

最简单的 的方法,大家可以把我下面的代码,完全覆盖\plugins\wc_editor\view\init.tpl.htm文件

<?php $editor_type = $this->config['type']['value'] ?>
<link rel="stylesheet" type="text/css" href="<?PHP echo $this->path;?>/style.css">
<?php if($editor_type=='all') {?>
<ul class="aw-editor-checked">
<li class="active">Markdown</li>
<li>富文本</li>
</ul>
<?php } ?>

<div class="aw-editor">
<div class="editor-type-md" >
<div id="editormd" style="z-index: 990;" ></div>
</div>
<div class="editor-type-rich" style="<?php if($editor_type=='markdown' || $editor_type=='all') {?> display: none; <?php } ?>width: 100%;">
<textarea style="display: none;" id="wangcontent" rows="15" name="<?php echo $this->param['name']; ?>"><?php echo $this->param['value']; ?></textarea>
<div id="wmd-input"></div>
</div>
</div>
<?php if($editor_type=='markdown' || $editor_type=='all') {?>
<script type="text/javascript" charset="utf-8" src="<?PHP echo $this->path;?>/editormd/editormd.js"></script>
<link rel="stylesheet" type="text/css" href="<?PHP echo $this->path;?>/editormd/css/editormd.css">
<script type="text/javascript" charset="utf-8" src="<?PHP echo $this->path;?>/editormd/to-markdown.js"></script>
<script src="<?PHP echo $this->path;?>/editormd/plugins/image-handle-paste/image-handle-paste.js"></script>
<script type="text/javascript">
let testEditor;
$(function() {
$("ul.aw-editor-checked>li").click(function()
{
const index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
if(index===1){
$(".editor-type-rich").show();
$(".editor-type-md").hide();
if($(".aw-editor").hasClass('mkd')){
editor.txt.html($(".editormd-html-textarea").val());
}
}else{
$(".editor-type-rich").hide();
$(".editor-type-md").show();
if($(".aw-editor").hasClass('htm')){
testEditor.setMarkdown(toMarkdown(editor.txt.html()));
}
}
});
});
testEditor = editormd("editormd", {
autoFocus : false,
width: "100%",
height: 500,
path : '<?php echo $this->path;?>/editormd/lib/',
theme : "default",
previewTheme : "default",
editorTheme : editormd.editorThemes['theme-name'],
markdown : $('#wangcontent').val(),
codeFold : false,
tabSize: 6,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : false,
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
placeholder:'请输入内容',
tex : true, // 开启科学公式TeX语言支持,默认关闭
flowChart : true, // 开启流程图支持,默认关闭
sequenceDiagram : true, // 开启时序/序列图支持,默认关闭,
toolbarIcons : function()
{
return ["undo", "redo", "|", "bold", "hr", "h1", "h2", "h3", "h4", "h5", "h6", "quote","italic","del","datetime", "image", "|", "link", "list-ul", "list-ol","||","fullscreen"]
},
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL :"<?php echo get_plugins_url('editor','upload_markdown_file',['cat'=>$this->param['cat'],'attach_access_key'=>$this->param['attach_access_key']]);?>",
onload:function(){},
onchange : function() {
$(".aw-editor").removeClass('htm').addClass('mkd');
$("#wangcontent").val(this.getHTML());
}
});
testEditor.imagePaste();
</script>
<?php } ?>

<?php if($editor_type=='wangeditor' || $editor_type=='all') {?>
<script type="text/javascript" charset="utf-8" src="<?PHP echo $this->path;?>/wangeditor/release/wangEditor.js"></script>
<script type="text/javascript" charset="utf-8" src="<?PHP echo $this->path;?>/wangeditor/release/wangEditorExt.js"></script>
<script type="text/javascript" src="<?PHP echo $this->path;?>/wangeditor/plugin/attach/plugin.js"></script>
<script type="text/javascript">
function CleanWord(html)
{
html = html.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
html=html.replace(/<o:p> <\/o:p>/g,"");
html=html.replace(/o:/g,"");
html=html.replace(/<font>/g,"");
html=html.replace(/<FONT>/g,"");
html=html.replace(/<span>/g,"");
html=html.replace(/<SPAN>/g,"");
html=html.replace(/<SPANlang=EN-US>/g,"");
html=html.replace(/<P>/g,"");
html=html.replace(/<\/P>/g,"");
html=html.replace(/<\/SPAN>/g,"");
html=html.replace(/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/ig,'');
return html;
}

function autoLink(html){
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
var imgSRC = $($(html)).find('img').attr('src');
var aHref= $($(html)).find('a').attr('href');
if(reg.exec(imgSRC) || reg.exec(aHref)){
return html;
}else{
return html.replace(reg,function(m){return '<a href="'+m+'" target="_blank" rel="nofollow">'+m+'</a>';})
}
}
</script>
<script type="text/javascript">
var upload_ass="<?php echo $this->user_info['permission']['upload_attach'];?>";
var E = window.wangEditor;
var $text1 = $('#wangcontent');
var content=$text1.val();
var editor = new E('#wmd-input');
editor.customConfig.codeType={
title:"选择代码类型:",
type:[
"Bash/Shell","C/C++","Php","C#","Java","Css","Sql","Html"
]
};
editor.customConfig.customAlert = function (info) {
layer.msg(info)
};
editor.customConfig.onchangeTimeout = 1;

//图片上传配置
editor.customConfig.uploadImgServer = "<?php echo get_plugins_url('editor','upload_file',['cat'=>$this->param['cat'],'attach_access_key'=>$this->param['attach_access_key']]);?>";
editor.customConfig.uploadImgTimeout = parseInt("<?php echo $this->config['timeout']['value'];?>");
editor.customConfig.uploadImgMaxSize = parseInt("<?php echo $this->config['fileMaxSize']['value'];?>")*1024*1024;
editor.customConfig.uploadFileName = 'upload[]';
editor.customConfig.uploadImgMaxLength = 5;
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
const data = result.data;
var newData = Object.keys(data).map(function(i){return data[i]});
for(var j=0;j<newData.length;j++){
insertImg(newData[j]);
}
},
fail: function (xhr, editor, result) {
if(result.error){
layer.msg(result.msg);
return false;
}
},
error: function error(xhr, editor) {
},
};

//视频上传配置
editor.customConfig.uploadVideoServer = "<?php echo get_plugins_url('editor','upload_video',['cat'=>$this->param['cat'],'attach_access_key'=>$this->param['attach_access_key']]);?>";
editor.customConfig.uploadVideoHooks = {
customInsert: function (insertVideo, result) {
if (result.errno === 0) {
insertVideo(result.data);
} else {
layer.msg(result.msg);
}
}
};

editor.customConfig.onchange = function (html)
{
//html = autoLink(html);
$text1.val(html);
$(".aw-editor").removeClass('mkd').addClass('htm');
};

editor.customConfig.pasteFilterStyle = false;
editor.customConfig.pasteIgnoreImg = false;
editor.customConfig.pasteTextHandle = function (content)
{
if (content == '' && !content) return '';
return CleanWord(content);
};
editor.create();
editor.txt.html(content);
E.attach.init('#wmd-input',"<?php echo $this->param['cat']?>");
E.fullscreen.init(editor);
/*E.viewSource.init(editor);*/
</script>
<?php } ?>

覆盖完后,插件wc_editor就正常工作了

发布于 2021-10-12 15:45

免责声明:

本文由 马太胖 原创发布于 WeCenter ,著作权归作者所有。

登录一下,更多精彩内容等你发现,贡献精彩回答,参与评论互动

登录! 还没有账号?去注册

君笑尘
2021-10-27 22:13
不是int.tpl.htm出现问题,是在/plugins/wc_editor/editor.php 的 editor 方法里第一行代码, $this->plugin_info['state'] == 1 被写成 了 $this->plugin_info['state'] === 1,去掉其中的一个=号即可