|
|
// utils.js
|
|
|
|
|
|
// 获取用户配置
|
|
|
export function getUserConfigFromBackend() {
|
|
|
// TODO 请求用户配置
|
|
|
const options = {};
|
|
|
// 字体、字号、样式
|
|
|
// TODO
|
|
|
const {
|
|
|
fontFamilyOptions = [
|
|
|
'default',
|
|
|
'宋体',
|
|
|
'新宋体',
|
|
|
'仿宋',
|
|
|
'楷体',
|
|
|
'微软雅黑',
|
|
|
'黑体',
|
|
|
'华文仿宋',
|
|
|
'华文楷体',
|
|
|
'华文隶书',
|
|
|
'华文宋体',
|
|
|
'华文细黑',
|
|
|
'华文新魏',
|
|
|
'华文行楷',
|
|
|
'华文中宋',
|
|
|
'隶书',
|
|
|
'苹方 常规',
|
|
|
'幼圆',
|
|
|
'Times New Roman'
|
|
|
],
|
|
|
// 五号，小四，四号，小三，三号，小二，二号
|
|
|
fontSizeOptions = [14, 'default', 16,18.6,20, 21.3,24,29.3],
|
|
|
styleDefinitions = [
|
|
|
{
|
|
|
name: 'Article category',
|
|
|
element: 'h3',
|
|
|
classes: ['category']
|
|
|
},
|
|
|
{
|
|
|
name: 'Title',
|
|
|
element: 'h2',
|
|
|
classes: ['document-title']
|
|
|
},
|
|
|
{
|
|
|
name: 'Subtitle',
|
|
|
element: 'h3',
|
|
|
classes: ['document-subtitle']
|
|
|
},
|
|
|
{
|
|
|
name: 'Info box',
|
|
|
element: 'p',
|
|
|
classes: ['info-box']
|
|
|
},
|
|
|
{
|
|
|
name: 'Side quote',
|
|
|
element: 'blockquote',
|
|
|
classes: ['side-quote']
|
|
|
},
|
|
|
{
|
|
|
name: 'Marker',
|
|
|
element: 'span',
|
|
|
classes: ['marker']
|
|
|
},
|
|
|
{
|
|
|
name: 'Spoiler',
|
|
|
element: 'span',
|
|
|
classes: ['spoiler']
|
|
|
},
|
|
|
{
|
|
|
name: 'Code (dark)',
|
|
|
element: 'pre',
|
|
|
classes: ['fancy-code', 'fancy-code-dark']
|
|
|
},
|
|
|
{
|
|
|
name: 'Code (bright)',
|
|
|
element: 'pre',
|
|
|
classes: ['fancy-code', 'fancy-code-bright']
|
|
|
},
|
|
|
{
|
|
|
name: 'GradientBorder',
|
|
|
element: 'p',
|
|
|
classes: ['gradientborder']
|
|
|
}
|
|
|
]
|
|
|
} = options;
|
|
|
// 如果传入的options没有对应项，使用默认值
|
|
|
return {
|
|
|
fontFamily: {
|
|
|
options: fontFamilyOptions
|
|
|
},
|
|
|
fontSize: {
|
|
|
options: fontSizeOptions
|
|
|
},
|
|
|
style: {
|
|
|
definitions: styleDefinitions
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
|
|
|
// 实现自动保存saveData方法，将编辑内容发送至后端
|
|
|
export function saveData(data) {
|
|
|
// return new Promise( resolve => {
|
|
|
// setTimeout( () => {
|
|
|
// console.log( 'Saved', data );
|
|
|
|
|
|
// resolve();
|
|
|
// }, HTTP_SERVER_LAG );
|
|
|
// } );
|
|
|
console.log(data);
|
|
|
}
|
|
|
|
|
|
|
|
|
// 将当前页面的样式转为内联
|
|
|
export function getStyle() {
|
|
|
let str = '<head><meta charset="utf-8"></meta>';
|
|
|
const styles = document.querySelectorAll('style');
|
|
|
for (let i = 0; i < styles.length; i++) {
|
|
|
str += styles[i].outerHTML;
|
|
|
}
|
|
|
str += "<style>.results{width:100%!important;} .result .title{width:100%;}</style>";
|
|
|
str += "<style>table{border-collapse: collapse;table-layout: fixed}</style>"
|
|
|
// str += "<style>table thead tr{ background-color: #f3f4f9;}</style>"
|
|
|
str += "<style>table td,th{ font-size: 14px;padding: 1px 1px;border-width: 1px;border-style: solid;border-color: #d0d0d0;word-break: keep-all;white-space: nowrap;}</style>"
|
|
|
return str;
|
|
|
}
|
|
|
|
|
|
// 获取用户编辑的内容 <html>
|
|
|
export function getPageContent() {
|
|
|
// const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners > div.ck.ck-editor__main > div");
|
|
|
const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div");
|
|
|
return pageContent.innerHTML;
|
|
|
}
|
|
|
|
|
|
// 获取并应用用户定义的样式
|
|
|
export function getAndApplyUserStyles() {
|
|
|
// 模拟从后端获取用户定义的样式
|
|
|
const response = fetch('/api/user-styles');
|
|
|
const styles = response.json();
|
|
|
const styleElement = document.createElement('style');
|
|
|
styleElement.innerHTML = styles;
|
|
|
document.head.appendChild(styleElement);
|
|
|
return styles;
|
|
|
} |
