开篇

  不知道诸位是否对 markdown熟悉。它算是一门标记语言,但是时态简略,却本领强悍。例如本篇博客,便是用 markdown时态撰写,然后按照不同的环境及依赖生成各类我想要的款式,比如直接生成本篇博客款式或则使用一些依赖或则工具赋之愈加美观的款式。同样,一般在CMS后台管理系统中,也常常会用到编辑器来撰写一些文章材料。其中最常用的还是 markdown编辑器跟 富文本编辑器。

  效果Markdown 介绍

  1. 什么是Markdown首先,各位框架玩家一定不会陌生,因为无论是在各种框架下还是开源项目中,都会有一个 .md的文件,该文件通常是项目说明文件,不仅时态别致,而且所生成的“页面”也要比普通标记语言愈发整洁明了。那么它到底是什么呢? Markdown是一种可以使用普通文本编辑器撰写的标记语言,通过简略的标记时态,它可以让普通文本内容具备一定的格式。 Markdown具备一系列衍生版本,用于扩充Markdown的功能(如表格、脚注、内嵌HTML等等),这些功能原初的Markdown尚不具备,它们能使Markdown转化成更多的格式,例如LaTeX,Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如Pandoc;要么基于网站,如GitHub跟Wikipedia,在句型上基本兼容,但在一些时态跟渲染疗效上有改动。

  2. Markdown用途Markdown的句型简约明了、学习容易,而且功能比纯文本更强,因此有很多人用它写博客。世界上最流行的博客平台WordPress跟小型CMS如Joomla、Drupal都能挺好的支持Markdown。完全选用Markdown编辑器的博客平台有Ghost跟Typecho。 用于撰写说明文档,并且以“README.md”的文件名保存在硬件的目录下边。 除此此外,由于我们有了RStudio那样的神级编辑器,我们还可以迅速将Markdown转换为演说PPT、Word产品文档、LaTex论文并且是用极其少量的代码完成最小可用原型。在数据科学领域typecho 富文本编辑器,Markdown早已广泛使用,极大地推动了动态可重复性研究的历史进程。

  vue 中怎样使用

  注: 本样例采用的是 mavon-editor很明显,所有组件逃不过三步走原则:

  安装引进、配置使用1. 安装

  安装mavon-editor: npm install mavon-editor--save

  2. 引入、配置

  在要使用markdown编辑器的组件内操作:

  <pre class="prism-token token language-javascript">
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
</pre>

  3. 使用

  注意:

  绑定model实时改变:将 markdown实时转换为 html

  在要使用markdown编辑器的组件内操作:

  <pre class="prism-token token language-javascript">


    
    提交

export default {

// 注册
components: {
    mavonEditor,
},
data() {
    return {
        content:&#x27;&#x27;, // 输入的markdown
        html:&#x27;&#x27;,    // 及时转的html
    }
},
methods: {
    // 所有操作都会被解析重新渲染
    change(value, render){
        // render 为 markdown 解析后的结果[html]
        this.html = render;
    },
    // 提交
    submit(){
        console.log(this.content);
        console.log(this.html);
    }
},
mounted() {
}

}
</pre>

  问题

  那么,在常用的操作上面,例如各级标题、表格、加粗加斜、标记、图文……图?此时typecho 富文本编辑器,我们发觉一个问题:如何添加本地图片呢?

  Q

  在这些IDE上面使用markdown时,可以自由的插入本地图片,那我们在页面中使用此编译器组件怎么添加图片呢?

  A

  监听。没错,就是窃听输入框变化。如果窃听至有图片插入,那么我们可以先将图片上传到服务器,然后获取至线上url,拿到该url再插入至该位置。那么详细过程就很明显了:

  选择本地图片,插入窃听至有图片插入将该图上传到服务器获取至服务器返回的图片url将该线上url冬天插入至输入框中代码如下

  <pre class="prism-token token language-javascript">


    
        
        提交
    

import { mavonEditor } from &#x27;mavon-editor&#x27;
import &#x27;mavon-editor/dist/css/index.css&#x27;
export default {
    name: "",
    props: [],
    components: {
        mavonEditor,
    },
    data() {
        return {
            content:&#x27;&#x27;,
            html:&#x27;&#x27;,
            configs: {}
        }
    },
    methods: {
        // 将图片上传到服务器,返回地址替换到md中
        $imgAdd(pos, $file){
            let formdata = new FormData();
            this.$upload.post(&#x27;/上传接口地址&#x27;, formdata).then(res => {
                console.log(res.data);
                this.$refs.md.$img2Url(pos, res.data);
            }).catch(err => {
                console.log(err)
            })
        },
        // 所有操作都会被解析重新渲染
        change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.html = render;
        },
        // 提交
        submit(){
            console.log(this.content);
            console.log(this.html);
            this.$message.success(&#x27;提交成功,已打印至控制台!&#x27;);
        }
    },
    mounted() {
    }
}
e>

  后

  到这儿,vue中使用markdown编辑器教程结束。那么更为大众广泛使用的 富文本编辑器怎样使用呢?且看下回~

Last modification:December 17th, 2020 at 02:10 am
如果觉得我的文章对你有用,请随意赞赏