Editor.md 编辑器在Code Igniter中的集成应用

Editor.md是一款开源的Markdown文本编辑器。本文讲述了Editor.md在CodeIgniter中的集成应用。

一、下载Editor.md的源代码

地址：Editor.md – 开源在线 Markdown 编辑器 (pandao.github.io)

下载下来是一个 editor.md-master.zip 的压缩包。将它解压缩。

二、下载 marked.js

地址：https://github.com/markedjs/marked

或：https://cdn.bootcdn.net/ajax/libs/marked/4.2.3/marked.min.js

二、在CodeIgniter下建立 Editor.md的目录，并组织好各种文件

（1）在/public下建立目录 /public/editormd ;

（2）在新建的 /public/editormd 目录下 建立 css js lib plugins四个文件夹；

（3）将 Editor.md-master 目录下的 /editor.md-master/css/editormd.css 拷贝至 /public/editormd/css 下；

（4）将 /editor.md-master/scss/github-markdown.scss 拷贝至  /public/editormd/css 下，改名为 github-markdown.css ;

（5）将 /editor.md-master/editormd.js 拷贝至  /public/editormd/js 下;

（6）将marked.min.js拷贝至  /public/editormd/js 下;

（7）将/editor.md-master/lib下所有文件（含文件夹）全部拷贝至/public/editormd/lib下；

（8）将/editor.md-master/plugins下所有文件（含文件夹）全部拷贝至/public/editormd/plugins下。

三、前端页面编程

在需要编程的 /application/view/editor.php 上进行如下编程：

<link rel="stylesheet" href="/public/editormd/css/editormd.css" />
<script src="/public/js/jquery.js"></script>  <!-- 也可从/editor.md-master包内找jquery.js -->
<script src="/public/editormd/js/editormd.js"></script>
<script type="text/javascript">
   $(function() { 
      var testEditor = editormd("test-editormd", {
        width: "100%",
        height: 500,
        markdown : "",
        path : '/public/editormd/lib/',
        imageUpload : true,
        flowChart : true,
        tex : true, 
        sequenceDiagram : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "/xxx/upimgmd.html",
      });
      testEditor.unwatch();
    });
</script>

<div id="layout">
   <div id="test-editormd">
      <textarea style="display:none;" name="content"></textarea>
   </div>
</div

四、后端（图片上传程序）编程

在 /application/controllers 目录下，需要编程的 controller 文件内，找到上述 imageUploadURL 的 xxx.php文件，编写其中的 upimgmd 函数。如下

public function upimgmd()//Editor.md插件调用的后端脚本
{ 
   $this->check_login();
   $mypath = "./upload/";
   $config['upload_path'] = $mypath;
   $config['allowed_types'] = 'jpg|jpeg|png|jpeg';
   $config['max_size'] = '20480';
   $config['max_width'] = '10000';
   $config['max_height'] = '10000'; 
   $config['file_name'] = getuniqid('M'); //自动生成唯一id的函数
   $this->load->library('upload',$config);
   $this->upload->initialize($config);
   if($this->upload->do_upload('editormd-image-file')) //注意这里的editormd-image-file 
   {
     $image = $this->upload->data();
     $extension = pathinfo($image['file_name'],PATHINFO_EXTENSION);
     switch($extension)
     {
       case 'png':
       $new_image = imagecreatefrompng($image['full_path']);
       break;
       case 'gif':
       $new_image = imagecreatefromgif($image['full_path']);
       break;
       case 'jpeg':
       $new_image = imagecreatefromjpeg($image['full_path']);
       break;
       case 'jpg':
       $new_image = imagecreatefromjpeg($image['full_path']);
       break; 
     }
    $original_file = $this->upload->file_name;
    $tmpstr = getuniqid('M');
    $destination_file = $mypath . $tmpstr . ".jpg"; 
    imagejpeg($new_image,$destination_file);
    @unlink($image['full_path']);
    $max_width_height = 1000;
    if(($image['image_width']>$max_width_height)||($image['image_height']>$max_width_height))
    {
      $string = pathinfo($image['full_path'],PATHINFO_DIRNAME) . "/" .$tmpstr . ".jpg";
      $con['image_library'] = 'gd2'; 
      $con['source_image'] = $string;
      $con['create_thumb'] = FALSE;
      $con['maintain_ratio'] = TRUE;
      $con['width'] = $max_width_height;
      $con['height'] = $max_width_height;
      $this->load->library('image_lib', $con);
      $this->image_lib->resize(); 
      $this->image_lib->clear();
    }
 }
 $arr = array("success"=>1,"url"=>"/upload/note/".$tmpstr . ".jpg","message"=>"图片上传成功！");
 echo json_encode($arr);
}

这段程序可能会比较复杂一点，因为其中还含了 resize 的操作，读的时候注意鉴别。

五、查看markdown格式的文档编程

在/view目录下，建立查看的文件，关键操作如下：

（1）引入文件，如下：

<link rel="stylesheet" href="/public/editormd/css/github-markdown.css"> 
<script src="/public/editormd/js/marked.min.js"></script>

（2）编辑控件：

 <div id="markdown" class="markdown-body"><?php echo $content; ?></div>

（3）编写javascript：

let text = marked($("#markdown").text());
$("#markdown").html(text);

本文为本站原创文章，转载需取得本站同意。