工具使用-Editor.md编辑器

本文详细介绍如何在本地环境中安装并配置editor.md markdown编辑器,包括所需环境搭建及具体使用步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

记录一下编辑器的安装使用过程,可能会有错误
editor.md是一个markdown编辑器,可至github下载它的发行版本
百度看见有它的漏洞

editor.md-releases

Editor.md - 开源在线Markdown编辑器

一、环境

phpstudy

phpstorm

editor.md

二、环境搭建

开启一下apachenginx服务,ftp1mysql2可以不用开启

在这里插入图片描述

把下载好的editor.md文件夹放到phpstudyWWW文件夹3

在这里插入图片描述

这两个示例文件夹4,访问一下http://127.0.0.1/test/editor.md/examples/simple.html看看editor.md能不能用的

在这里插入图片描述

出现如下的界面后表示editor.md生效了

在这里插入图片描述

三、创建编辑器

下方的几个文件和文件夹需要用到

editor.md/css/editormd.css
editor.md/editormd.js
editor.md/examples/js/jquery.min.js
editor.md/lib

如果examples需要删除的话,就需要将jquery移动到其他地方
创建一个index.html,具体的使用方式都在注释中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--设置css路径-->
    <link rel="stylesheet" href="editor.md/css/editormd.css">
    <!--设置js路径-->
    <script src="jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <!--设置编辑器信息-->
    <script type="text/javascript">
        $(function() {
            var editor = editormd("editor", {
                width: "100%",//设置文本框的宽度(非必要),既可以百分比也可以和height一样
                height: "500px",//设置文本框的高度(非必要),单位为像素,px也可以省略不写
                //markdown: "#123123",     // 默认的markdown内容(优先级较高,非必要)
                path : "editor.md/lib/"  // 模块的调用路径(必要)
            });
        });
    </script>
</head>
<body>
<!--文本框,id必须为editor-->
<div id="editor">
    <!--
    设置默认的markdown内容,优先级较低
    mardown内容需要用textarea标签括起来,而且编辑器只会显示第一个textarea标签的内容
    -->
    <textarea>### Hello Editor.md !</textarea>
    <textarea>123123</textarea>
</div>
</body>
</html>

在这里插入图片描述


  1. 需要文件上传或文件下载的时候再开启ftp ↩︎

  2. 数据库 ↩︎

  3. 在访问www时,URL是http://127.0.0.1/,以此类推。 ↩︎

  4. 示例文件夹放在实际环境中比较危险,建议删除 ↩︎

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦之海岛

创作不易,狐狸叹气

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值