美文网首页
最强markdown编辑器

最强markdown编辑器

作者: 青春向来如此 | 来源:发表于2021-05-08 15:56 被阅读0次

"editor.md": "^1.5.0"
官网http://editor.md.ipandao.com/examples/index.html
支持复制粘贴
public/index.html中加入jquery和zepto等依赖

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0" /> -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title>xxx平台</title>
        <link rel="stylesheet" href="<%= BASE_URL %>editor.md/css/editormd.css" />
        <script src="https://cdn.jsdelivr.net/npm/zepto@1.2.0/dist/zepto.min.js"></script>
        <script src="<%= BASE_URL %>editor.md/editormd.min.js"></script>
    </head>
    <body>
        <noscript>
            <strong
                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
                enabled. Please enable it to continue.</strong
            >
        </noscript>
        <div id="app"></div>
        <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <!-- built files will be auto injected -->
    </body>
</html>

src/views/editor-md/index.vue

<!-- 此页面用于测试editor.md -->
<template>
    <div>
        <div id="editormdid">
            <textarea v-model="content"></textarea>
        </div>
        <el-button @click="save">保存</el-button>
    </div>
</template>

<script>
export default {
    name: "Editor",
    props: {
        content: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            instance: null
        };
    },
    mounted() {
        this.initEditor();
    },
    methods: {
        initEditor() {
            this.instance = window.editormd("editormdid", {
                height: 500,
                emoji: true,
                path: "editor.md/lib/",
                saveHTMLToTextarea: true
            });
        },
        save() {
            console.log(this.instance.getHTML());
        }
    }
};
</script>

展示 data是上一步保存的html结构

 <div v-html="data" class="markdown-body editormd-html-preview"></div>

相关文章

  • 最强markdown编辑器

    "editor.md": "^1.5.0"官网http://editor.md.ipandao.com/examp...

  • DAY1

    Markdown练习 Markdown编辑器切换 点击左下角设置-默认编辑器-Markdown编辑器即可切换,注意...

  • markdown语法

    markdown编辑器 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的...

  • MarkDown编辑器的姿势大全

    MarkDown编辑器的姿势大全 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器...

  • markdown写作和排版

    设置-默认编辑器-Markdown编辑器 markdown的语法 标题 这是最为常用的格式,在 Markdown ...

  • 简书中Markdown的用法

    简书中如何使用Markdown编辑器 然后 Tips:将编辑器改成Markdown后,一定要新建 markdown...

  • 欢迎使用CSDN-markdown编辑器

    ---来自CSDN博客 欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而...

  • Markdown的基本用法

    Markdown应该怎么用 一、Markdown编辑器 1、在线编辑器 StackEdit进入页面,点击start...

  • Ubuntu常用工具

    1、markdown编辑器remarkable -- 基本上是Linux平台下最好的markdown编辑器http...

  • 2018-02-07

    #欢迎使用Markdown编辑器写博客本Markdown编辑器使用[StackEdit][6]修改而来,用它写博客...

网友评论

      本文标题:最强markdown编辑器

      本文链接:https://www.haomeiwen.com/subject/aqiudltx.html