peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 vditor 组件 cdn 切换

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/common/comment/main.vue
View File

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

8
config/api.config.js
View File

@ -7,7 +7,9 @@ const apisMap = {
CDN: '', CDN: '',
PROXY: '/proxy', PROXY: '/proxy',
SOCKET: 'http://localhost:3000/ws', 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: { production: {
FE: 'https://rymcu.com', FE: 'https://rymcu.com',
@ -15,7 +17,9 @@ const apisMap = {
CDN: 'https://static.rymcu.com', CDN: 'https://static.rymcu.com',
PROXY: 'https://static.rymcu.com/proxy', PROXY: 'https://static.rymcu.com/proxy',
SOCKET: 'https://rymcu.com/wss', 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'
} }
} }

5
pages/admin/tag/post/_tag_id.vue
View File

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

5
pages/admin/topic/post/_topic_id.vue
View File

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

21
pages/article/_article_id.vue
View File

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

5
pages/article/post/_article_id.vue
View File

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

5
pages/chats/_account.vue
View File

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

18
pages/draft/_draft_id.vue
View File

@ -143,15 +143,19 @@
// //const outLineElement = document.getElementById("articleToC"); // //const outLineElement = document.getElementById("articleToC");
// VditorPreview.setContentTheme('light'); // VditorPreview.setContentTheme('light');
Vue.VditorPreview.codeRender(previewElement, 'zh_CN'); 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, { 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.mermaidRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.graphvizRender(previewElement); Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.chartRender(previewElement); Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mindmapRender(previewElement); Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.abcRender(previewElement); Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
Vue.VditorPreview.mediaRender(previewElement); Vue.VditorPreview.mediaRender(previewElement);
Vue.VditorPreview.lazyLoadImageRender(previewElement); Vue.VditorPreview.lazyLoadImageRender(previewElement);
//VditorPreview.outlineRender(previewElement, outLineElement); //VditorPreview.outlineRender(previewElement, outLineElement);

5
pages/guides/markdown.vue
View File

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

5
pages/guides/vditor.vue
View File

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

5
pages/portfolio/post/_portfolio_id.vue
View File

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