实现一个简单的marked编辑格式转换器部分功能

首先需要在项目里安装marked格式编辑包 在项目根目录下运行npm install marked 安装依赖包

至此,package.json里面 dependencies 已经添加     "marked": "^0.5.1",

然后在需要显示的组件里编写显示区域:

1 <div class="mark">
2       <textarea rows="10" cols="100" class="editor" v-model="markValue">
3
4       </textarea>
5       <div class="show" v-html="currValue"></div>
6     </div>

textarea是输入栏显示区域,需要对数据进行双向绑定,完成数据输入的实时更新    v-model="markValue"

1  import Marked from "marked"
2   export default{
3     name:"Vfooter",
4     data(){
5         return{
6           markValue:""
7         }
8     },

我们在对数据进行操作前先声明输入框变量为空,引入marked编辑器包

1 computed:{
2       currValue(){
3           return Marked(this.markValue)
4       }
5     }

在显示框调用currValue这个方法后,该方法用marked编辑包对输入的数据进行格式编辑,并返回HTML标记字符,显示框此时用v-html属性直接解析返回的数据

原文地址:https://www.cnblogs.com/wen-kang/p/9977511.html

时间: 2024-10-11 12:17:24

实现一个简单的marked编辑格式转换器部分功能的相关文章

构建了一个简单的时间序列数据集来说明索引功能

数据索引和选取 pandas对象中的轴标签信息有很多作用: 使用已知指示来确定数据(即提供元数据),这对于分析.可视化以及交互式控制台的显示都十分重要 使能够实现自动和显式的数据对齐 允许直观地获取和设置数据集的子集 在这一部分,我们将致力于最终的目的:即如何切片,切丁以及一般地获取和设置pandas对象的子集.文章将主要集中在Series和DataFrame上,因为它们潜力很大.希望未来在高维数据结构(包括panel)上投入更多的精力,尤其是在基于标签的高级索引方面. 提示:Python和bu

一个简单的记事本编辑框的实现以及搜集的一些窗口风格的预定义

这是一个简单的记事本的窗口过程 1 WndProc proc hWnd:HWND, uMsg:UINT, wParam:WPARAM, lParam:LPARAM 2 3 LOCAL winRect:RECT 4 LOCAL editWidth:DWORD 5 LOCAL editHeight:DWORD 6 7 .IF uMsg==WM_DESTROY 8 invoke PostQuitMessage,NULL 9 .ELSEIF uMsg==WM_CREATE 10 ;创建一个编辑框 11

一个简单的日期输入格式化控件。

js代码有一百多行. 先上效果图 html代码 日期: <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期"> 设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件. js代码 这里应用了jQuery的库, 主要用于选择元素和绑定事件. <script src=&qu

最简单的基于FFmpeg的封装格式转换器(无编解码)

本文介绍一个基于FFMPEG的封装格式转换器.所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(对应.avi,.flv,.mkv,.mp4文件).需要注意的是,本程序并不进行视音频的编码和解码工作.而是直接将视音频压缩码流从一种封装格式文件中获取出来然后打包成另外一种封装格式的文件.传统的转码程序工作原理如下图所示: 上图例举了一个举例:FLV(视频:H.264,音频:AAC)转码为AVI(视频:MPEG2,音频MP3)的例子.可见视频转码的过程通俗地讲相当于把视频和音频

一个简单的web服务器例子

一个简单的web容器小例子,功能十分简单,只能访问静态资源,对于新手来说还是有一定的意义.主要分三个类 1.server类:主要功能开启socketServer,阻塞server,接收socket访问,解析request,创建request,作出响应 public class TestServer1 { private boolean shutdown = false; // web目录webroot public static final String WEB_ROOT = System.ge

PHP实现的一个简单的数据库操作类

PHP实现的一个简单的数据库操作类 实现的功能: - 在实例化的时候能设置连接字符集 - 在实例化的时候能连接数据库 - 在实例化的时候能选择默认数据库 - 销毁对象时关闭数据库 代码如下: <?php // 数据库操作类MySQLDB class MySQLDB { // 声明属性 private $server; private $username; private $password; public $default_db; public $link; // 声明构造函数 public f

一个简单的Sqlite双备份代码

在使用数据库过程中,如果数据库文件只在内部存储器中创建,可能会被删除掉导致数据丢失(root后进入data/data下删除应用的sqlite文件),为了防止这种情况发生,可以进行数据库文件在sdcard中进行一次备份.以下是一个简单双备份数据库代码类,主要功能是实现在数据库中进行键值对存储,并且数据库及保存在内部存储器中,又保存在sdcard中. /**  * @author xiaoli  * 下面是一个数据库双备份使用实例代码,双备份的好处在于,如果用户误删了内部存储器中数据库文件我们依然可

【SSH进阶之路】一步步重构MVC实现Struts框架——从一个简单MVC开始(三)

目录: [SSH进阶之路]Struts基本原理 + 实现简单登录(二) [SSH进阶之路]一步步重构MVC实现Struts框架--从一个简单MVC开始(三) [SSH进阶之路]一步步重构MVC实现Struts框架--封装业务逻辑和跳转路径(四) [SSH进阶之路]一步步重构MVC实现Struts框架--彻底去掉逻辑判断(五) [SSH进阶之路]一步步重构MVC实现Struts框架--完善转向页面,大功告成(六) 上篇[SSH进阶之路]Struts基本原理 + 实现简单登录(二),我们介绍MVC和

PHP实现的一个简单的数据库操作类(修改版)

PHP实现的一个简单的数据库操作类 实现的功能: - 在实例化的时候能设置连接字符集 - 在实例化的时候能连接数据库 - 在实例化的时候能选择默认数据库 - 销毁对象时关闭数据库 代码如下: <?php // 数据库操作类MySQLDB class MySQLDB { // 声明属性 private $server; private $port; private $username; private $password; public $default_db; private $charset;