一个编辑器折腾了我一天

by 叶开楗 · 2021-04-29 · 0 次阅读

前言

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

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

起因

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

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

思考

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

没办法只能在看下2个编辑器插件代码了,我选择kindEditor作为参考,因为代码更少。参考完以后发现主要文件就view下的两个indexstatic是编辑器资源文件。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了,有时候可以,有时候又不行,在不行我就按照凡哥的替换数据库了。

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

标签:#

最后编辑于:2021-04-29 21:40:09