删除markdown
This commit is contained in:
HuskyOo
parent
2cc03a030d
commit
3f8b911945
|
|
@ -142,12 +142,12 @@ const asyncRoutes = [
|
||||||
name: 'TinymceDemo',
|
name: 'TinymceDemo',
|
||||||
meta: { title: 'Tinymce' }
|
meta: { title: 'Tinymce' }
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
path: 'markdown',
|
// path: 'markdown',
|
||||||
component: 'views/components-demo/markdown',
|
// component: 'views/components-demo/markdown',
|
||||||
name: 'MarkdownDemo',
|
// name: 'MarkdownDemo',
|
||||||
meta: { title: 'Markdown' }
|
// meta: { title: 'Markdown' }
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
path: 'json-editor',
|
path: 'json-editor',
|
||||||
component: 'views/components-demo/json-editor',
|
component: 'views/components-demo/json-editor',
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,6 @@
|
||||||
"screenfull": "4.2.0",
|
"screenfull": "4.2.0",
|
||||||
"script-loader": "0.7.2",
|
"script-loader": "0.7.2",
|
||||||
"sortablejs": "1.8.4",
|
"sortablejs": "1.8.4",
|
||||||
"tui-editor": "1.3.3",
|
|
||||||
"vue": "2.6.10",
|
"vue": "2.6.10",
|
||||||
"vue-count-to": "1.0.13",
|
"vue-count-to": "1.0.13",
|
||||||
"vue-cropper": "^0.5.3",
|
"vue-cropper": "^0.5.3",
|
||||||
|
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
|
|
||||||
export default {
|
|
||||||
minHeight: '200px',
|
|
||||||
previewStyle: 'vertical',
|
|
||||||
useCommandShortcut: true,
|
|
||||||
useDefaultHTMLSanitizer: true,
|
|
||||||
usageStatistics: false,
|
|
||||||
hideModeSwitch: false,
|
|
||||||
toolbarItems: [
|
|
||||||
'heading',
|
|
||||||
'bold',
|
|
||||||
'italic',
|
|
||||||
'strike',
|
|
||||||
'divider',
|
|
||||||
'hr',
|
|
||||||
'quote',
|
|
||||||
'divider',
|
|
||||||
'ul',
|
|
||||||
'ol',
|
|
||||||
'task',
|
|
||||||
'indent',
|
|
||||||
'outdent',
|
|
||||||
'divider',
|
|
||||||
'table',
|
|
||||||
'image',
|
|
||||||
'link',
|
|
||||||
'divider',
|
|
||||||
'code',
|
|
||||||
'codeblock'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
<template>
|
|
||||||
<div :id="id" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// deps for editor
|
|
||||||
import 'codemirror/lib/codemirror.css' // codemirror
|
|
||||||
import 'tui-editor/dist/tui-editor.css' // editor ui
|
|
||||||
import 'tui-editor/dist/tui-editor-contents.css' // editor content
|
|
||||||
|
|
||||||
import Editor from 'tui-editor'
|
|
||||||
import defaultOptions from './default-options'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'MarkdownEditor',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default() {
|
|
||||||
return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return defaultOptions
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'markdown'
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
language: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
editor: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
editorOptions() {
|
|
||||||
const options = Object.assign({}, defaultOptions, this.options)
|
|
||||||
options.initialEditType = this.mode
|
|
||||||
options.height = this.height
|
|
||||||
options.language = this.language
|
|
||||||
return options
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(newValue, preValue) {
|
|
||||||
if (newValue !== preValue && newValue !== this.editor.getValue()) {
|
|
||||||
this.editor.setValue(newValue)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
language(val) {
|
|
||||||
this.destroyEditor()
|
|
||||||
this.initEditor()
|
|
||||||
},
|
|
||||||
height(newValue) {
|
|
||||||
this.editor.height(newValue)
|
|
||||||
},
|
|
||||||
mode(newValue) {
|
|
||||||
this.editor.changeMode(newValue)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initEditor()
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
this.destroyEditor()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initEditor() {
|
|
||||||
this.editor = new Editor({
|
|
||||||
el: document.getElementById(this.id),
|
|
||||||
...this.editorOptions
|
|
||||||
})
|
|
||||||
if (this.value) {
|
|
||||||
this.editor.setValue(this.value)
|
|
||||||
}
|
|
||||||
this.editor.on('change', () => {
|
|
||||||
this.$emit('input', this.editor.getValue())
|
|
||||||
})
|
|
||||||
},
|
|
||||||
destroyEditor() {
|
|
||||||
if (!this.editor) return
|
|
||||||
this.editor.off('change')
|
|
||||||
this.editor.remove()
|
|
||||||
},
|
|
||||||
setValue(value) {
|
|
||||||
this.editor.setValue(value)
|
|
||||||
},
|
|
||||||
getValue() {
|
|
||||||
return this.editor.getValue()
|
|
||||||
},
|
|
||||||
setHtml(value) {
|
|
||||||
this.editor.setHtml(value)
|
|
||||||
},
|
|
||||||
getHtml() {
|
|
||||||
return this.editor.getHtml()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -18,12 +18,12 @@ const componentsRouter = {
|
||||||
name: 'TinymceDemo',
|
name: 'TinymceDemo',
|
||||||
meta: { title: 'Tinymce' }
|
meta: { title: 'Tinymce' }
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
path: 'markdown',
|
// path: 'markdown',
|
||||||
component: () => import('@/views/components-demo/markdown'),
|
// component: () => import('@/views/components-demo/markdown'),
|
||||||
name: 'MarkdownDemo',
|
// name: 'MarkdownDemo',
|
||||||
meta: { title: 'Markdown' }
|
// meta: { title: 'Markdown' }
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
path: 'json-editor',
|
path: 'json-editor',
|
||||||
component: () => import('@/views/components-demo/json-editor'),
|
component: () => import('@/views/components-demo/json-editor'),
|
||||||
|
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="components-container">
|
|
||||||
<aside>Markdown is based on
|
|
||||||
<a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
|
|
||||||
>
|
|
||||||
Documentation </a>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div class="editor-container">
|
|
||||||
<el-tag class="tag-title">
|
|
||||||
Basic:
|
|
||||||
</el-tag>
|
|
||||||
<markdown-editor v-model="content1" height="300px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="editor-container">
|
|
||||||
<el-tag class="tag-title">
|
|
||||||
Markdown Mode:
|
|
||||||
</el-tag>
|
|
||||||
<markdown-editor ref="markdownEditor" v-model="content2" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="editor-container">
|
|
||||||
<el-tag class="tag-title">
|
|
||||||
Customize Toolbar:
|
|
||||||
</el-tag>
|
|
||||||
<markdown-editor v-model="content3" :options="{ toolbarItems: ['heading','bold','italic']}" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="editor-container">
|
|
||||||
<el-tag class="tag-title">
|
|
||||||
I18n:
|
|
||||||
</el-tag>
|
|
||||||
<el-alert
|
|
||||||
:closable="false"
|
|
||||||
title="You can change the language of the admin system to see the effect"
|
|
||||||
type="success"
|
|
||||||
/>
|
|
||||||
<markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
|
|
||||||
Get HTML
|
|
||||||
</el-button>
|
|
||||||
<div v-html="html" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import MarkdownEditor from '@/components/MarkdownEditor'
|
|
||||||
|
|
||||||
const content = `
|
|
||||||
**This is test**
|
|
||||||
|
|
||||||
* vue
|
|
||||||
* element
|
|
||||||
* webpack
|
|
||||||
|
|
||||||
`
|
|
||||||
export default {
|
|
||||||
name: 'MarkdownDemo',
|
|
||||||
components: { MarkdownEditor },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
content1: content,
|
|
||||||
content2: content,
|
|
||||||
content3: content,
|
|
||||||
content4: content,
|
|
||||||
html: '',
|
|
||||||
languageTypeList: {
|
|
||||||
'en': 'en_US',
|
|
||||||
'zh': 'zh_CN',
|
|
||||||
'es': 'es_ES'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
language() {
|
|
||||||
return this.languageTypeList['en']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getHtml() {
|
|
||||||
this.html = this.$refs.markdownEditor.getHtml()
|
|
||||||
console.log(this.html)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.editor-container{
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.tag-title{
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue