laravel-admin使editormd支持粘贴截图并自动生成简介

Posted 2021-03-01 houxin

效果说明

• 文章写好之后，点击提交，自动生成该篇文章的简短摘要。
• 无论是用微信或者qq截图，还是复制图片资源。都可以在当前编辑器中粘贴，粘贴的内容是自动上传后台后获取的url。

laravel-admin的form设置

1. 引入Admin管理类

use EncoreAdminAdmin;

2. form方法的配置

// 自动生成文章的摘录
$content = ‘content‘;
$excerpt = ‘excerpt‘;
Admin::script($this->getExcerptText($content, $excerpt));

$form->editormd($content, __(‘Content‘));
$form->textarea($excerpt, __(‘Excerpt‘))
	 ->help(‘自动截取文章前500字‘)
	 ->readonly();

form的js脚本

这里使用了php的长字符串，如果你有需要，也可以自己使用js脚本文件

    // 优化粘贴自动更新文章摘录
    private function getExcerptText($content, $excerpt){
        return <<<script
        $(‘button[type="submit"]‘).click(()=>{
            let text = editorMd{$content}.getPreviewedhtml().replace(/<[^>]*>/g,"");
            if(text.length > 500){
                $(‘textarea[name="{$excerpt}"]‘).val(text.substr(0,500)+‘...‘);
            }
            else{
                $(‘textarea[name="{$excerpt}"]‘).val(text);
            }
        });
        // 追加粘贴截图方法
        inputPaste($(‘#{$content}‘), (url)=>{
            // 获取光标的位置
            let cursor = editorMd{$content}.getCursor();
            editorMd{$content}.insertValue(‘![](‘ + url + ‘)‘);
            // 设定光标的位置在图片的[]中
            cursor.ch += 2;
            editorMd{$content}.setCursor(cursor);
        })
script;
    }

说明：

1. editorMd{$content}就是editormd实例化的当前的编辑器的类。体现在前端就是这样

let config = Object.assign({id:‘content‘}, {"path":"/vendor/hxsen/editormd/editor.md/lib/","width":"100%","height":600,"emoji":true,"theme":"dark","previewTheme":"dark","editorTheme":"pastel-on-dark","imageUpload":true,"imageFormats":["jpg","jpeg","gif","png","bmp","webp"],"imageUploadURL":"/admin/editormd/upload","codeFold":true,"taskList":true});
editorMdcontent = editormd(config);

2. editorMd{$content}.getPreviewedHTML()是用来获取markdown解析好的html文本。replace(/<[^>]*>/g,"")是对html文本进行文本提取。
3. inputPaste这个是我之前封装好的函数。用来监听当前元素的粘贴操作，并上传后台返回url。如果有需要点击查看
4. 里面对光标的操作，是为了在粘贴完成后，光标去到图片语法中的[]的中间，而不是在最后。