Thinkphp5框架中引入Markdown编辑器操作示例

 更新时间:2020-06-14 00:02:42   作者:佚名   我要评论(0)

本文实例讲述了Thinkphp5框架中引入Markdown编辑器操作。分享给大家供大家参考,具体如下:
编辑器下载地址以及演示:https://pandao.github.io/editor.md/
1.把下载

本文实例讲述了Thinkphp5框架中引入Markdown编辑器操作。分享给大家供大家参考,具体如下:

编辑器下载地址以及演示:https://pandao.github.io/editor.md/

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

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

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>markdown测试</title>
  <link rel="stylesheet" href="/public/markdown/css/editormd.css" rel="external nofollow" />
  <script src="__JS__/jquery.min.js"></script>
  <script src="/public/markdown/editormd.js"></script>
</head>
<body>
  <form action="{:url('test')}" enctype="multipart/form-data" method='post'>
    <div id="content-editormd" class="form-group">
      <textarea style="display:none;" class="form-control" id="content-editormd-markdown-doc" name="content-editormd-markdown-doc"></textarea>
    </div>
    <button>提交</button>
  </form>
<script type="text/javascript">
  $(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   : "图片地址"    // 上传成功时才返回
}
*/
</script>
</body>
</html>

上传图片

  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格式内容

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>页面加载markdown格式内容</title>
 <link href="/public/markdown/css/editormd.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <script src="__JS__/jquery.min.js"></script>
 <script src="/public/markdown/lib/marked.min.js"></script>
 <script src="/public/markdown/lib/prettify.min.js"></script>
 <script src="/public/markdown/lib/raphael.min.js"></script>
 <script src="/public/markdown/lib/underscore.min.js"></script>
 <script src="/public/markdown/lib/sequence-diagram.min.js"></script>
 <script src="/public/markdown/lib/flowchart.min.js"></script>
 <script src="/public/markdown/lib/jquery.flowchart.min.js"></script>
 <script src="/public/markdown/editormd.js"></script>
</head>
<body>
 <div id="doc-content">
 <textarea style="display:none;">
```php
 &lt;?php
 
 echo 1;
 ?&gt;
```
</textarea>
</div>
 
<script type="text/javascript">
  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
    });});
 
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>前端显示</title>
 <link href="/public/markdown/css/editormd.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <script src="__JS__/jquery.min.js"></script>
 <script src="/public/markdown/lib/marked.min.js"></script>
 <script src="/public/markdown/lib/prettify.min.js"></script>
 <script src="/public/markdown/editormd.min.js"></script>
 
</head>
<body>
 <div id="doc-content">
 {:htmlspecialchars_decode($data)}
 </div>
<script type="text/javascript">
  $(function () {
    editormd.markdownToHTML("doc-content");
  })
</script>
</body>
</html>

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

您可能感兴趣的文章:

  • thinkphp3.2嵌入百度编辑器ueditor的实例代码
  • ThinkPHP中使用Ueditor富文本编辑器
  • ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
  • ThinkPHP中FCKeditor编辑器的使用方法
  • TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
  • 利用Electron简单撸一个Markdown编辑器的方法
  • 利用Vue实现一个markdown编辑器实例代码
  • vue中利用simplemde实现markdown编辑器(增加图片上传功能)
  • SpringBoot使用Editor.md构建Markdown富文本编辑器示例

相关文章

  • Thinkphp5框架中引入Markdown编辑器操作示例

    Thinkphp5框架中引入Markdown编辑器操作示例

    本文实例讲述了Thinkphp5框架中引入Markdown编辑器操作。分享给大家供大家参考,具体如下: 编辑器下载地址以及演示:https://pandao.github.io/editor.md/ 1.把下载
    2020-06-14
  • PHP类的自动加载与命名空间用法实例分析

    PHP类的自动加载与命名空间用法实例分析

    本文实例讲述了PHP类的自动加载与命名空间用法。分享给大家供大家参考,具体如下: 作为一名合格的程序员,必定会有一个从面向过程编程到面向对象编程的转化过程,
    2020-06-14
  • THINKPHP5.1 Config的配置与获取详解

    THINKPHP5.1 Config的配置与获取详解

    首先需要在控制器内引入Config类,这里使用5.1新增的facade,通过facade可以静态的调用原本需要被继承才能使用的方法。 获取配置: namespace app\index\controll
    2020-06-14
  • Thinkphp5框架异常处理操作实例分析

    Thinkphp5框架异常处理操作实例分析

    本文实例讲述了Thinkphp5框架异常处理操作。分享给大家供大家参考,具体如下: 异常处理 有时候服务端会报出我们无法感知的错误,TP5默认会自动渲染错误的形式,生产
    2020-06-14
  • PHP标准库 (SPL)——Countable用法示例

    PHP标准库 (SPL)——Countable用法示例

    本文实例讲述了PHP标准库 (SPL)——Countable用法。分享给大家供大家参考,具体如下: 类实现 Countable 可被用于 count() 函数. 接口摘要 Countable { /* 方法
    2020-06-14
  • 详解PHP中curl_multi并发的实现

    详解PHP中curl_multi并发的实现

    PHP中的curl_multi系列函数可以实现同时请求多个URL来实现并发,而不是像普通curl函数那样请求后会阻塞,直到结果返回才进行下一个请求。因此在批量请求URL时可通过
    2020-06-14
  • ThinkPHP5框架中使用JWT的方法示例

    ThinkPHP5框架中使用JWT的方法示例

    本文实例讲述了ThinkPHP5框架中使用JWT的方法。分享给大家供大家参考,具体如下: JWT下载地址:https://jwt.io 可以直接去github上下载,也可以使用composer 使用c
    2020-06-14
  • PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解

    PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解

    本文实例讲述了PHP中abstract(抽象)、final(最终)和static(静态)原理与用法。分享给大家供大家参考,具体如下: abstract(抽象) PHP 5 支持抽象类和抽象方法。定义
    2020-06-14
  • 如何在PHP中使用数组

    如何在PHP中使用数组

    1、PHP如何获取数组里元素的个数实例 在 PHP 中,使用 count()函数对数组中的元素个数进行统计。 例如,使用 count()函数统计数组元素的个数,示例代码如下: <&#
    2020-06-14
  • PHP时间相关常用函数用法示例

    PHP时间相关常用函数用法示例

    本文实例讲述了PHP时间相关常用函数用法。分享给大家供大家参考,具体如下: <&#63;php /** * 设置时区 */ date_default_timezone_set("Asia/Shanghai"); /**
    2020-06-14

最新评论