删除markdown
This commit is contained in:
HuskyOo
parent
2cc03a030d
commit
3f8b911945
|
|
@ -142,12 +142,12 @@ const asyncRoutes = [
|
|||
name: 'TinymceDemo',
|
||||
meta: { title: 'Tinymce' }
|
||||
},
|
||||
{
|
||||
path: 'markdown',
|
||||
component: 'views/components-demo/markdown',
|
||||
name: 'MarkdownDemo',
|
||||
meta: { title: 'Markdown' }
|
||||
},
|
||||
// {
|
||||
// path: 'markdown',
|
||||
// component: 'views/components-demo/markdown',
|
||||
// name: 'MarkdownDemo',
|
||||
// meta: { title: 'Markdown' }
|
||||
// },
|
||||
{
|
||||
path: 'json-editor',
|
||||
component: 'views/components-demo/json-editor',
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@
|
|||
"screenfull": "4.2.0",
|
||||
"script-loader": "0.7.2",
|
||||
"sortablejs": "1.8.4",
|
||||
"tui-editor": "1.3.3",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"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',
|
||||
meta: { title: 'Tinymce' }
|
||||
},
|
||||
{
|
||||
path: 'markdown',
|
||||
component: () => import('@/views/components-demo/markdown'),
|
||||
name: 'MarkdownDemo',
|
||||
meta: { title: 'Markdown' }
|
||||
},
|
||||
// {
|
||||
// path: 'markdown',
|
||||
// component: () => import('@/views/components-demo/markdown'),
|
||||
// name: 'MarkdownDemo',
|
||||
// meta: { title: 'Markdown' }
|
||||
// },
|
||||
{
|
||||
path: '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