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

2024-09-29 06:59:20

本文实例讲述了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程序设计有所帮助。

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

本文实例讲述了Thinkphp5框架异常处理操作.分享给大家供大家参考,具体如下: 异常处理有时候服务端会报出我们无法感知的错误,TP5默认会自动渲染错误的形式,生产环境中这样的形式并不是我们想要的. 未知错误 1.exception\Handle.php下的render方法需要覆盖创建ApiHandleException.php <?php namespace app\common\lib\exception; use think\exception\Handle; class ApiHa
ThinkPHP5框架中使用JWT的方法示例

本文实例讲述了ThinkPHP5框架中使用JWT的方法.分享给大家供大家参考,具体如下: JWT下载地址:https://jwt.io 可以直接去github上下载,也可以使用composer 使用composer的话要确保你的电脑上安装了composer,进入项目根目录下载即了,自动会放在vendor目录下创建文件我是放在common目录下使用教程 github都有的贴源码 JWTAuth.php <?php namespace app\common\Auth; use \Lcobuc
thinkphp5.1 框架导入/导出excel文件操作示例

本文实例讲述了thinkphp5.1 框架导入/导出excel文件操作.分享给大家供大家参考,具体如下: thinkphp5.1 导入excel文件 public function importExcel() { try { //获取表格的大小,限制上传表格的大小 if ($_FILES['file']['size'] > 10 * 1024 * 1024) { //文件过大 log_debug($log_title . 'END === MSG:' . '文件过大'); parent::end
ThinkPHP5.1验证码功能实现的示例代码

۩ 背景 ThinkPHP5.1 已经出现很久了,最近有所接触,下面介绍一下常用的第三方验证码功能的使用. 环境框架版本: ThinkPHP5.1.2 运行环境: CentOS7.2.phpStudy2017.Nginx ♜ 功能开发 1).引入第三方扩展包进行 TP5 的开发,Composer 的使用会成为重要技能,以 windows 为例子,输入命令: composer require topthink/think-captcha 完成上述操作,会在以下目录中出现 captcha 的扩展
THINKPHP5分页数据对象处理过程解析

在用到THINKPHP5的分页的时候,我们可以发现获取的数据是对象,如果我们要对数据进行循环增加数据就实现不了今天用此方法解决,以做记录方便以后忘了查看 // 查询状态为1的用户数据并且每页显示30条数据 $list = db('commission_log')->order('id desc')->paginate(30); // 获取分页显示 $page = $list->render(); $list = $list->all(); //这是关键 // 模板变量赋值 fo
THINKPHP5.1 Config的配置与获取详解

首先需要在控制器内引入Config类,这里使用5.1新增的facade,通过facade可以静态的调用原本需要被继承才能使用的方法. 获取配置: namespace app\index\controller; use think\facade\Config; class index { public function index() { //获取所有配置内容,返回的是个Array dump(Config::get()); //获取app中的配置内容,返回的是个Array dump(Config:
thinkphp5.1框架模板赋值与变量输出示例

本文实例讲述了thinkphp5.1框架模板赋值与变量输出.分享给大家供大家参考,具体如下: Demo.php namespace app\index\controller; use think\Controller; use think\facade\View; class Demo extends Controller { public function test1() { //直接将内容输出到页面,不通过模板 $con = '<h3 style="color:red">
thinkphp5.1 框架钩子和行为用法实例分析

本文实例讲述了thinkphp5.1 框架钩子和行为用法.分享给大家供大家参考,具体如下: 行为 ThinkPHP中的行为是一个比较抽象的概念,可以把行为想象成在应用执行过程中的一个动作. 在框架的执行流程中,例如路由检测是一个行为,静态缓存是一个行为,用户权限检测也是行为,大到业务逻辑,小到浏览器检测.多语言检测等等都可以当做是一个行为,甚至说你希望给你的网站用户的第一次访问弹出Hello,world!这些都可以看成是一种行为,把这些行为抽离出来的目的是为了让你无需改动框架和应用,而在外围通过
Thinkphp5框架中引入Markdown编辑器操作示例

本文实例讲述了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=&qu
thinkPHP5框架导出Excel文件简单操作示例

本文实例讲述了thinkPHP5框架导出Excel文件简单操作.分享给大家供大家参考,具体如下: 1. 首先安装PHPExcel 这里用composer安装 composer require phpoffice/phpexcel 2. 在控制类引用 use PHPExcel_IOFactory; use PHPExcel; 3. 在控制其中书写导出方法 /** * 导出迟到数据 */ public function export_later() { $date = explode("-"
CI框架中redis缓存相关操作文件示例代码

本文实例讲述了CI框架中redis缓存相关操作文件.分享给大家供大家参考,具体如下: redis缓存类文件位置: 'ci\system\libraries\Cache\drivers\Cache_redis.php' <?php /** * CodeIgniter * * An open source application development framework for PHP 5.2.4 or newer * * NOTICE OF LICENSE * * Licensed under
thinkPHP5框架中widget的功能与用法详解

本文实例讲述了thinkPHP5框架中widget的功能与用法.分享给大家供大家参考,具体如下: 注意:使用助手函数return view()渲染,则挂件功能会失败,必须使用return $this->fetch() 我们在使用模板的时候,一般网站的顶部(比如说导航栏,或者用户登录区域等等),以及网站的尾部footer(比如友情链接或者版权说明等等),和body区域,我们会为了简化代码,都会将这三个部分剖开分离,然后通过模板继承的方式来使用. 但是如果顶部和尾部只是单纯的html代码还好说,但是
如何在在Vue3中使用markdown 编辑器组件

目录安装引入组件基础用法保存后的 markdown 或者 html 文本如何渲染在页面上? 安装 # 使用 npm npm i @kangc/v-md-editor@next -S # 使用yarn yarn add @kangc/v-md-editor@next 引入组件 import { creatApp } from 'vue'; import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/s
详解在YII2框架中使用UEditor编辑器发布文章

本文介绍了详解在YII2框架中使用UEditor编辑器发布文章 ,分享给大家,具体如下: 创建文章数据表文章数据表主要有4个字段 1.id 主键(int) 2.title 标题(varchar) 3.content 内容(text) 4.created_time 创建时间(int) 创建文章模型创建文章模型,不要忘记设置验证规则和字段的名称 namespace backend\models; class Article extends \yii\db\ActiveRecord { publ
Redis中键值过期操作示例详解

1.过期设置 Redis 中设置过期时间主要通过以下四种方式: expire key seconds:设置 key 在 n 秒后过期: pexpire key milliseconds:设置 key 在 n 毫秒后过期: expireat key timestamp:设置 key 在某个时间戳(精确到秒)之后过期: pexpireat key millisecondsTimestamp:设置 key 在某个时间戳(精确到毫秒)之后过期: 下面分别来看以上这些命令的具体实现. 1)expire:N
CodeIgniter框架基本增删改查操作示例

本文实例讲述了CodeIgniter框架基本增删改查操作.分享给大家供大家参考,具体如下: 对于codeigniter的增删改,在此我用自己的一个例子来说明一下: 创建数据库: CREATE TABLE IF NOT EXISTS `users` ( `id` int(10) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(50) NOT NULL, `email` varchar(100)

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

相关推荐

随机推荐