码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-11-18 13:10:02      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:bsp   数据   .json   直接   简单   输入   转换器   put   目录   

首先需要在项目里安装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属性直接解析返回的数据

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

标签:bsp   数据   .json   直接   简单   输入   转换器   put   目录   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!