Thinkphp5框架中引入Markdown编辑器如何操作_程序开发

Thinkphp5框架中引入Markdown编辑器如何操作

创始人

2024-11-29 21:21:34

0次

1.把下载的项目放在public目录下

2.页面中引入jquery.js，editormd.js，editormd.css

demo




  
  markdown测试

$(function() { editormd("content-editormd", { placeholder : '编辑你的内容...', width : "100%", height : 1000, syncScrolling : "single", path : "/public/markdown/lib/", watch : true, previewTheme : "white",//预览 theme : 'white',//工具栏 saveHTMLToTextarea : true, // 保存HTML到Textarea // 图片上传 imageUpload : true, imageFormats: ["jpg","jpeg","gif","png","bmp","webp"], imageUploadURL: "/api/Upload/markdownUpload", toolbarIcons : function() { //自定义工具栏，后面有详细介绍 return editormd.toolbarModes['full']; // full, simple, mini }, }); }); //上传 /* { success : 0 | 1, // 0 表示上传失败，1 表示上传成功 message : "提示的信息，上传成功或上传失败及错误信息等。", url : "图片地址" // 上传成功时才返回 } */

上传图片

  public function markdownUpload(){
    $config = [
      'size' => 2097152,
      'ext' => 'jpg,gif,png,bmp'
    ];
 
    $file = $this->request->file('editormd-image-file');
    $upload_path = str_replace('\\', '/', ROOT_PATH . 'public/uploads');
    $save_path  = '/uploads/';
    $info    = $file->validate($config)->move($upload_path);
    if ($info) {
      $result = [
        'success' => 1,
        'message' => '上传成功',
        'url'  => str_replace('\\', '/', '/public/'.$save_path . $info->getSaveName())
      ];
    } else {
      $result = [
        'success'  => 0,
        'message' => $file->getError(),
        'url'  => str_replace('\\', '/', '/public/'.$save_path . $info->getSaveName())
      ];
    }
    return json($result);
  }

3.页面加载markdown格式内容




 
 页面加载markdown格式内容
 
 
 
 
 
 
 
 
 
 


 
 
```php
 <?php
 
 echo 1;
 ?>
```

var testEditor; $(function () { testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面div的id htmlDecode: "style,script,iframe", emoji: true, taskList: true, tocm: true, tex: true, // 默认不解析 flowChart: true, // 默认不解析 sequenceDiagram: true, // 默认不解析 codeFold: true });});

4.直接展示html格式的内容




 
 前端显示
 
 
 
 
 
 


 
 {:htmlspecialchars_decode($data)}

$(function () { editormd.markdownToHTML("doc-content"); })

上一篇：Thinkphp5框架异常情况如何处理

下一篇：介绍PHP数组基本用法与知识点

Thinkphp5框架中引入Markdown编辑器如何操作

相关内容

热门资讯