🎨 vditor 组件 cdn 切换

This commit is contained in:
ronger 2022-05-24 11:07:05 +08:00
parent be4e4f17c6
commit 17de6259ef
11 changed files with 81 additions and 24 deletions

View File

@ -135,6 +135,7 @@
<script>
import Vue from 'vue';
import {mapState} from 'vuex';
import apiConfig from '~/config/api.config';
export default {
name: "Comment",
@ -249,6 +250,7 @@ export default {
toolbar,
mode: 'ir',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: this.postId ? false : true,
id: this.postId ? this.postId : '',
@ -277,6 +279,9 @@ export default {
}
// LazyLoadImage();
// Vue.Vditor.highlightRender({style:'github'}, element, document);
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
upload: {
@ -403,15 +408,19 @@ export default {
for (let i in previewElements) {
const previewElement = previewElements[i];
Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
Vue.VditorPreview.highlightRender({"enable": true, "lineNumber": true, "style": "github"}, previewElement);
Vue.VditorPreview.highlightRender({
"enable": true,
"lineNumber": true,
"style": "github"
}, previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mathRender(previewElement, {
math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}},
math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
});
Vue.VditorPreview.mermaidRender(previewElement);
Vue.VditorPreview.graphvizRender(previewElement);
Vue.VditorPreview.chartRender(previewElement);
Vue.VditorPreview.mindmapRender(previewElement);
Vue.VditorPreview.abcRender(previewElement);
Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mediaRender(previewElement);
Vue.VditorPreview.lazyLoadImageRender(previewElement);
//VditorPreview.outlineRender(previewElement, outLineElement);

View File

@ -7,7 +7,9 @@ const apisMap = {
CDN: '',
PROXY: '/proxy',
SOCKET: 'http://localhost:3000/ws',
GRAVATAR: '/proxy/static.rymcu.com/avatar'
GRAVATAR: '/proxy/static.rymcu.com/avatar',
VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
},
production: {
FE: 'https://rymcu.com',
@ -15,7 +17,9 @@ const apisMap = {
CDN: 'https://static.rymcu.com',
PROXY: 'https://static.rymcu.com/proxy',
SOCKET: 'https://rymcu.com/wss',
GRAVATAR: 'https://static.rymcu.com/avatar'
GRAVATAR: 'https://static.rymcu.com/avatar',
VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
}
}

View File

@ -122,6 +122,7 @@ import Vue from "vue";
import {mapState} from 'vuex';
import VueCropper from "vue-cropperjs";
import 'cropperjs/dist/cropper.css';
import apiConfig from '~/config/api.config';
export default {
name: "PostTag",
@ -208,6 +209,7 @@ export default {
toolbar,
mode: 'sv',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: this.$route.params.tag_id ? false : true,
id: this.$route.params.tag_id ? this.$route.params.tag_id : '',
@ -239,6 +241,9 @@ export default {
}
// LazyLoadImage();
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
height: data.height,

View File

@ -120,6 +120,7 @@ import Vue from 'vue';
import {mapState} from 'vuex';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import apiConfig from '~/config/api.config';
export default {
name: "adminTopicPost",
@ -210,6 +211,7 @@ export default {
toolbar,
mode: 'sv',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: this.$route.params.topic_id ? false : true,
id: this.$route.params.topic_id ? this.$route.params.topic_id : '',
@ -241,6 +243,9 @@ export default {
}
// LazyLoadImage();
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
height: data.height,

View File

@ -167,6 +167,7 @@ import PortfoliosWidget from '~/components/widget/portfolios';
import EditTags from '~/components/widget/tags';
import 'vditor/dist/css/content-theme/light.css';
import {buymeacoffee} from "simple-icons"
import apiConfig from '~/config/api.config';
export default {
name: "ArticleDetail",
@ -408,15 +409,19 @@ export default {
// //const outLineElement = document.getElementById("articleToC");
// VditorPreview.setContentTheme('light');
Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
Vue.VditorPreview.highlightRender({"enable": true, "lineNumber": true, "style": "github"}, previewElement);
Vue.VditorPreview.highlightRender({
"enable": true,
"lineNumber": true,
"style": "github"
}, previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mathRender(previewElement, {
math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}},
math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
});
Vue.VditorPreview.mermaidRender(previewElement);
Vue.VditorPreview.graphvizRender(previewElement);
Vue.VditorPreview.chartRender(previewElement);
Vue.VditorPreview.mindmapRender(previewElement);
Vue.VditorPreview.abcRender(previewElement);
Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mediaRender(previewElement);
Vue.VditorPreview.lazyLoadImageRender(previewElement);
//VditorPreview.outlineRender(previewElement, outLineElement);
@ -433,7 +438,7 @@ export default {
</script>
<style lang="less">
@import "~vditor/src/assets/less/index.less";
@import "~vditor/src/assets/less/index.less";
.article__wrapper {
max-width: 980px;

View File

@ -59,6 +59,7 @@
<script>
import Vue from 'vue';
import {mapState} from 'vuex';
import apiConfig from '~/config/api.config';
export default {
name: "PostArticle",
@ -160,6 +161,7 @@
toolbar,
mode: 'sv',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: this.$route.params.article_id ? false : true,
id: this.$route.params.article_id ? this.$route.params.article_id : '',
@ -192,6 +194,9 @@
}
// LazyLoadImage();
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
upload: {

View File

@ -39,6 +39,7 @@
import Vue from 'vue';
import {mapState} from 'vuex';
import sockClient from '~/plugins/sockjs';
import apiConfig from '~/config/api.config';
export default {
name: "Chat",
@ -115,6 +116,7 @@ export default {
toolbar,
mode: 'sv',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: this.postId ? false : true,
id: this.postId ? this.postId : '',
@ -135,6 +137,9 @@ export default {
}
// LazyLoadImage();
// Vue.Vditor.highlightRender({style:'github'}, element, document);
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
upload: {

View File

@ -143,15 +143,19 @@
// //const outLineElement = document.getElementById("articleToC");
// VditorPreview.setContentTheme('light');
Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
Vue.VditorPreview.highlightRender({"enable": true, "lineNumber": false, "style": "github"}, previewElement);
Vue.VditorPreview.highlightRender({
"enable": true,
"lineNumber": true,
"style": "github"
}, previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mathRender(previewElement, {
math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}},
math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
});
Vue.VditorPreview.mermaidRender(previewElement, ".language-mermaid");
Vue.VditorPreview.graphvizRender(previewElement);
Vue.VditorPreview.chartRender(previewElement);
Vue.VditorPreview.mindmapRender(previewElement);
Vue.VditorPreview.abcRender(previewElement);
Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mediaRender(previewElement);
Vue.VditorPreview.lazyLoadImageRender(previewElement);
//VditorPreview.outlineRender(previewElement, outLineElement);

View File

@ -12,6 +12,7 @@
<script>
import Vue from 'vue';
import markdownGuide from 'static/guides/markdown.txt';
import apiConfig from '~/config/api.config';
export default {
name: "markdown",
@ -61,6 +62,7 @@ export default {
toolbar,
mode: 'wysiwyg',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: false
},
@ -89,6 +91,9 @@ export default {
if (element.style.display === 'none') {
return
}
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
height: data.height,

View File

@ -11,6 +11,7 @@
<script>
import Vue from 'vue';
import apiConfig from '~/config/api.config';
export default {
name: "vditor",
@ -60,6 +61,7 @@ export default {
toolbar,
mode: 'wysiwyg',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: false
},
@ -88,6 +90,9 @@ export default {
if (element.style.display === 'none') {
return
}
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
height: data.height,

View File

@ -99,6 +99,7 @@ import Vue from 'vue';
import {mapState} from 'vuex';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import apiConfig from '~/config/api.config';
export default {
name: "PortfolioPost",
@ -215,6 +216,7 @@ export default {
toolbar,
mode: 'sv',
tab: '\t',
cdn: apiConfig.VDITOR,
cache: {
enable: this.$route.params.article_id ? false : true,
id: this.$route.params.article_id ? this.$route.params.article_id : '',
@ -241,6 +243,9 @@ export default {
}
// LazyLoadImage();
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
},
theme: {
cdn: apiConfig.VDITOR_CSS
}
},
height: data.height,