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&amp;MYSQL分页原理及实现
Jan 02 PHP
一些 PHP 管理系统程序中的后门
Aug 05 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
Jul 09 PHP
php5 apache 2.2 webservice 创建与配置(java)
Jan 27 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
Jun 21 PHP
用PHP解决的一个栈的面试题
Jul 02 PHP
jquery获取多个checkbox的值异步提交给php的方法
Jun 24 PHP
PHP设计模式之简单投诉页面实例
Feb 24 PHP
PHP简单创建压缩图的方法
Aug 24 PHP
PHP7新特性foreach 修改示例介绍
Aug 26 PHP
PHP之多条件混合筛选功能的实现方法
Oct 09 PHP
PHP时间相关常用函数用法示例
Jun 03 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.ini中文版(2)
2006/10/09 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
php格式化日期实例分析
2014/11/12 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python多线程并发实例及其优化
2019/06/27 Python
Pyqt5自适应布局实例
2019/12/13 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
护理自荐信范文
2013/10/05 职场文书
计算机系毕业生推荐信
2013/11/06 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
美容院员工规章制度
2015/08/05 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL