原创

vue-element-ui整合editor.md编辑器

封面

之前一直用的是editor.md 现在使用了前后台分离 所以学习了vue 然后组件写了一个vue-editor.md编辑器,不合理之处望提出,谢谢!有一个小bug图片上传有点问题 涉及到跨越,目前没有解决,希望哪位大神能改进一下

代码

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
<template> <div :id="id" /> </template> <script> import $ from 'jquery' if (typeof window !== 'undefined') { var $s = require('scriptjs') } export default { name: 'EditorMD', model: { prop: 'content', event: 'content' }, props: { content: { type: String, default: '' }, width: { type: String, default: '' }, type: { type: String, default: 'editor' }, id: { type: String, default: function() { return 'editor-md-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '') } }, editorPath: { type: String, default: 'http://localhost:9999/editor.md' }, editorConfig: { type: Object, default() { return { width: this.width, height: 530, path: 'http://localhost:9999/editor.md/lib/', saveHTMLToTextarea: true, // 保存 HTML 到 Textarea searchReplace: true, htmlDecode: 'style,script,iframe|on*', // 开启 HTML 标签解析,为了安全性,默认不开启 emoji: true, taskList: true, watch: true, toolbarAutoFixed: false, tocm: true, // Using [TOCM] tex: true, // 开启科学公式TeX语言支持,默认关闭 flowChart: true, // 开启流程图支持,默认关闭 sequenceDiagram: true, // 开启时序/序列图支持,默认关闭, dialogMaskBgColor: '#fff', // 设置透明遮罩层的背景颜色,全局通用,默认为#fff imageUpload: false, imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'], imageUploadURL: `${process.env.VUE_APP_BASE_API}/admin/article/update1`, crossDomainUpload: true, // 开启跨越 uploadCallbackURL: '', onload: () => { }, onchange: () => { if (this.instance) { this.$emit('content', this.instance.getMarkdown()) } else { this.$emit('content', '') } } } } } }, data() { return { instance: null } }, watch: { content(val) { this.$nextTick(() => this.$emit('content', val), $('.editormd-markdown-textarea').val(this.content) ) } }, mounted() { // 加载依赖 $s([ `https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js`, `${this.editorPath}/lib/marked.min.js`, `${this.editorPath}/lib/prettify.min.js`, `${this.editorPath}/lib/raphael.min.js`, `${this.editorPath}/lib/underscore.min.js` ], () => { console.log('finish load js') $s(`${this.editorPath}/editormd.min.js`, () => { this.initEditor() }) }) }, beforeDestroy() { if (this.instance) { this.instance.recreate() } }, methods: { initEditor() { this.$nextTick((editorMD = window.editormd) => { if (editorMD) { if (this.type === 'editor') { this.instance = editorMD(this.id, this.editorConfig) this.instance.emoji = { path: `${this.editorPath}/plugins/emoji-dialog/emoji/`, ext: '.png' } if (this.content !== '') { $('.editormd-markdown-textarea').val(this.content) } } else { this.instance = editorMD.markdownToHTML(this.id, this.editorConfig) if (this.content !== '') { $('.editormd-markdown-textarea').val(this.content) } } } }) } } } </script>

dynamicLoadScript.js

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
let callbacks = [] function loadedTinymce() { // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144 // check is successfully downloaded script return window.tinymce } const dynamicLoadScript = (src, callback) => { const existingScript = document.getElementById(src) const cb = callback || function() {} if (!existingScript) { const script = document.createElement('script') script.src = src // src url for the third-party library being loaded. script.id = src document.body.appendChild(script) callbacks.push(cb) const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd onEnd(script) } if (existingScript && cb) { if (loadedTinymce()) { cb(null, existingScript) } else { callbacks.push(cb) } } function stdOnEnd(script) { script.onload = function() { // this.onload = null here is necessary // because even IE9 works not like others this.onerror = this.onload = null for (const cb of callbacks) { cb(null, script) } callbacks = null } script.onerror = function() { this.onerror = this.onload = null cb(new Error('Failed to load ' + src), script) } } function ieOnEnd(script) { script.onreadystatechange = function() { if (this.readyState !== 'complete' && this.readyState !== 'loaded') return this.onreadystatechange = null for (const cb of callbacks) { cb(null, script) // there is no way to catch loading errors in IE8 } callbacks = null } } } export default dynamicLoadScript

本文于   2019/6/11 上午  发布在  宁静寺  分类下,当前已被围观  542  次

相关标签: 学习 Web开发 工作 计算机

永久地址: https://luoyuanxiangvip.com/article/2

版权声明: 自由转载-署名-非商业性使用   |   Creative Commons BY-NC 3.0 CN