一个编辑器折腾了我一天
前言
用习惯了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了,有时候可以,有时候又不行,在不行我就按照凡哥的替换数据库了。
( ̄︶ ̄*))让我吃饭把,今天就吃了一泡面,折腾到现在,肚子饿了!!!
广告