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 相关文章推荐
PHP提取数据库内容中的图片地址并循环输出
Mar 21 PHP
php自定义函数之递归删除文件及目录
Aug 08 PHP
php设计模式之单例、多例设计模式的应用分析
Jun 30 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
Aug 07 PHP
PHP实现的简单网络硬盘
Jul 29 PHP
php数组函数array_key_exists()小结
Dec 10 PHP
Zend Framework教程之MVC框架的Controller用法分析
Mar 07 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
Nov 14 PHP
PHP+原生态ajax实现的省市联动功能详解
Aug 15 PHP
PHP ADODB生成下拉列表框功能示例
May 29 PHP
Laravel修改验证提示信息为中文的示例
Oct 23 PHP
laravel框架使用极光推送消息操作示例
Feb 15 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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python 字符串定义
2009/09/25 Python
python实现定时提取实时日志程序
2018/06/22 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
优秀求职信范文分享
2013/12/19 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
老公保证书怎么写
2015/02/26 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电