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


Posted in PHP onJune 03, 2020

本文实例讲述了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
 <?php
 
 echo 1;
 ?>
```
</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框架的PHP程序设计有所帮助。

PHP 相关文章推荐
一个oracle+PHP的查询的例子
Oct 09 PHP
PHP的面向对象编程
Oct 09 PHP
Discuz 模板语句分析及知识技巧
Aug 21 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
May 06 PHP
基于PHP生成静态页的实现方法
May 10 PHP
php设计模式之观察者模式的应用详解
May 21 PHP
Zend Studio 实用快捷键一览表(精心整理)
Aug 10 PHP
php+mysqli使用面向对象方式查询数据库实例
Jan 29 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
Jun 10 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
Aug 08 PHP
php抛出异常与捕捉特定类型的异常详解
Oct 26 PHP
PHP单例模式与工厂模式详解
Aug 29 PHP
PHP数组基本用法与知识点总结
Jun 02 #PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
Jun 02 #PHP
PHP与Web页面交互操作实例分析
Jun 02 #PHP
PHP Web表单生成器案例分析
Jun 02 #PHP
一文看懂PHP进程管理器php-fpm
Jun 01 #PHP
PHP论坛实现积分系统的思路代码详解
Jun 01 #PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
May 29 #PHP
You might like
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
简单上手Python中装饰器的使用
2015/07/12 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python如何实现数据的线性拟合
2019/07/19 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
商场端午节活动方案
2014/01/29 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
积极向上的团队口号
2014/06/06 职场文书
会计毕业生自荐书
2014/06/12 职场文书
司机工作自我鉴定
2014/09/19 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
琅琊山导游词
2015/02/05 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
食品安全责任书范本
2015/05/09 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
无线电通信名词解释
2022/02/18 无线电