TP5 项目中使用markdown编辑器

最新推荐文章于 2024-11-04 12:47:56 发布

原创最新推荐文章于 2024-11-04 12:47:56 发布 · 1.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#tp5 #markdown编辑器

tp5富文本编辑器专栏收录该内容

3 篇文章

订阅专栏

在TP5项目中，为了避开常用的富文本编辑器，选择了CKeditor，但发现其Markdown支持不足。于是安装了Markdown插件，但未达预期。最终，转向了编辑风格更受欢迎的CSDN式的Editor.md，虽然它已停止更新，但依然可以从GitHub获取源码。通过实例化编辑器并处理图片上传功能，成功实现了Markdown编辑器的集成。

在做自己项目的时候，再选择富文本编辑器的时候小小的纠结了一下，之前的项目大多使用的是百度的Ueditor，但是自己的练习项目上面再使用这个那么练习就变得毫无意义，所以选择了CKeditor编辑器（文档纯英文所以不是很友好）。
anyway、还是用上了上一篇文章简单介绍了一下，但是后来考虑到博客类的项目编辑文章时需要经常用到代码编辑，索性CKeditor4有markdown的。下面简单讲一下ckeditor加上markdown插件使用吧。

下载markdown插件（https://ckeditor.com/cke4/addon/markdown）
下载好了之后，解压出来。

复制红框里面的插件到项目中编辑器所在目录

修改ckeditor 编辑器的配置文件（config.js）

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
    config.toolbarGroups = [
        { name: 'clipboard', groups: ['clipboard', 'undo'] },
        { name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
        { name: 'forms', groups: ['forms'] },
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
        { name: 'links', groups: ['links'] },
        { name: 'insert', groups: ['insert'] },
        { name: 'styles', groups: ['styles'] },
        { name: 'colors', groups: ['colors'] },
        { name: 'document', groups: ['document', 'doctools', 'mode'] },
        { name: 'tools', groups: ['tools'] },
        { name: 'others', groups: ['others'] },
        { name: 'about', groups: ['about'] }
    ];
    config.language = 'zh-cn';
    config.uiColor = '#003300';
    //粘贴图片时用得到
    //引入markdown插件
    config.extraPlugins = 'uploadimage,markdown';
    //移除的按钮
    config.removeButtons = 'Templates,Print,Replace,SelectAll,Scayt,Checkbox,Form,Radio,Textarea,Select,Button,' +
        'ImageButton,HiddenField,CreateDiv,BidiLtr,BidiRtl,Flash,PageBreak,Iframe,About,ShowBlocks';
    // 使上传图片弹窗出现对应的“上传”tab标签
    config.removeDialogTabs = 'image:advanced;link:advanced';
    // config.removeButtons = 'Underline,Subscript,Superscript';
    config.format_tags = 'p;h1;h2;h3;pre';


};

最后看效果
在这里插入图片描述
但是这个插件并没有达到我想象的样子，不能一边编辑一边显示效果。所以考虑一个markdown编辑器。
很喜欢CSDN的这种编辑风格的编辑器。于是在网上找了很多相关的额markdown编辑器，最后选择editor.md 。
（查了一下最后一次更新是在2015年，但是github上依然有源码地址：https://github.com/pandao/editor.md.git）
在这里插入图片描述
首先下载editor.md可以从上面的github中下载，也可以使用我分享的垃圾云
链接：https://pan.baidu.com/s/1VDGMhfx-4Z40XOd1OqZE6g
提取码：uz2x
下载完成之后解压，看一下文件内容

打开examaple文件夹看一下官方给出的例子
在这里插入图片描述
编辑器发开full.html看一下需要用到的东西

我们把范例用到的example文件夹下面的css、js文件复制到mdeditor文件夹下的相对应文件夹下，整理后得到的编辑页面

实例化编辑框部分的js

<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "__MD__/lib/",
            flowChart : true,//控制流程图编辑
            sequenceDiagram : true,//控制时序图编辑
            taskList : true,//任务列表
            tex  : true,//科学公式
            emoji : true,//moji表情
            htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
            codeFold : true,//ctrl+q代码折叠
            // imageUpload : false,//开启本地图片上传
            imageUpload : true,//开启本地图片上传
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/Upload/MdImage",//图片上传地址
            dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            // onload : function() {
            //     console.log('onload', this);
            // }
        });
    });
</script>

最后效果打开看一下
在这里插入图片描述
最后一步就是实现图片上传，注意到上面实例化编辑器的js代码中包含有本地图片上传配置

后台接收的上传的接口

    /**
     * MarkDown 编辑器上传图片
     */
    public function MdImage()
    {
        //实例化存储引擎
        //接收字段为什么是editormd-image-file？？？
        //看下图
        $file =$this->request->file('editormd-image-file');
//        var_dump($file);die;
        // 移动到框架应用根目录/uploads/ 目录下
        $info = $file->validate(['ext'=>'jpg,png,gif'])->rule('md5')->move( '../public/uploads/Markdown');
        if($info){
            // 成功上传后 获取上传信息
            $res =  $info->getSaveName();
			//返回值文档上面规定的格式是
            return json(['success' => 1,'message' => '上传成功!',"url"=>'/uploads/Markdown/'.$res]);
        }else{
            // 上传失败获取错误信息
            $res = $file->getError();
            return $this->sendError($res);
        }
    }

首先看一下代码中的第一个问题，接收字段为什么是editormd-image-file？？？
我们在页面上打开编辑器，点击本地上传按钮，审查元素，so！！！
在这里插入图片描述
第二个问题，上传后编辑器怎么接收到你上传的图片？？
文档上关于上传后台接口返回值的说明

以前没有做记录的习惯，学习没有总结性，现在要养成这个习惯，简单记录有问题的话可以留言。
结束！！！