diff --git a/src/Cherry.config.js b/src/Cherry.config.js index 0ce1cef2..cc8740ac 100644 --- a/src/Cherry.config.js +++ b/src/Cherry.config.js @@ -389,6 +389,8 @@ const defaultConfig = { { className: 'violet', label: '淡雅' }, { className: 'blue', label: '清幽' }, ], + // 定义主题的作用范围,相同themeNameSpace的实例共享主题配置 + themeNameSpace: 'cherry', // 预览页面不需要绑定事件 isPreviewOnly: false, // 预览区域跟随编辑器光标自动滚动 diff --git a/src/Cherry.js b/src/Cherry.js index d40e6da3..9c6e77a6 100644 --- a/src/Cherry.js +++ b/src/Cherry.js @@ -560,7 +560,7 @@ export default class Cherry extends CherryStatic { 'cherry-previewer cherry-markdown', className || '', autonumberClass, - getThemeFromLocal(true), + getThemeFromLocal(true, this.options.themeNameSpace), ].join(' '); if (dom) { previewer = dom; diff --git a/src/utils/config.js b/src/utils/config.js index 5cda94e4..5b7380c6 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -62,9 +62,9 @@ export function getIsClassicBrFromLocal() { * 保存当前主题 * @param {string} theme */ -function saveThemeToLocal(theme) { +function saveThemeToLocal(nameSpace, theme) { if (typeof localStorage !== 'undefined') { - localStorage.setItem('cherry-theme', theme); + localStorage.setItem(`${nameSpace}-theme`, theme); } } @@ -72,10 +72,10 @@ function saveThemeToLocal(theme) { * 获取当前主题 * @returns {string} 主题名 */ -export function getThemeFromLocal(fullClass = false) { +export function getThemeFromLocal(fullClass = false, nameSpace = 'cherry') { let ret = 'default'; if (typeof localStorage !== 'undefined') { - const localTheme = localStorage.getItem('cherry-theme'); + const localTheme = localStorage.getItem(`${nameSpace}-theme`); if (localTheme) { ret = localTheme; } @@ -89,10 +89,11 @@ export function getThemeFromLocal(fullClass = false) { * @param {string} theme 如果没有传theme,则从本地缓存里取 */ export function changeTheme($cherry, theme = '') { - const newTheme = (theme ? theme : getThemeFromLocal()).replace(/^.*theme__/, ''); + const themeNameSpace = $cherry.options.themeNameSpace || 'cherry'; + const newTheme = (theme ? theme : getThemeFromLocal(false, themeNameSpace)).replace(/^.*theme__/, ''); const newClass = ` theme__${newTheme}`; $cherry.wrapperDom.className = $cherry.wrapperDom.className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass; $cherry.previewer.getDomContainer().className = $cherry.previewer.getDomContainer().className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass; - saveThemeToLocal(newTheme); + saveThemeToLocal(themeNameSpace, newTheme); } diff --git a/types/cherry.d.ts b/types/cherry.d.ts index 4a6e5edb..12fb81f8 100644 --- a/types/cherry.d.ts +++ b/types/cherry.d.ts @@ -31,6 +31,8 @@ export interface CherryOptions { }; /** 有哪些主题 */ theme: {className: string, label: string}[]; + /** 定义主题的作用范围,相同themeNameSpace的实例共享主题配置 */ + themeNameSpace: string, callback: { /** 编辑器内容改变并完成渲染后触发 */ afterChange: CherryLifecycle;