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

Posted 2021-01-20 青红*皂了个白

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