简单封装一个vue-editormd组件

2019-04-08  本文已影响0人  斑翅果蝇
:大致思路

参考源码:https://github.com/star7th/showdoc

editormd.vue中引入下载的editor.md的文件, 即书写配置选项的path路径
页面中引用editormd.vue

一, 了解一下editormd的属性与方法

用requirejs等工具引入所有所需依赖以后,window上就会挂载editormd方法,可直接调用

1 用于编辑的editormd

 <div id="layout">
         <header>
                <h1>Auto height test</h1>
         </header>
          // 用于在外部添加功能
         <div class="btns">
              <button id="append-btn">Append markdown</button>
          </div>
          <div id="test-editormd">
              <textarea style="display:none;"></textarea>
          </div>
</div>

var testEditor = editormd("test-editormd", { // 配置选项对象
     autoHeight: true, // 自动高度 
     atLink    : false,    // disable @link
     codeFold: true, // 代码折叠
     emailLink : false,    // disable email address auto link
     emoji           : true,
     flowChart       : true, //流程图
     height : 640,
     syncScrolling: true | false | 'single' // 编辑与预览是否同步滚动 默认true
     htmlDecode      : "style,script,iframe", 
     lineNumbers     : false     // 隐藏编辑窗口行号,默认true
     mode: 'text/html', //  ["text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"];
     path   : "../lib/", // 下载的editor.md文件夹下的lib目录地址
     placeholder: 'Enjoy coding!',
     readOnly: true, // 开启会隐藏toolbar
     saveHTMLToTextarea : true,
     searchReplace: true,
     sequenceDiagram : true, // 时序图,系列图
     styleActiveLine : false,   // 高亮鼠标所在行,默认true
     taskList        : true, // - [ ] this  // - [x] this 是否支持该md语法,默认false
     todoList: true,
     tex             : true, // katex科学公式 默认false
     toc: true,
     tocContainer: '某<div>的id如: #id', // ''空字符串表示默认的textarea, 有id表示为textarea外部
     tocDropdown   : true, // 下拉菜单,自动索引###
     tocStartLevel : 4 ,   // #### 顶格为4, 不渲染h1,h2,h3 .默认:1,
     toolbar: false, // 是否显示工具栏
     toolbarIcons:'"undo", "redo"',
     theme:  (localStorage.theme) ? localStorage.theme : "default",
     value: $('#id').val(), // textarea首尾标签之间的内容
     watch: false,  // 初始化时显示预览? 默认true
     imageUpload: false, //文件本地上传   默认false, 
     width  : "90%",
})
}

// 实例方法,可用于外部添加btn
testEditor.appendMarkdown(md);
testEditor.config('syncScrolling', true)
testEditor.getMarkdown();       // 获取 Markdown 源码
testEditor.getHTML();           // 获取 Textarea 保存的 HTML 源码
testEditor.getPreviewedHTML();  // 获取预览窗口里的 HTML,在开启 watch 且没有开启 saveHTMLToTextarea 时使用
testEditor.getValue(),
testEditor.setValue(code);
testEditor.fullscreen();
testEditor.setTheme(theme); //  var theme    = editormd.themes[i];
testEditor.setCodeMirrorOption("mode", mode);
testEditor.watch();
testEditor.unwatch();

用于编辑的editor.md 使用过程注意点:
1, 不支持v-model, 有因为需要特殊的保存为.md格式


image.png

2用于显示的editor.md

总结了部分后我就停笔了,因为感觉到配置选项应该是一样的

<div id="test-editormd-view">
                // textarea可缺省
               <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
            </div>
$(function(){
var testEditormdView;
$.get('url').then(markdown=>{
testEditorView = editormd.markdownToHtml('test-editor-view',{
markdown: markdown,
// htmlDecode: true // 开启html标签解析,为了安全性,默认不开启
htmlDecode:  "style,script,iframe",
taskList: true,
tex: true, // 默认false
flowChart: true, // 默认false
sequenceDiagram: true // 默认false
}))
//实例方法
testEditormdView.getMarkdown()
})

二: 简单封装vue-editormd组件

1, 定义处,

<template>
    <div :id="id" class="main-editor" @keydown.ctrl.83.prevent="save">
        <link href="js/editor.md/css/editormd.css" rel="stylesheet">

        <textarea v-html="content" style="display:none;"></textarea>

        <!-- 放大图片 -->
<!--        <BigImg v-if="showImg" @clickit="showImg = false" :imgSrc="imgSrc"></BigImg>-->

    </div>
</template>

<script>
    import  $s from 'scriptjs'

    // import BigImg from '@/components/common/BigImg'

    export default {
        name: 'Editormd',
        props: {
            width: '',
            content:{
                type: String,
                default: ''
            },
            type: {
                type:String,
                default: 'editor'
            },
            id: {
                type: String,
                default: 'editor-md'
            },
            editorPath: {
                type: String,
                default: 'js/editor.md', // editormd文件夹所在路径
            },
            editorConfig: {
                type: Object,
                default() { // 对象或数组默认值必须从一个工厂函数获取
                    return {
                        path: '/js/editor.md/lib/',
                        height: 300,
                        taskList        : true, // 任务完成图
                        watch: false,
                        placeholder: "本编辑器支持Markdown编辑,左边编写,右边预览",
                        tex             : true,  // 科学公式
                        flowChart       : true,  // 流程图
                        sequenceDiagram : true,  // 时序图/序列图
                        syncScrolling: "single", // 预览,编辑窗同步滚动
                        toolbarIcons: ["undo", "redo", "|","bold","italic","|", "image","link","||","watch","search"],
                        htmlDecode: "style,script,iframe,title,onmouseover,onmouseout,style",
                        // imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
                        // imageUploadURL: DocConfig.server+"/api/page/uploadImg",
                        onload: () => {
                            console.log('onload')
                            console.log(this.instance);
                        },
                    };
                },
            },
        },
        // components:{
        //     BigImg
        // },
        data() {
            return {
                instance: null, // editormd的实例
                showImg:false,
                imgSrc: ''
            };
        },
        computed: {
        },
        mounted() {

            //加载依赖""
            $s([`${this.editorPath}/../jquery.min.js`,
                `${this.editorPath}/lib/raphael.min.js`,
                `${this.editorPath}/lib/flowchart.min.js`,
            ],()=>{
                $s([
                    // `${this.editorPath}/../xss.min.js`,
                    `${this.editorPath}/lib/marked.min.js`,
                    `${this.editorPath}/lib/prettify.min.js`,
                    `${this.editorPath}/lib/underscore.min.js`,
                    `${this.editorPath}/lib/sequence-diagram.min.js`,
                    `${this.editorPath}/lib/jquery.flowchart.min.js`,
                ], () => {

                    $s(`${this.editorPath}/editormd.js`, () => {
                        this.initEditor();
                    });
                    // $s(`${this.editorPath}/../highlight/highlight.min.js`, () => {
                    //     hljs.initHighlightingOnLoad();
                    // });
                });


            });
        },
        beforeDestroy() {
            //清理所有定时器
            for (var i = 1; i < 999; i++){
                window.clearInterval(i);
            };
            //window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        },
        methods: {
            initEditor() {
                this.$nextTick((editorMD = window.editormd) => {
                    if (editorMD) {
                        if (this.type == 'editor'){
                            this.instance = editorMD(this.id, this.editorConfig);
                            //草稿跟后端初始化会冲突
                            // this.draft(); 
                            //window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
                        } else {
                            this.instance = editorMD.markdownToHTML(this.id, this.editorConfig);
                        }
                        this.deal_with_content();
                    }
                });
            },
            //插入数据到编辑器中。插入到光标处
            insertValue(insertContent){
                this.instance.insertValue(this.html_decode(insertContent));
            },
            getMarkdown(){
                return this.instance.getMarkdown();
            },
            editor_unwatch(){
                return this.instance.unwatch();
            },
            editor_watch(){
                return this.instance.watch();
            },
            clear(){
                return this.instance.clear();
            },
            //草稿
            // draft(){
            //     var that = this ;
            //     //定时保存文本内容到localStorage
            //     setInterval(()=>{
            //         localStorage.page_content= that.getMarkdown() ;
            //     }, 60000);
            //     //检测是否有定时保存的内容
            //     var page_content = localStorage.page_content ;
            //     if (page_content && page_content.length > 0) {
            //         localStorage.removeItem("page_content");
            //         that.$confirm('检测到有本地保存的草稿,是否恢复','提示',{
            //             confirmButtonText: '恢复',
            //             cancelButtonText: '放弃',
            //                 showClose:false
            //             }
            //         ).then(()=>{
            //             that.clear() ;
            //             that.insertValue(page_content) ;
            //             localStorage.removeItem("page_content");
            //         }).catch(()=>{
            //             localStorage.removeItem("page_content");
            //         });
            //     };
            // },

            //对内容做些定制化改造
            deal_with_content(){
                var that = this ;
                //当表格列数过长时将自动出现滚动条
                $.each($("#"+this.id+' table'), function() {
                    $(this).prop('outerHTML', '<div style="width: 100%;overflow-x: auto;">'+$(this).prop('outerHTML')+'</div>');
                });
                //超链接都在新窗口打开
                $("#"+this.id+' a[href^="http"]').each(function() {
                    $(this).attr('target', '_blank');
                });
                //对表格进行一些改造
                $("#"+this.id+" table tbody tr").each(function(){
                    var tr_this = $(this) ;
                    var td1 =  tr_this.find("td").eq(1).html() ;
                    var td2 =  tr_this.find("td").eq(2).html() ;
                    if(td1 =="object" || td1 =="array[object]" || td2 =="object" || td2 =="array[object]"){
                        tr_this.css({"background-color":"#F8F8F8"});
                    }else{
                        tr_this.css("background-color","#fff");
                    }
                    //设置表格hover
                    tr_this.hover(function(){
                        tr_this.css("background-color","#F8F8F8");
                    },function(){
                        if(td1 =="object" || td1 =="array[object]" || td2 =="object" || td2 =="array[object]"){
                            tr_this.css({"background-color":"#F8F8F8"});
                        }else{
                            tr_this.css("background-color","#fff");
                        }
                    });
                });
                //获取内容总长度
                var contentWidth = $("#"+this.id+" p").width() ;
                // contentWidth = contentWidth ? contentWidth : 722;
                
                //表格列 的宽度
                $("#"+this.id+" table").each(function(i){
                    var $v =$(this).get(0) ;//原生dom对象
                    var num = $v.rows.item(0).cells.length ; //表格的列数
                    var colWidth = Math.floor(contentWidth/num) -2 ;
                    if (num <= 5) {
                        $(this).find("th").css("width",colWidth.toString()+"px");
                    }

                });

                //图片点击放大
                $("#"+this.id+" img").click(function(){
                    var  img_url = $(this).attr("src");
                    that.showImg = true;
                    // 获取当前图片地址
                    that.imgSrc = img_url;
                });

                //表格头颜色
                $("#"+this.id+" table thead tr").css("background-color","#409eff") ;
                $("#"+this.id+" table thead tr").css("color","#fff") ;
                //代码块美化
                // $("#"+this.id+" .linenums").css("padding-left","5px") ;
                // $("#"+this.id+" .linenums li").css("list-style-type","none") ;
                // $("#"+this.id+" .linenums li").css("background-color","#fcfcfc") ;
                // $("#"+this.id+" pre").css("background-color","#fcfcfc") ;
                // $("#"+this.id+" pre").css("border","1px solid #e1e1e8") ;
                //
                // $("#"+this.id+" code").css("color","#d14");

            },
            //转义
            html_decode(str){
                var s = "";
                if (str.length == 0) return "";
                s = str.replace(/&gt;/g, "&");
                s = s.replace(/&lt;/g, "<");
                s = s.replace(/&gt;/g, ">");
                s = s.replace(/&nbsp;/g, " ");
                s = s.replace(/&#39;/g, "\'");
                s = s.replace(/&quot;/g, "\"");
                //s = s.replace(/<br>/g, "\n");
                return s;
            }
        }
    };
</script>

<style scoped></style>

2, 引入处

1, 编辑:

两件事: 保存.md, 初始化渲染md
1, 保存:

 import Editormd from '../../../utils/editormd/Editormd.vue'
  components: {
      Editormd
    },
<editormd  type="editor" ref="editormdRef" :content="currentEdit.remark"></editormd>
<script>
 const editormdRef =  this.$refs['editormdRef'][0]
 let content = editormdRef.getMarkdown() // 把content传到后端即可
</script>

2, 初始化:
在vue-editormd组件中写了v-html = content即可

2, 纯渲染(vue组件中):

  <editormd type="html" v-if="item.remark" :content="item.remark"></editormd>

END

上一篇下一篇

猜你喜欢

热点阅读