使用Strve.js来搭建一款 Markdown 编辑器

news2024/11/16 7:34:48

今天，我们来使用Strve.js来搭建一款 Markdown 编辑器，没错！你没听错。我们需要创建了一个实时 Markdown 编辑器，用户可以在 textarea 中输入 Markdown 文本，然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊，还不如用 Vue.js 呢！

好，满足你的好奇心。首先，我们不搞那些工程化的东西，我们就是新建一个 html 文件。

就像这样。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
  </head>
  <body></body>
</html>

好，我们到此就开发完成了~ 谢谢阅读~

……

开玩笑的！我们这么严谨的开发人员怎么会这么敷衍。

我们说使用Strve.js开发应用，那么我们就先引入Strve.js。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
  </body>
</html>

哇塞！引入就这么简单？是的，就这么简单的。另外，我们引入的版本是UMD，UMD 叫做通用模块定义规范（Universal Module Definition）。也是随着大前端的趋势所诞生，它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。简单来说，就像我们之前使用 Jquery 那样，引入直接使用，然后直接打开html文件看效果，不需要自己搭建本地文件服务器啥的。省心省力！！

好家伙，下一步我们就开始写静态页面了啊！不要忘记自己是一个切图仔。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
    <script>
      const { h, createApp } = Strve;

      function App() {
        return h/*html*/`
          <textarea class="input" placeholder="input..." @input="${update}"></textarea>
          <div class="output" $key="output"></div>
        `;
      }

      createApp(App).mount("#app");
    </script>
  </body>
</html>

这就写完了？怎么没有在 body 标签内写 html 标签啊，我只看到了模版字符串中写的，这是什么操作？JSX？别急啊，这是Strve.js最大特性呀！可以将模版字符串转化成我们看到的 html 视图。你可能又会说这不跟 JSX 思想差不多呢！是的，我开发这个框架的动机就是受 JSX 语法的影响。

到这里，我们只是写了页面但是没有写样式。那么，下面我们就开整样式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
    <style>
    html,
    body,
    #app {
    margin: 0;
    height: 100%;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333;
    }

    #app {
    display: flex;
    }

    .input,
    .output {
    width: 50%;
    box-sizing: border-box;
    }

    .input {
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: "Monaco", courier, monospace;
    padding: 20px;
    }

    .output {
    padding: 0 20px;
    }
</style>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
    <script>
      const { h, createApp } = Strve;

      function App() {
        return h/*html*/`
          <textarea class="input" placeholder="input..." @input="${update}"></textarea>
          <div class="output" $key="output"></div>
        `;
      }

      createApp(App).mount("#app");
    </script>
  </body>
</html>

你可能会说，样式有了，页面结构也有了，我想看看效果。先忍住！我们得先赋予他灵魂，好事不怕晚。

下面，我们就开始写业务逻辑了。我们要实现的效果就是用户可以在 textarea 中输入 Markdown 文本，然后实时显示转换后的 HTML。你可能会说，啥意思？就是左侧我们写Markdown 文本，然后右侧就是显示 Markdown 转换后的文本了。

好了，废话不多说了！（还算有点自知之明）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Markdown Editor</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css"
    />
    <style>
    html,
    body,
    #app {
    margin: 0;
    height: 100%;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333;
    }

    #app {
    display: flex;
    }

    .input,
    .output {
    width: 50%;
    box-sizing: border-box;
    }

    .input {
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: "Monaco", courier, monospace;
    padding: 20px;
    }

    .output {
    padding: 0 20px;
    }
</style>
  </head>
  <body>
    <script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
    <script src="https://unpkg.com/marked@2.1.3/lib/marked.js"></script>
    <script src="https://unpkg.com/marked-highlight@2.0.1/lib/index.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
    <script>
      const { h, setData, createApp, domInfo, nextTick } = Strve;

      // Highlight code blocks
      marked.use(
        markedHighlight.markedHighlight({
          langPrefix: "hljs language-",
          highlight(code, lang) {
            const language = hljs.getLanguage(lang) ? lang : "plaintext";
            return hljs.highlight(code, { language }).value;
          },
        })
      );

      let input = "";

      function compiledMarkdown() {
        return marked(input);
      }

      const debouncedUpdate = _.debounce(function (e) {
        setData(() => {
          input = e.target.value;
        });
        nextTick(() => {
          domInfo.output.innerHTML = compiledMarkdown();
        });
      }, 100);

      function update(e) {
        debouncedUpdate(e);
      }

      function App() {
        return h/*html*/ `
          <textarea class="input" placeholder="input..." @input="${update}"></textarea>
          <div class="output" $key="output"></div>
        `;
      }

      createApp(App).mount("#app");
    </script>
  </body>
</html>

我去！咋一下子多出了这么多代码！你这是逗我吗？

别着急嘛！我会对你负责的，我既然一下子写了这么多代码，肯定会解释清楚的。

下面，我们要正经起来了！我们既然需要开发一款 Markdown 编辑器，我们需要的依赖库有下面几种：

  • Strve-js: 一个轻量级的 JavaScript 框架，用于构建用户界面；

  • Marked: 一个将 Markdown 转换为 HTML的库；

  • Highlight: 让网页上的代码高亮美化的免费开源工具库；

  • Lodash: 一个实用的 JavaScript 工具库；

那么你就会看我们引入了这些库。

<script src="https://unpkg.com/strve-js@5.1.1/dist/strve.full.js"></script>
<script src="https://unpkg.com/marked@2.1.3/lib/marked.js"></script>
<script src="https://unpkg.com/marked-highlight@2.0.1/lib/index.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>

另外，需要再引入一个css文件，用于 Markdown 中代码高亮的样式。

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css"
/>

外部引入的文件，我们已经介绍完了，那么我们再集中讲解下核心业务逻辑代码。

定义一个名为 input 的变量用于存储用户输入的 Markdown 文本。然后定义一个名为 compiledMarkdown 的函数，该函数使用 Marked 库将 input 变量中的 Markdown 文本转换为 HTML。然后再定义一个名为 update 的函数，该函数在用户输入时调用。它使用 Lodash 的 debounce 函数来防止频繁触发，提高性能。当用户输入时，它会更新 input 变量并将转换后的 HTML 插入到输出 <div> 中。定义一个名为 App 的组件，该组件包含一个 textarea 用于输入 Markdown 文本，以及一个 <div> 用于显示转换后的HTML。<textarea> 上有一个input 事件监听器，当用户输入时调用 update 函数。输出 <div> 使用 $key 属性设置 Strve 的引用名称为"output"。使用 Strve 的 createApp 函数创建一个 App 实例并挂载到 id 为app的元素上。

核心逻辑讲完了，那么我们欣赏下这款 Markdown 编辑器完整代码吧！

额~ 真简约啊！你可能会问能不能这样，能不能那样啊！都不行，真垃圾呀！

哈哈哈……

目录

让您失望了！

扯了这么多！你的动机到底是啥？

当然是为了分享这个简约实用的项目啊！

另外，也是为了推广我的框架：Strve.js，值得高兴的一件事，ChatGPT 居然给我这个框架定义为一个轻量级的 JavaScript 框架，用于构建用户界面。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/696660.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

服务器间传输文件

服务器间传输文件

在使用Linux过程有时需要在两台服务器之间传输文件&#xff0c;用到了scp命令&#xff0c;用着还挺方便 1.使用方式&#xff1a; scp [参数] [原路径] [目标路径] 1.1 常用可选参数&#xff1a; -B 使用批处理模式&#xff08;传输过程中不询问传输口令或短语&#xff09;-C…
阅读更多...
OpenGL glBegin()函数学习

OpenGL glBegin()函数学习

接此&#xff0c; OpenGL视口学习_bcbobo21cn的博客-CSDN博客 把VC6生成的代码中的材质部分注释掉&#xff1b;然后程序运行起来是如下&#xff1b; 把原先GLCube函数的代码替换为如下&#xff1b;下面代码是绘制线框&#xff0c;没有面&#xff1b;它是给出顶点坐标和顶点序…
阅读更多...
特征工程知识点总结

特征工程知识点总结

非系统且不严谨的总结 一、数据清洗 数据清洗部分主要包括&#xff1a;缺失值处理、重复值处理、异常值处理。前两者简单&#xff0c;要么直接删掉&#xff0c;要么按照我们心仪的规则进行插值填充。而对于异常值&#xff0c;也可以直接删掉&#xff0c;但是并不是最好的做法。…
阅读更多...
烂sql导致clickhouse集群memory_tracking直线飙升触发熔断

烂sql导致clickhouse集群memory_tracking直线飙升触发熔断

版 本 v e r s i o n 1 9 . 1 7 . 4 . 1 1 c l i c k h o u s e 集 群 &#xff0c; 主 要 存 日 志 数 据 与 监 控 数 据 。 架 构 为 4 台 主 机 1 2 个 实 例 数 &#xff0c; 数 据 为 单 副 本 。 近 日 &#xff0c; 该 c l i c k h o u s e 集 群 有 一 台 物…
阅读更多...
JavaWeb之jsp技术的个人理解

JavaWeb之jsp技术的个人理解

一.介绍 是什么&#xff1a;ava Server Pages&#xff1a; java服务器端页面&#xff08;可以理解为&#xff1a;一个特殊的页面&#xff0c;其中既可以指定定义html标签&#xff0c;又可以定义java代码&#xff09;&#xff0c;用于简化书写&#xff01;&#xff01;&#xf…
阅读更多...
Elasticsearch 安装使用

Elasticsearch 安装使用

下载安装 elasticsearch下载链接 运行&#xff1a;bin\elasticsearch.bat 设置密码&#xff1a;.\bin\elasticsearch-setup-passwords interactive 这边设置密码遇到一个坑 PS G:\elasticsearch-8.8.1> .\bin\elasticsearch-setup-passwords interactiveFailed to authe…
阅读更多...
arcpy对图层文件的属性表实现查询、插入、更新、删除

arcpy对图层文件的属性表实现查询、插入、更新、删除

前言 对属性表进行增删改查要用到插入游标、删除游标、更新游标、查询游标。 官方文档地址如下&#xff1a;https://resources.arcgis.com/zh-cn/help/main/10.2/ 授人以鱼不如授人以渔&#xff01;&#xff01; 一、查询游标SearchCursor SearchCursor 函数用于在要素类或…
阅读更多...
代码复现：基于竞争学习的灰狼优化算法Clb-GWO

代码复现：基于竞争学习的灰狼优化算法Clb-GWO

代码复现&#xff1a;基于竞争学习的灰狼优化算法Clb-GWO&#xff0c;可用于算法对比 参考文献&#xff1a;Aala Kalananda V K R, Komanapalli V L N. A competitive learning-based Grey wolf Optimizer for engineering problems and its application to multi-layer perce…
阅读更多...
MeterSphere（基于JMeter）常用断言汇总

MeterSphere（基于JMeter）常用断言汇总

JSONPath方式断言 {"success": true,"errCode": null,"errMessage": null,"statDate":"6月28日","data": [{"name": "人口","value": "1","unit": "万人…
阅读更多...
数字孪生与 GIS 融合为环保领域带来新的变化

数字孪生与 GIS 融合为环保领域带来新的变化

在当今日益关注环境保护和可持续发展的时代&#xff0c;数字孪生和 GIS 的融合为环境保护领域带来了巨大的变化。数字孪生是一种以 3D 模型为基础的仿真技术&#xff0c;能够对真实世界进行精确的建模和模拟&#xff0c;而 GIS 则是一种用于收集、管理、分析和可视化地理数据的…
阅读更多...
【Uni-app 引入海康h5player并接入ws视频流】

【Uni-app 引入海康h5player并接入ws视频流】

uni-app 海康h5player接入ws视频流 内容简介 采用uni-app中的renderjs 引入海康H5 SDK 后端接入海康综合安防平台的开放API获取预览流 海康H5 SDK 下载地址 接入原因 因在移动端接入不管是hls flv rtsp rtmp流的播放稳定性和速度均很慢&#xff0c;特采用ws直连流来播放&#…
阅读更多...
REVIT技巧|一面接一面，叠层墙就是这样堆出来的？

REVIT技巧|一面接一面，叠层墙就是这样堆出来的？

​Revit中有3种墙族&#xff1a;基本墙、幕墙和叠层墙。幕墙定义为由网格和嵌板组成的系统。 基本墙是由从外部到内部的材质层组成的墙。基本墙自底部到顶部的厚度都相同。 叠层墙由相互堆叠的基本墙组成&#xff0c;可以设计具有自底部到顶部厚度不同的墙。 今天&#xff0c…
阅读更多...
1.4 MyBatis数据库逆向生成工具

1.4 MyBatis数据库逆向生成工具

步骤1: mybatis-generator工程 步骤2&#xff1a;修改generatorConfig.xml内容 1.通用mapper所在目录 2.数据库链接 3.对应生成的pojo所在包 4.对应生成的mapper所在目录 5.配置mapper对应的java映射 6.数据库表 具体内容&#xff1a;<!-- 通用mapper所在目录 --> &l…
阅读更多...
记录两个不同的域名使用同一个微应用遇到的坑（micro-app)

记录两个不同的域名使用同一个微应用遇到的坑（micro-app)

由于公司的项目越来越多&#xff0c;很多的系统&#xff0c;也有很多相似的模块&#xff0c;为了解决重复造轮子&#xff0c;降低开发维护成本&#xff0c;故将这些抽出来单独作为微应用。经过调研&#xff0c;发现某东出品的micro-app比较吻合。使用过程省略。 在多个项目&am…
阅读更多...
Grafana 配置告警 配置 dubbo windows_exporter 报告页面图 其他公共报告可参考相近

Grafana 配置告警 配置 dubbo windows_exporter 报告页面图 其他公共报告可参考相近

目录 安装部署 官网下载 配置中文 启动 访问 账户密码 界面效果 图表操作 新建添加仪表 添加 Prometheus 数据源 导入已有报告示例 下载 windows_exporter Grafana 的图表模板 node_exporter 中文版&#xff1a;windows_exporter for Prometheus Dashboard CN v2…
阅读更多...
2023年全网最全接口自动化测试框架搭建，没有之一

2023年全网最全接口自动化测试框架搭建，没有之一

一、原理及特点 参数放在XML文件中进行管理 用httpClient简单封装一个httpUtils工具类 测试用例管理使用了testNg管理&#xff0c;使用了TestNG参数化测试&#xff0c;通过xml文件来执行case。 测试报告这里用到第三方的包ReportNG 项目组织用Maven 二、准备 使用工具&am…
阅读更多...
期货和现货白银的区别

期货和现货白银的区别

白银期货和现货白银既有区别&#xff0c;也有联系&#xff0c;它们二者都是以银价跟跟踪对象的保证金交易品种&#xff0c;因此都具有一定的杠杆效应&#xff0c;都可以双向操作&#xff0c;但是它们在交易制度、时间、杠杆水平等诸多方面&#xff0c;都存在明显的区别。 投资者…
阅读更多...
为什么你总学不会编程？到底差什么？

为什么你总学不会编程？到底差什么？

为什么你总学不会编程&#xff1f;到底差什么&#xff1f; 笔者看到太多太多的人花上钱、耗费一两年的时间都学不会编程&#xff0c;甚至一门C语言都反反复复学不完、学不会&#xff0c;游走在大门边缘&#xff0c;总是入不了门&#xff0c;到底是什么因为什么&#xff1f; 因…
阅读更多...
020、数据库管理之数据导出工具(Dumpling)

020、数据库管理之数据导出工具(Dumpling)

Dumpling dumpling详解dumpling介绍dumpling架构与特点dumpling 适用场景dumpling的部署dumpling 所需权限dumpling 导出SQL文件dumpling 导出csv文件对导出数据进行筛选导出数据的格式导出数据的一致性dumpling 性能优化 实验导出TiDB 数据库中的单张表和单个库导出mysql数据库…
阅读更多...
tomcat接入skywalking

tomcat接入skywalking

tomcat接入skywalking 一、说明二、步骤2.1 准备java-agent包2.2 tomcat部署2.2.1 下载2.2.2 tomcat修改catalina.sh文件2.2.3 tomcat修改启动端口2.2.4 启动tomcat 三、验证四、问题排查4.1 tomcat的启动日志 一、说明 服务器中已经运行着skywalking&#xff0c;准备在同一台…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023