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> </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 }"> <div class="sidebar" :class="{ 'active': isSidebarOpen }">
<!-- 侧边栏内容 --> <!-- 侧边栏内容 -->
<el-menu default-active="1" class="el-menu-vertical-demo sidebar-menu"> <el-menu default-active="1" class="el-menu-vertical-demo sidebar-menu">
@ -31,17 +32,25 @@
<el-form-item label="字体颜色:"> <el-form-item label="字体颜色:">
<el-col :span="10"> <el-col :span="10">
<el-select v-model="formData.color" @change="updatePreview"> <el-select v-model="formData.color" @change="updatePreview">
<el-option label="黑色" value="black" style="background-color: black;">黑色</el-option> <el-option label="黑色" value="black"
<el-option label="红色" value="red" style="background-color: red;">红色</el-option> style="background-color: black;">黑色</el-option>
<el-option label="蓝色" value="blue" style="background-color: blue;">蓝色</el-option> <el-option label="红色" value="red"
<el-option label="绿色" value="green" style="background-color: green;">绿色</el-option> style="background-color: red;">红色</el-option>
<el-option label="黄色" value="yellow" style="background-color: yellow;">黄色</el-option> <el-option label="蓝色" value="blue"
<el-option label="紫色" value="purple" style="background-color: purple;">紫色</el-option> style="background-color: blue;">蓝色</el-option>
<el-option label="橙色" value="orange" style="background-color: orange">橙色</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-select>
</el-col> </el-col>
<el-col :span="8"> <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-col>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -51,14 +60,17 @@
<el-col :span="12"> <el-col :span="12">
<el-select v-model="formData.fontSize" @change="updatePreview"> <el-select v-model="formData.fontSize" @change="updatePreview">
<el-option value="">请选择</el-option> <el-option value="">请选择</el-option>
<el-option value="12px">12px</el-option> <el-option value="12px" style="font-size: 12px;">12px</el-option>
<el-option value="14px">14px</el-option> <el-option value="14px" style="font-size: 14px;">14px</el-option>
<el-option value="16px">16px</el-option> <el-option value="16px" style="font-size: 16px;">16px</el-option>
<el-option value="18px">18px</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-select>
</el-col> </el-col>
<el-col :span="12"> <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-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -70,35 +82,43 @@
<el-select v-model="formData.fontFamily" @change="updatePreview"> <el-select v-model="formData.fontFamily" @change="updatePreview">
<!--英文字体--> <!--英文字体-->
<el-option value="">请选择</el-option> <el-option value="">请选择</el-option>
<el-option value="Arial">Arial</el-option> <el-option value="Arial" style="font-family: Arial;">Arial</el-option>
<el-option value="Courier New">Courier New</el-option> <el-option value="Courier New" style="font-family: 'Courier New';">Courier
<el-option value="Georgia">Georgia</el-option> New</el-option>
<el-option value="Helvetica">Helvetica</el-option> <el-option value="Georgia" style="font-family: Georgia;">Georgia</el-option>
<el-option value="Times New Roman">Times New Roman</el-option> <el-option value="Helvetica"
<el-option value="serif">serif</el-option> style="font-family: Helvetica;">Helvetica</el-option>
<el-option value="sans-serif">sans-serif</el-option> <el-option value="Times New Roman"
<el-option value="monospace">monospace</el-option> style="font-family: 'Times New Roman';">Times New Roman</el-option>
<el-option value="cursive">cursive</el-option> <el-option value="serif" style="font-family: serif;">serif</el-option>
<el-option value="fantasy">fantasy</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="SimSun" style="font-family: SimSun;">宋体</el-option>
<el-option value="SimHei">黑体</el-option> <el-option value="SimHei" style="font-family: SimHei;">黑体</el-option>
<el-option value="Microsoft YaHei">微软雅黑</el-option> <el-option value="Microsoft YaHei"
<el-option value="FangSong">仿宋</el-option> style="font-family: 'Microsoft YaHei';">微软雅黑</el-option>
<el-option value="KaiTi">楷体</el-option> <el-option value="FangSong" style="font-family: FangSong;">仿宋</el-option>
<el-option value="LiSu">隶书</el-option> <el-option value="KaiTi" style="font-family: KaiTi;">楷体</el-option>
<el-option value="YouYuan">幼圆</el-option> <el-option value="LiSu" style="font-family: LiSu;">隶书</el-option>
<el-option value="STSong">华文宋体</el-option> <el-option value="YouYuan" style="font-family: YouYuan;">幼圆</el-option>
<el-option value="STHeiti">华文黑体</el-option> <el-option value="STSong" style="font-family: STSong;">华文宋体</el-option>
<el-option value="STKaiti">华文楷体</el-option> <el-option value="STHeiti" style="font-family: STHeiti;">华文黑体</el-option>
<el-option value="STFangsong">华文仿宋</el-option> <el-option value="STKaiti" style="font-family: STKaiti;">华文楷体</el-option>
<el-option value="STXihei">华文细黑</el-option> <el-option value="STFangsong"
<el-option value="STCaiyun">华文彩云</el-option> style="font-family: STFangsong;">华文仿宋</el-option>
<el-option value="STHupo">华文琥珀</el-option> <el-option value="STXihei" style="font-family: STXihei;">华文细黑</el-option>
<el-option value="STXinwei">华文新魏</el-option> <el-option value="STCaiyun" style="font-family: STCaiyun;">华文彩云</el-option>
<el-option value="STXingkai">华文行楷</el-option> <el-option value="STHupo" style="font-family: STHupo;">华文琥珀</el-option>
<el-option value="FZShuTi">方正舒体</el-option> <el-option value="STXinwei" style="font-family: STXinwei;">华文新魏</el-option>
<el-option value="FZYaoti">方正姚体</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-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -106,8 +126,8 @@
<el-form-item label="字体样式:"> <el-form-item label="字体样式:">
<el-select v-model="formData.fontStyle" @change="updatePreview"> <el-select v-model="formData.fontStyle" @change="updatePreview">
<el-option value="">请选择</el-option> <el-option value="">请选择</el-option>
<el-option value="normal">正常</el-option> <el-option value="normal" style="font-style: normal;">正常</el-option>
<el-option value="italic">斜体</el-option> <el-option value="italic" style="font-style: italic;">斜体</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -115,10 +135,10 @@
<el-form-item label="字体粗细:"> <el-form-item label="字体粗细:">
<el-select v-model="formData.fontWeight" @change="updatePreview"> <el-select v-model="formData.fontWeight" @change="updatePreview">
<el-option value="">请选择</el-option> <el-option value="">请选择</el-option>
<el-option value="normal">正常</el-option> <el-option value="normal" style="font-weight: normal;">正常</el-option>
<el-option value="bold">加粗</el-option> <el-option value="bold" style="font-weight: bold;">加粗</el-option>
<el-option value="bolder">更粗</el-option> <el-option value="bolder" style="font-weight: bolder;">更粗</el-option>
<el-option value="lighter">更细</el-option> <el-option value="lighter" style="font-weight: lighter;">更细</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -149,13 +169,21 @@
<el-form-item label="字体阴影:"> <el-form-item label="字体阴影:">
<el-select v-model="formData.textShadow" @change="updatePreview"> <el-select v-model="formData.textShadow" @change="updatePreview">
<el-option value="">请选择</el-option> <el-option value="">请选择</el-option>
<el-option value="2px 2px 4px rgba(0,0,0,0.5)">阴影1</el-option> <el-option value="2px 2px 4px rgba(0,0,0,0.5)"
<el-option value="4px 4px 8px rgba(0,0,0,0.5)">阴影2</el-option> style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">阴影1</el-option>
<el-option value="6px 6px 12px rgba(0,0,0,0.5)">阴影3</el-option> <el-option value="4px 4px 8px rgba(0,0,0,0.5)"
<el-option value="-1px -1px 1px #aaa">阴影4</el-option> style="text-shadow: 4px 4px 8px rgba(0,0,0,0.5);">阴影2</el-option>
<el-option value="0px 4px 1px rgba(0, 0, 0, 0.5)">阴影5</el-option> <el-option value="6px 6px 12px rgba(0,0,0,0.5)"
<el-option value="4px 4px 5px rgba(0, 0, 0, 0.7)">阴影6</el-option> style="text-shadow: 6px 6px 12px rgba(0,0,0,0.5);">阴影3</el-option>
<el-option value="0px 0px 7px rgba(0, 0, 0, 0.4)">阴影7</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-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -201,7 +229,8 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </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> </el-form>
<div class="preview mt-3 p-3 border rounded" :style="previewStyle"> <div class="preview mt-3 p-3 border rounded" :style="previewStyle">
Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345
@ -211,7 +240,8 @@
<!-- AI对话框 --> <!-- AI对话框 -->
<div class="chat-box border rounded p-3"> <div class="chat-box border rounded p-3">
<p v-for="message in messages" :key="message.id" class="mb-1">{{ message.text }}</p> <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> </div>
</div> </div>
@ -297,7 +327,8 @@ import {
import translations from 'ckeditor5/translations/zh-cn.js'; import translations from 'ckeditor5/translations/zh-cn.js';
import 'ckeditor5/ckeditor5.css'; import 'ckeditor5/ckeditor5.css';
import { ElButton, ElInput, ElSelect, ElOption, ElForm, ElFormItem, ElMenu, ElMenuItem, ElColorPicker } from 'element-plus'; 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' import { Export2PDF, Export2Word, ToggleSideBar, Translation } from './components/plugins'
export default { export default {
@ -335,7 +366,7 @@ export default {
// 获取用户的样式配置 // 获取用户的样式配置
const userConfig = getUserConfigFromBackend(); const userConfig = getUserConfigFromBackend();
// 获取用户定义的样式并应用 // 获取用户定义的样式并应用
getAndApplyUserStyles(); // getAndApplyUserStyles();
this.config = { this.config = {
toolbar: { toolbar: {
items: [ items: [
@ -609,8 +640,21 @@ export default {
selectedStyles[key] = this.formData[key]; 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() { updatePreview() {

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

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

Write Preview
Loading…
Cancel
Save