px7sihb6k
/
coeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复手动定义样式的小问题，美化一下

Browse Source
master
joefalmko 9 months ago
parent 11a27eec33
commit 314a042f0c
3 changed files with 302 additions and 243 deletions
Show Stats Download Patch File Download Diff File

15
ckeditor5/public/style.css
Unescape View File

@ -329,3 +329,18 @@
}
}
}
.ck-content p.add_style_test {
font-family: SimHei;
color: green;
font-size: 19px;
font-style: italic;
font-weight: bold;
text-transform: full-width;
text-decoration: underline;
text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 2.0;
letter-spacing: 2px;
word-spacing: 2px;
}

166
ckeditor5/src/App.vue
Unescape View File

@ -13,7 +13,8 @@
</div>
</div>
</div>
<el-button type="primary" @click="toggleSidebar()" style="display:none" id="toggleSidebarButton">打开/关闭侧边栏</el-button>
<el-button type="primary" @click="toggleSidebar()" style="display:none"
id="toggleSidebarButton">打开/关闭侧边栏</el-button>
<div class="sidebar" :class="{ 'active': isSidebarOpen }">
<!-- 侧边栏内容 -->
<el-menu default-active="1" class="el-menu-vertical-demo sidebar-menu">
@ -31,17 +32,25 @@
<el-form-item label="字体颜色:">
<el-col :span="10">
<el-select v-model="formData.color" @change="updatePreview">
<el-option label="黑色" value="black" style="background-color: black;">黑色</el-option>
<el-option label="红色" value="red" style="background-color: red;">红色</el-option>
<el-option label="蓝色" value="blue" style="background-color: blue;">蓝色</el-option>
<el-option label="绿色" value="green" style="background-color: green;">绿色</el-option>
<el-option label="黄色" value="yellow" style="background-color: yellow;">黄色</el-option>
<el-option label="紫色" value="purple" style="background-color: purple;">紫色</el-option>
<el-option label="橙色" value="orange" style="background-color: orange">橙色</el-option>
<el-option label="黑色" value="black"
style="background-color: black;">黑色</el-option>
<el-option label="红色" value="red"
style="background-color: red;">红色</el-option>
<el-option label="蓝色" value="blue"
style="background-color: blue;">蓝色</el-option>
<el-option label="绿色" value="green"
style="background-color: green;">绿色</el-option>
<el-option label="黄色" value="yellow"
style="background-color: yellow;">黄色</el-option>
<el-option label="紫色" value="purple"
style="background-color: purple;">紫色</el-option>
<el-option label="橙色" value="orange"
style="background-color: orange">橙色</el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-color-picker v-model="formData.color" @change="updatePreview"></el-color-picker>
<el-color-picker v-model="formData.color"
@change="updatePreview"></el-color-picker>
</el-col>
</el-form-item>
</el-col>
@ -51,14 +60,17 @@
<el-col :span="12">
<el-select v-model="formData.fontSize" @change="updatePreview">
<el-option value="">请选择</el-option>
<el-option value="12px">12px</el-option>
<el-option value="14px">14px</el-option>
<el-option value="16px">16px</el-option>
<el-option value="18px">18px</el-option>
<el-option value="12px" style="font-size: 12px;">12px</el-option>
<el-option value="14px" style="font-size: 14px;">14px</el-option>
<el-option value="16px" style="font-size: 16px;">16px</el-option>
<el-option value="18px" style="font-size: 18px;">18px</el-option>
<el-option value="20px" style="font-size: 20px;">16px</el-option>
<el-option value="22px" style="font-size: 22px;">18px</el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input v-model="formData.fontSize" placeholder="例如: 16px" @input="updatePreview"></el-input>
<el-input v-model="formData.fontSize" placeholder="例如: 16px"
@input="updatePreview"></el-input>
</el-col>
</el-row>
</el-form-item>
@ -70,35 +82,43 @@
<el-select v-model="formData.fontFamily" @change="updatePreview">
<!--英文字体-->
<el-option value="">请选择</el-option>
<el-option value="Arial">Arial</el-option>
<el-option value="Courier New">Courier New</el-option>
<el-option value="Georgia">Georgia</el-option>
<el-option value="Helvetica">Helvetica</el-option>
<el-option value="Times New Roman">Times New Roman</el-option>
<el-option value="serif">serif</el-option>
<el-option value="sans-serif">sans-serif</el-option>
<el-option value="monospace">monospace</el-option>
<el-option value="cursive">cursive</el-option>
<el-option value="fantasy">fantasy</el-option>
<el-option value="Arial" style="font-family: Arial;">Arial</el-option>
<el-option value="Courier New" style="font-family: 'Courier New';">Courier
New</el-option>
<el-option value="Georgia" style="font-family: Georgia;">Georgia</el-option>
<el-option value="Helvetica"
style="font-family: Helvetica;">Helvetica</el-option>
<el-option value="Times New Roman"
style="font-family: 'Times New Roman';">Times New Roman</el-option>
<el-option value="serif" style="font-family: serif;">serif</el-option>
<el-option value="sans-serif"
style="font-family: sans-serif;">sans-serif</el-option>
<el-option value="monospace"
style="font-family: monospace;">monospace</el-option>
<el-option value="cursive" style="font-family: cursive;">cursive</el-option>
<el-option value="fantasy" style="font-family: fantasy;">fantasy</el-option>
<!--中文字体字体-->
<el-option value="SimSun">宋体</el-option>
<el-option value="SimHei">黑体</el-option>
<el-option value="Microsoft YaHei">微软雅黑</el-option>
<el-option value="FangSong">仿宋</el-option>
<el-option value="KaiTi">楷体</el-option>
<el-option value="LiSu">隶书</el-option>
<el-option value="YouYuan">幼圆</el-option>
<el-option value="STSong">华文宋体</el-option>
<el-option value="STHeiti">华文黑体</el-option>
<el-option value="STKaiti">华文楷体</el-option>
<el-option value="STFangsong">华文仿宋</el-option>
<el-option value="STXihei">华文细黑</el-option>
<el-option value="STCaiyun">华文彩云</el-option>
<el-option value="STHupo">华文琥珀</el-option>
<el-option value="STXinwei">华文新魏</el-option>
<el-option value="STXingkai">华文行楷</el-option>
<el-option value="FZShuTi">方正舒体</el-option>
<el-option value="FZYaoti">方正姚体</el-option>
<el-option value="SimSun" style="font-family: SimSun;">宋体</el-option>
<el-option value="SimHei" style="font-family: SimHei;">黑体</el-option>
<el-option value="Microsoft YaHei"
style="font-family: 'Microsoft YaHei';">微软雅黑</el-option>
<el-option value="FangSong" style="font-family: FangSong;">仿宋</el-option>
<el-option value="KaiTi" style="font-family: KaiTi;">楷体</el-option>
<el-option value="LiSu" style="font-family: LiSu;">隶书</el-option>
<el-option value="YouYuan" style="font-family: YouYuan;">幼圆</el-option>
<el-option value="STSong" style="font-family: STSong;">华文宋体</el-option>
<el-option value="STHeiti" style="font-family: STHeiti;">华文黑体</el-option>
<el-option value="STKaiti" style="font-family: STKaiti;">华文楷体</el-option>
<el-option value="STFangsong"
style="font-family: STFangsong;">华文仿宋</el-option>
<el-option value="STXihei" style="font-family: STXihei;">华文细黑</el-option>
<el-option value="STCaiyun" style="font-family: STCaiyun;">华文彩云</el-option>
<el-option value="STHupo" style="font-family: STHupo;">华文琥珀</el-option>
<el-option value="STXinwei" style="font-family: STXinwei;">华文新魏</el-option>
<el-option value="STXingkai"
style="font-family: STXingkai;">华文行楷</el-option>
<el-option value="FZShuTi" style="font-family: FZShuTi;">方正舒体</el-option>
<el-option value="FZYaoti" style="font-family: FZYaoti;">方正姚体</el-option>
</el-select>
</el-form-item>
</el-col>
@ -106,8 +126,8 @@
<el-form-item label="字体样式:">
<el-select v-model="formData.fontStyle" @change="updatePreview">
<el-option value="">请选择</el-option>
<el-option value="normal">正常</el-option>
<el-option value="italic">斜体</el-option>
<el-option value="normal" style="font-style: normal;">正常</el-option>
<el-option value="italic" style="font-style: italic;">斜体</el-option>
</el-select>
</el-form-item>
</el-col>
@ -115,10 +135,10 @@
<el-form-item label="字体粗细:">
<el-select v-model="formData.fontWeight" @change="updatePreview">
<el-option value="">请选择</el-option>
<el-option value="normal">正常</el-option>
<el-option value="bold">加粗</el-option>
<el-option value="bolder">更粗</el-option>
<el-option value="lighter">更细</el-option>
<el-option value="normal" style="font-weight: normal;">正常</el-option>
<el-option value="bold" style="font-weight: bold;">加粗</el-option>
<el-option value="bolder" style="font-weight: bolder;">更粗</el-option>
<el-option value="lighter" style="font-weight: lighter;">更细</el-option>
</el-select>
</el-form-item>
</el-col>
@ -149,13 +169,21 @@
<el-form-item label="字体阴影:">
<el-select v-model="formData.textShadow" @change="updatePreview">
<el-option value="">请选择</el-option>
<el-option value="2px 2px 4px rgba(0,0,0,0.5)">阴影1</el-option>
<el-option value="4px 4px 8px rgba(0,0,0,0.5)">阴影2</el-option>
<el-option value="6px 6px 12px rgba(0,0,0,0.5)">阴影3</el-option>
<el-option value="-1px -1px 1px #aaa">阴影4</el-option>
<el-option value="0px 4px 1px rgba(0, 0, 0, 0.5)">阴影5</el-option>
<el-option value="4px 4px 5px rgba(0, 0, 0, 0.7)">阴影6</el-option>
<el-option value="0px 0px 7px rgba(0, 0, 0, 0.4)">阴影7</el-option>
<el-option value="2px 2px 4px rgba(0,0,0,0.5)"
style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">阴影1</el-option>
<el-option value="4px 4px 8px rgba(0,0,0,0.5)"
style="text-shadow: 4px 4px 8px rgba(0,0,0,0.5);">阴影2</el-option>
<el-option value="6px 6px 12px rgba(0,0,0,0.5)"
style="text-shadow: 6px 6px 12px rgba(0,0,0,0.5);">阴影3</el-option>
<el-option value="-1px -1px 1px #aaa"
style="text-shadow: -1px -1px 1px #aaa;">阴影4</el-option>
<el-option value="0px 4px 1px rgba(0, 0, 0, 0.5)"
style="text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.5);">阴影5</el-option>
<el-option value="4px 4px 5px rgba(0, 0, 0, 0.7)"
style="text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.7);">阴影6</el-option>
<el-option value="0px 0px 7px rgba(0, 0, 0, 0.4)"
style="text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);">阴影7</el-option>
</el-select>
</el-form-item>
</el-col>
@ -201,7 +229,8 @@
</el-form-item>
</el-col>
</el-row>
<el-form-item><el-button type="success" native-type="submit" class="w-100">提交</el-button></el-form-item>
<el-form-item><el-button type="success" native-type="submit"
class="w-100">提交</el-button></el-form-item>
</el-form>
<div class="preview mt-3 p-3 border rounded" :style="previewStyle">
Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345
@ -211,7 +240,8 @@
<!-- AI对话框 -->
<div class="chat-box border rounded p-3">
<p v-for="message in messages" :key="message.id" class="mb-1">{{ message.text }}</p>
<el-input v-model="aiInput" @keyup.enter="sendMessageToAI" placeholder="请输入消息" class="w-100"></el-input>
<el-input v-model="aiInput" @keyup.enter="sendMessageToAI" placeholder="请输入消息"
class="w-100"></el-input>
</div>
</div>
</div>
@ -297,7 +327,8 @@ import {
import translations from 'ckeditor5/translations/zh-cn.js';
import 'ckeditor5/ckeditor5.css';
import { ElButton, ElInput, ElSelect, ElOption, ElForm, ElFormItem, ElMenu, ElMenuItem, ElColorPicker } from 'element-plus';
import {getUserConfigFromBackend,saveData,getPageContent,getAndApplyUserStyles} from './components/utils';
// import {getUserConfigFromBackend,saveData,getPageContent,getAndApplyUserStyles} from './components/utils';
import { getUserConfigFromBackend, saveData, getPageContent } from './components/utils';
import { Export2PDF, Export2Word, ToggleSideBar, Translation } from './components/plugins'
export default {
@ -335,7 +366,7 @@ export default {
// 获取用户的样式配置
const userConfig = getUserConfigFromBackend();
// 获取用户定义的样式并应用
getAndApplyUserStyles();
// getAndApplyUserStyles();
this.config = {
toolbar: {
items: [
@ -609,8 +640,21 @@ export default {
selectedStyles[key] = this.formData[key];
}
}
console.log(selectedStyles); // 这里可以将selectedStyles发送到后端或其他处理逻辑
alert(JSON.stringify(selectedStyles, null, 2));
const className = prompt("请输入类名：");
if (className) {
let cssClass = `.ck-content p.${className} {\n`;
for (const key in selectedStyles) {
const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
cssClass += ` ${cssKey}: ${selectedStyles[key]};\n`;
}
cssClass += `}`;
console.log(cssClass); // 这里可以将cssClass发送到后端或其他处理逻辑
alert(cssClass);
} else {
alert("类名不能为空！");
}
},
// 更新预览
updatePreview() {

8
ckeditor5/src/components/utils.js
Unescape View File

@ -1,7 +1,7 @@
// utils.js
// 获取用户配置
export async function getUserConfigFromBackend() {
export function getUserConfigFromBackend() {
// TODO 请求用户配置
const options = {};
// 字体、字号、样式
@ -138,10 +138,10 @@ export function getPageContent() {
}
// 获取并应用用户定义的样式
export async function getAndApplyUserStyles() {
export function getAndApplyUserStyles() {
// 模拟从后端获取用户定义的样式
const response = await fetch('/api/user-styles');
const styles = await response.json();
const response = fetch('/api/user-styles');
const styles = response.json();
const styleElement = document.createElement('style');
styleElement.innerHTML = styles;
document.head.appendChild(styleElement);

Write Preview
Loading…
Cancel
Save