emlog 自带的富文本编辑器 kindeditor 比较老，排版非常麻烦，使用起来也不方便，不过我们可以通过技术手段来把它替换成我们想要的富文本编辑
先上效果
修改前
修改后
修改步骤
- 找到并修改editor目录
找到 /admin/editor
将 editor 改名为 editor-old
- 上传editor目录
将下载好的tinymce文件夹命名为 editor 上传到 admin 目录下面
下载地址 https://www.tiny.cloud/get-tiny/self-hosted/
选择 下载TinyMCE社区 的选项下载
解压后找到 tinymce/js/tinymce 将js下面的tinymce改为editor上传到admin即可
- 修改 jquery.tinymce.min.js 文件
打开edtior目录中的 jquery.tinymce.min.js 文件
打开文件后到文件最底部加入以下代码
如果需要自定义配置或者自定义插件可以去tinymce官网查看
// 初始化富文本编辑器
window.editorMap = {};
function loadEditor(id) {
editorMap[id] = editorMap[id] || $('textarea#'+id).tinymce({
plugins: 'code preview',
toolbar: 'undo redo | styleselect charmap | bold italic | alignleft aligncenter alignright alignjustify |' +
' bullist numlist outdent indent | link image media | ' +
'print preview fullpage fullscreen | ' +
'forecolor backcolor emoticons | help'
});
}- 修改 emlog 中调用富文本编辑器的代码部分
需要修改的文件
/admin/views/add_log.php (写文章页面)
/admin/views/add_page.php (新建页面)
/admin/views/edit_log.php (草稿页面)
/admin/views/edit_page.php (编辑页面)
如果你是新版本的 emlog 如 6.0.0
你可能找不到上面的文件，你需要修改的是下面两个文件
/admin/views/write.php
/admin/views/page.php
需要修改内容
在这些页面内修改以下对应代码
<!-- 在上面那些文件中找到这个 -->
<script charset="utf-8" src="./editor/kindeditor.js?v=<?php echo Option::EMLOG_VERSION; ?>"></script>
<script charset="utf-8" src="./editor/lang/zh_CN.js?v=<?php echo Option::EMLOG_VERSION; ?>"></script>
<!-- 修改为 -->
<script charset="utf-8" src="./editor/tinymce.min.js?v=<?php echo Option::EMLOG_VERSION; ?>"></script>
<script charset="utf-8" src="./editor/jquery.tinymce.min.js?v=<?php echo Option::EMLOG_VERSION; ?>"></script>
// 还要修改common.js 文件 删除修改 kindeditor 的函数 找到
// admin/views/js/common.js 先备份一份
// 全局搜索
editorMap['excerpt'].sync(); 和 editorMap['content'].sync();
// 删除或者注释
// 然后找到
if (editorMap['content'].designMode === false){
alert('请先切换到所见所得模式');
}else if (imgsrc != "") {
editorMap['content'].insertHtml('<a target=\"_blank\" href=\"'+fileurl+'\" id=\"ematt:'+aid+'\"><img src=\"'+imgsrc+'\" title="点击查看原图" alt=\"'+alt+'\" border=\"0\" width="'+width+'" height="'+height+'"/></a>');
}
// 改为
if (imgsrc != "") {
editorMap['content'].append('<a target=\"_blank\" href=\"'+fileurl+'\" id=\"ematt:'+aid+'\"><img src=\"'+imgsrc+'\" title="点击查看原图" alt=\"'+alt+'\" border=\"0\" width="'+width+'" height="'+height+'"/></a>');
}
// 然后再找到
if (editorMap['content'].designMode === false){
alert('请先切换到所见所得模式');
} else {
editorMap['content'].insertHtml('<span class=\"attachment\"><a target=\"_blank\" href=\"'+fileurl+'\" >'+filename+'</a></span>');
}
// 改为
editorMap['content'].append('<span class=\"attachment\"><a target=\"_blank\" href=\"'+fileurl+'\" >'+filename+'</a></span>');- 测试
刷新页面测试添加文章和修改文章以及保存草稿等功能是否正常
若正常，则大功告成，不正常则需要根据错误进行调试
最后
所有修改代码的文件及文件夹建议都给以前的文件名重名个名称，以便修改失败还可以恢复到以前。
如果想要换其他富文本编辑器，其实大致原理差不多，照葫芦画瓢还是很简单的。
2024-08-21 22:56