前端整合editor.md与图片粘贴拖拽上传功能

editor.md的简单整合:

  • 首先,需要把editor.md需要的静态资源文件下载放到项目的static目录下;
    在这里插入图片描述

  • 在前端网页中加入css以及js,并在需要的位置加入对应标签体
    如下为一个test.html页面

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Emoji - Editor.md examples</title>
    <!--引入所需依赖-->
    <link rel="stylesheet" href="../static/editormd/css/style.css"
          th:href="@{/editormd/css/style.css}"/>
    <link rel="stylesheet" href="../static/editormd/css/editormd.css"
          th:href="@{/editormd/css/editormd.css}"/>
</head>
<body>

<h1>EditorMD</h1>

<!--这里的id=editormd_id就是下面的初始化editorMD的editormd_id-->
<div id="editormd_id">
    <!-- 第一个textarea是文本输入区域-->
    <textarea id="htmlContent" class="editorMd-html-textarea" name="editorMd-html-textarea" placeholder="请输入内容...">
    </textarea>

    <!--第二个textarea 是展示文本区域 要隐藏起来 display->none-->
    <textarea class="editorMd-text-textarea" name="editorMd-text-textarea" style="display:none;" id="textContent">
    </textarea>
</div>

<!--引入所需依赖-->
<script src="../static/editormd/js/jquery.min.js"
        th:src="@{/editormd/js/jquery.min.js}"></script>
<script src="../static/editormd/editormd.js"
        th:src="@{/editormd/editormd.js}"></script>
<script>

    
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值