一个编辑器折腾了我一天

前言

用习惯了markdown编辑器用富文本编辑器各种别扭憋屈，于是乎我折腾了起编辑器啊哈哈~

给你们看效果，不不错吧，真的是折腾了我一天，作为一个小白只能瞎折腾，结果还给我成功了~

起因

其实在这以前 tp-log 作者就给我一个方案了，editor.md 编辑器在之前我搞““易语言”打造属于自己的静态博客生成器”就了解还不错，但时候感觉很麻烦也不了解这个插件机制就不了了之了。

然后呢今天看到凡哥写给我看的“Tp-log引入第三方类，支持将Markdown内容显示为正常内容” 我在本地测试一番，效果还不错，然后就又起了折腾的心思，主要还是富文本编辑器用的不习惯。

思考

tp-log是二开tpframe框架，官网的插件是可以直接使用的。官网有两个编辑器插件百度编辑器UEditor 2.0和kindEditor编辑器 2.1,我就下载来参考了一下...看不懂，于是有看了官方文档插件教程更迷糊了，这是在为难我代码小白，看不懂看不懂。

没办法只能在看下2个编辑器插件代码了，我选择kindEditor作为参考，因为代码更少。参考完以后发现主要文件就view下的两个index和static是编辑器资源文件。index主要是编辑器html文件，static是编辑器资源文件css/JS之类的。

分析完以后我就准备按他们的文件格式创建一个新的文件准备测试，但是现实给我了一暴击，我才新建一个文件打开后台就直接报错，什么鬼啊，百度无果，多次测试无果。

最后我选择暴力点，我什么都不改直接替换你kindEditor编辑器的文件，复制粘贴，后台登录测试，0j8k效果非常好，没有一点点问题 哈哈哈~

主要是这些代码要替换一下，灵活调用基本ok~

最蛋疼的就是，图片上传了这个我折腾2小时后，发现有个文章写的明明白白我竟然才百度到“thinkphp5使用Markdown编辑器Editor.md并上传图片”我要是早点百度到这文章，我还需要折腾那么久吗o(╥﹏╥)o

//Markdown上传图片
    public function uploadImg(){
        if(request()->isPost()){
            $file = request()->file('editormd-image-file');                   
                $info = $file->move( './uploads/knowledge');
                if($info){
                    $value=config('uploadFiles').'/knowledge/'.$info->getSaveName();
                     return json(['url'=>$value,'success'=>1,'message'=>'图片上传成功!']);
                }
                else{        
                    echo $file->getError();
                    }            

        }else{
            $this->error('非法请求');
        }
        
    }

好了最终效果，看图：

很多细节我都忽略了，不想写，写了就赶紧自己是眼瞎，几分钟的事情我花了几小时

后续

编辑器折腾好以后，我像把以前的文章都换回markdown格式的，但是我在本地做了个测试，蛋疼。

直接数据库替换以前文章

对，虽然数据库是markdown格式的文章，但是他没解析我吐了，他需要我在后台编辑一次在保存才能正常解析，日狗了，我就没折腾了。

首页缩略图事件

因为我们不是把文章格式转换成markdown了吗!所以我默认寻找img找不到，然后文章简介也是全输出markdown格式的。

不折腾不爽斯基的我，思考了很久，还是折腾出来。

在application\common.php 修改和添加以下代码:

• 头部添加

use \linyufan\markdown\Parsedown; //引入自定义类 2021.4.27 Linyufan.com

• 修改原来的寻找缩略图

//取文章内容第一张图片作为缩略图，没有就输出随机缩略图
// postimg($vo['content']);
//{$vo.content|postimg}
//'{empty name="vo.thumb"}{$vo.content|postimg}{else/}{$vo.thumb}{/empty}'

function postimg($content){
$Parsedown = new Parsedown();  //初始化类    
$Parsedown = $Parsedown->text($content);
preg_match('/<img[^>]*?src="([^"]*?)"[^>]*?>/i', $Parsedown, $match);
if (!isset($match[1])) {
    echo "https://picsum.photos/200/150";
} else {
    echo $match[1];
}

}

• 首页简介转换

有什么用？我忘记了，大概就是不会像原来一样就是了。

//转换首页文章
function markdown($content){
$Parsedown = new Parsedown();  //初始化类    
$Parsedown = strip_tags($Parsedown->text($content));
echo mb_substr($Parsedown,0,100,'utf-8');
}

结尾

markdown大法好，写文速度都快了很多 哈哈哈

这个邮件通知我是真rihou了，有时候可以，有时候又不行，在不行我就按照凡哥的替换数据库了。

(￣︶￣*))让我吃饭把，今天就吃了一泡面，折腾到现在，肚子饿了！！！