emlog 将富文本编辑器 kindeditor 替换为 tinyMCE

2020-3-22 Jon 前端工具

emlog 自带的富文本编辑器 kindeditor 比较老,排版非常麻烦,使用起来也不方便,不过我们可以通过技术手段来把它替换成我们想要的富文本编辑

先上效果

修改前

修改后

修改步骤

  1. 找到并修改editor目录

找到 /admin/editor
将 editor 改名为 editor-old

  1. 上传editor目录

将下载好的tinymce文件夹命名为 editor 上传到 admin 目录下面
下载地址 https://www.tiny.cloud/get-tiny/self-hosted/
选择 下载TinyMCE社区 的选项下载
解压后找到 tinymce/js/tinymce 将js下面的tinymce改为editor上传到admin即可

  1. 修改 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'
  });
}
  1. 修改 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>');
  1. 测试

刷新页面测试添加文章和修改文章以及保存草稿等功能是否正常
若正常,则大功告成,不正常则需要根据错误进行调试

最后

所有修改代码的文件及文件夹建议都给以前的文件名重名个名称,以便修改失败还可以恢复到以前。
如果想要换其他富文本编辑器,其实大致原理差不多,照葫芦画瓢还是很简单的。

 

标签: 富文本

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap