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 auth_http类库进行身份效验
Mar 19 PHP
php 图片上添加透明度渐变的效果
Jun 29 PHP
PHP生成Flash动画的实现代码
Mar 12 PHP
PHP删除数组中的特定元素的代码
Jun 28 PHP
PHP如何将log信息写入服务器中的log文件
Jul 29 PHP
PHP使用Pear发送邮件(Windows环境)
Jan 05 PHP
PHP模拟post提交数据方法汇总
Feb 16 PHP
使用Composer安装Yii框架的方法
Mar 15 PHP
Laravel 5.3 学习笔记之 配置
Aug 28 PHP
Yii2语言国际化的配置教程
Aug 19 PHP
PHP的PDO大对象(LOBs)
Jan 27 PHP
php实现简单的守护进程创建、开启与关闭操作
Aug 13 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
Sony CFR 320 修复改造
2020/03/14 无线电
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
理解Python中的With语句
2016/03/18 Python
详解重置Django migration的常见方式
2019/02/15 Python
关于python字符串方法分类详解
2019/08/20 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
毕业自荐书
2013/12/09 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python