feat: forked vue-easymde
This commit is contained in:
Dominik Pschenitschni
parent
e779681905
commit
a745966984
5 changed files with 557 additions and 27 deletions
|
|
@ -45,7 +45,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import VueEasymde from 'vue-easymde'
|
||||
import VueEasymde from './vue-easymde/vue-easymde.vue'
|
||||
import EasyMDE from 'easymde'
|
||||
import marked from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
|
|
@ -106,19 +106,8 @@ export default {
|
|||
showPreviewText() {
|
||||
return this.isPreviewActive && this.text === '' && this.emptyText !== ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
changeTimeout: null,
|
||||
isEditActive: false,
|
||||
isPreviewActive: true,
|
||||
|
||||
preview: '',
|
||||
attachmentService: null,
|
||||
loadedAttachments: {},
|
||||
|
||||
config: {
|
||||
config() {
|
||||
return {
|
||||
autoDownloadFontAwesome: false,
|
||||
spellChecker: false,
|
||||
placeholder: this.placeholder,
|
||||
|
|
@ -246,7 +235,19 @@ export default {
|
|||
icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
changeTimeout: null,
|
||||
isEditActive: false,
|
||||
isPreviewActive: true,
|
||||
|
||||
preview: '',
|
||||
attachmentService: null,
|
||||
loadedAttachments: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -433,8 +434,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../node_modules/codemirror/lib/codemirror.css';
|
||||
@import './vue-easymde/vue-easymde.css';
|
||||
@import '../../../node_modules/highlight.js/scss/base16/equilibrium-gray-light';
|
||||
@import '../../../node_modules/easymde/dist/easymde.min.css';
|
||||
|
||||
.editor {
|
||||
.clear {
|
||||
|
|
|
|||
374
src/components/input/vue-easymde/vue-easymde.css
Normal file
374
src/components/input/vue-easymde/vue-easymde.css
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
.EasyMDEContainer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.EasyMDEContainer.sided--no-fullscreen {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror {
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
padding: 10px;
|
||||
font: inherit;
|
||||
z-index: 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-fullscreen {
|
||||
background: #fff;
|
||||
position: fixed !important;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
z-index: 8;
|
||||
border-right: none !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-sided {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
|
||||
border-right: none!important;
|
||||
border-bottom-right-radius: 0px;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-placeholder {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
padding: 9px 10px;
|
||||
border-top: 1px solid #bbb;
|
||||
border-left: 1px solid #bbb;
|
||||
border-right: 1px solid #bbb;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.editor-toolbar.fullscreen {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.editor-toolbar.fullscreen::before {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.editor-toolbar.fullscreen::after {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.editor-toolbar button, .editor-toolbar .easymde-dropdown {
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editor-toolbar button {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.editor-toolbar button.active,
|
||||
.editor-toolbar button:hover {
|
||||
background: #fcfcfc;
|
||||
border-color: #95a5a6;
|
||||
}
|
||||
|
||||
.editor-toolbar i.separator {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
border-right: 1px solid #fff;
|
||||
color: transparent;
|
||||
text-indent: -10px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.editor-toolbar button:after {
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 65%;
|
||||
vertical-align: text-bottom;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.editor-toolbar button.heading-1:after {
|
||||
content: "1";
|
||||
}
|
||||
|
||||
.editor-toolbar button.heading-2:after {
|
||||
content: "2";
|
||||
}
|
||||
|
||||
.editor-toolbar button.heading-3:after {
|
||||
content: "3";
|
||||
}
|
||||
|
||||
.editor-toolbar button.heading-bigger:after {
|
||||
content: "▲";
|
||||
}
|
||||
|
||||
.editor-toolbar button.heading-smaller:after {
|
||||
content: "▼";
|
||||
}
|
||||
|
||||
.editor-toolbar.disabled-for-preview button:not(.no-disable) {
|
||||
opacity: .6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.editor-toolbar i.no-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-statusbar {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: #959694;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.editor-statusbar span {
|
||||
display: inline-block;
|
||||
min-width: 4em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.editor-statusbar .lines:before {
|
||||
content: 'lines: '
|
||||
}
|
||||
|
||||
.editor-statusbar .words:before {
|
||||
content: 'words: '
|
||||
}
|
||||
|
||||
.editor-statusbar .characters:before {
|
||||
content: 'characters: '
|
||||
}
|
||||
|
||||
.editor-preview-full {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 7;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.editor-preview-side {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ddd;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.editor-preview-active-side {
|
||||
display: block
|
||||
}
|
||||
|
||||
.EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
|
||||
flex: 1 1 auto;
|
||||
height: auto;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.editor-preview-active {
|
||||
display: block
|
||||
}
|
||||
|
||||
.editor-preview {
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.editor-preview > p {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.editor-preview pre {
|
||||
background: #eee;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.editor-preview table td,
|
||||
.editor-preview table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-tag {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-attribute {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-string {
|
||||
color: #183691;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-header-1 {
|
||||
font-size: 200%;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-header-2 {
|
||||
font-size: 160%;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-header-3 {
|
||||
font-size: 125%;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-header-4 {
|
||||
font-size: 110%;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-comment {
|
||||
background: rgba(0, 0, 0, .05);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-link {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-url {
|
||||
color: #aab2b3;
|
||||
}
|
||||
|
||||
.cm-s-easymde .cm-quote {
|
||||
color: #7f8c8d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.editor-toolbar .easymde-dropdown {
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom right, #fff 0%, #fff 84%, #333 50%, #333 100%);
|
||||
border-radius: 0;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.editor-toolbar .easymde-dropdown:hover {
|
||||
background: linear-gradient(to bottom right, #fff 0%, #fff 84%, #333 50%, #333 100%);
|
||||
}
|
||||
|
||||
.easymde-dropdown-content {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
||||
padding: 8px;
|
||||
z-index: 2;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.easymde-dropdown:active .easymde-dropdown-content,
|
||||
.easymde-dropdown:focus .easymde-dropdown-content {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
span[data-img-src]::after{
|
||||
content: '';
|
||||
background-image: var(--bg-image);
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
background-size: contain;
|
||||
height: 0;
|
||||
padding-top: var(--height);
|
||||
width: var(--width);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
162
src/components/input/vue-easymde/vue-easymde.vue
Normal file
162
src/components/input/vue-easymde/vue-easymde.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<div class="vue-easymde">
|
||||
<textarea
|
||||
class="vue-simplemde-textarea"
|
||||
:name="name"
|
||||
:value="modelValue"
|
||||
@input="handleInput($event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EasyMDE from 'easymde'
|
||||
import marked from 'marked'
|
||||
|
||||
export default {
|
||||
name: 'vue-easymde',
|
||||
props: {
|
||||
modelValue: String,
|
||||
name: String,
|
||||
previewClass: String,
|
||||
autoinit: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true
|
||||
},
|
||||
},
|
||||
highlight: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false
|
||||
},
|
||||
},
|
||||
sanitize: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false
|
||||
},
|
||||
},
|
||||
configs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
previewRender: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue', 'blur', 'initialized'],
|
||||
data() {
|
||||
return {
|
||||
isValueUpdateFromInner: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.autoinit) this.initialize()
|
||||
},
|
||||
deactivated() {
|
||||
const editor = this.easymde
|
||||
if (!editor) return
|
||||
const isFullScreen = editor.codemirror.getOption('fullScreen')
|
||||
if (isFullScreen) editor.toggleFullScreen()
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.easyMDE) {
|
||||
this.easyMDE.toTextArea()
|
||||
this.easyMDE.cleanup()
|
||||
this.easyMDE = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initialize() {
|
||||
const configs = Object.assign({
|
||||
element: this.$el.firstElementChild,
|
||||
initialValue: this.modelValue,
|
||||
previewRender: this.previewRender,
|
||||
renderingConfig: {},
|
||||
}, this.configs)
|
||||
|
||||
// Synchronize the values of value and initialValue
|
||||
if (configs.initialValue) {
|
||||
this.$emit('update:modelValue', configs.initialValue)
|
||||
}
|
||||
|
||||
// Determine whether to enable code highlighting
|
||||
if (this.highlight) {
|
||||
configs.renderingConfig.codeSyntaxHighlighting = true
|
||||
}
|
||||
|
||||
// Set whether to render the input html
|
||||
marked.setOptions({ sanitize: this.sanitize })
|
||||
|
||||
// Instantiated editor
|
||||
this.easymde = new EasyMDE(configs)
|
||||
|
||||
// Add a custom previewClass
|
||||
const className = this.previewClass || ''
|
||||
this.addPreviewClass(className)
|
||||
|
||||
// Binding event
|
||||
this.bindingEvents()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit('initialized', this.easymde)
|
||||
})
|
||||
},
|
||||
|
||||
addPreviewClass(className) {
|
||||
const wrapper = this.easymde.codemirror.getWrapperElement()
|
||||
const preview = document.createElement('div')
|
||||
wrapper.nextSibling.className += ` ${className}`
|
||||
preview.className = `editor-preview ${className}`
|
||||
wrapper.appendChild(preview)
|
||||
},
|
||||
|
||||
bindingEvents() {
|
||||
this.easymde.codemirror.on('change', this.handleCodemirrorInput)
|
||||
this.easymde.codemirror.on('blur', this.handleCodemirrorBlur)
|
||||
},
|
||||
|
||||
handleCodemirrorInput(instance, changeObj) {
|
||||
if (changeObj.origin === 'setValue') {
|
||||
return
|
||||
}
|
||||
const val = this.easymde.value()
|
||||
this.handleInput(val)
|
||||
},
|
||||
|
||||
handleCodemirrorBlur() {
|
||||
const val = this.easymde.value()
|
||||
this.isValueUpdateFromInner = true
|
||||
this.$emit('blur', val)
|
||||
},
|
||||
|
||||
handleInput(val) {
|
||||
this.isValueUpdateFromInner = true
|
||||
this.$emit('update:modelValue', val)
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
modelValue(val) {
|
||||
if (this.isValueUpdateFromInner) {
|
||||
this.isValueUpdateFromInner = false
|
||||
} else {
|
||||
this.easymde.value(val)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vue-easymde .markdown-body {
|
||||
padding: 0.5em
|
||||
}
|
||||
|
||||
.vue-easymde .editor-preview-active, .vue-easymde .editor-preview-active-side {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue