@ -13,7 +13,8 @@
< / div >
< / div >
< / div >
< el -button type = "primary" @click ="toggleSidebar()" style = "display:none" id = "toggleSidebarButton" > 打开 / 关闭侧边栏 < / e l - b u t t o n >
< el -button type = "primary" @click ="toggleSidebar()" style = "display:none"
id = "toggleSidebarButton" > 打开 / 关闭侧边栏 < / e l - b u t t o n >
< 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;" > 黑色 < / e l - o p t i o n >
< el -option label = "红色" value = "red" style = "background-color: red;" > 红色 < / e l - o p t i o n >
< el -option label = "蓝色" value = "blue" style = "background-color: blue;" > 蓝色 < / e l - o p t i o n >
< el -option label = "绿色" value = "green" style = "background-color: green;" > 绿色 < / e l - o p t i o n >
< el -option label = "黄色" value = "yellow" style = "background-color: yellow;" > 黄色 < / e l - o p t i o n >
< el -option label = "紫色" value = "purple" style = "background-color: purple;" > 紫色 < / e l - o p t i o n >
< el -option label = "橙色" value = "orange" style = "background-color: orange" > 橙色 < / e l - o p t i o n >
< el -option label = "黑色" value = "black"
style = "background-color: black;" > 黑色 < / e l - o p t i o n >
< el -option label = "红色" value = "red"
style = "background-color: red;" > 红色 < / e l - o p t i o n >
< el -option label = "蓝色" value = "blue"
style = "background-color: blue;" > 蓝色 < / e l - o p t i o n >
< el -option label = "绿色" value = "green"
style = "background-color: green;" > 绿色 < / e l - o p t i o n >
< el -option label = "黄色" value = "yellow"
style = "background-color: yellow;" > 黄色 < / e l - o p t i o n >
< el -option label = "紫色" value = "purple"
style = "background-color: purple;" > 紫色 < / e l - o p t i o n >
< el -option label = "橙色" value = "orange"
style = "background-color: orange" > 橙色 < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - c o l >
< 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" > < / e l - c o l o r - p i c k e r >
< / e l - c o l >
< / e l - f o r m - i t e m >
< / e l - c o l >
@ -51,14 +60,17 @@
< el -col :span ="12" >
< el -select v-model ="formData.fontSize" @change="updatePreview" >
< el -option value = "" > 请选择 < / e l - o p t i o n >
< el -option value = "12px" > 12 px < / e l - o p t i o n >
< el -option value = "14px" > 14 px < / e l - o p t i o n >
< el -option value = "16px" > 16 px < / e l - o p t i o n >
< el -option value = "18px" > 18 px < / e l - o p t i o n >
< el -option value = "12px" style = "font-size: 12px;" > 12 px < / e l - o p t i o n >
< el -option value = "14px" style = "font-size: 14px;" > 14 px < / e l - o p t i o n >
< el -option value = "16px" style = "font-size: 16px;" > 16 px < / e l - o p t i o n >
< el -option value = "18px" style = "font-size: 18px;" > 18 px < / e l - o p t i o n >
< el -option value = "20px" style = "font-size: 20px;" > 16 px < / e l - o p t i o n >
< el -option value = "22px" style = "font-size: 22px;" > 18 px < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - c o l >
< 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" > < / e l - i n p u t >
< / e l - c o l >
< / e l - r o w >
< / e l - f o r m - i t e m >
@ -70,35 +82,43 @@
< el -select v-model ="formData.fontFamily" @change="updatePreview" >
<!-- 英文字体 -- >
< el -option value = "" > 请选择 < / e l - o p t i o n >
< el -option value = "Arial" > Arial < / e l - o p t i o n >
< el -option value = "Courier New" > Courier New < / e l - o p t i o n >
< el -option value = "Georgia" > Georgia < / e l - o p t i o n >
< el -option value = "Helvetica" > Helvetica < / e l - o p t i o n >
< el -option value = "Times New Roman" > Times New Roman < / e l - o p t i o n >
< el -option value = "serif" > serif < / e l - o p t i o n >
< el -option value = "sans-serif" > sans - serif < / e l - o p t i o n >
< el -option value = "monospace" > monospace < / e l - o p t i o n >
< el -option value = "cursive" > cursive < / e l - o p t i o n >
< el -option value = "fantasy" > fantasy < / e l - o p t i o n >
< el -option value = "Arial" style = "font-family: Arial;" > Arial < / e l - o p t i o n >
< el -option value = "Courier New" style = "font-family: 'Courier New';" > Courier
New < / e l - o p t i o n >
< el -option value = "Georgia" style = "font-family: Georgia;" > Georgia < / e l - o p t i o n >
< el -option value = "Helvetica"
style = "font-family: Helvetica;" > Helvetica < / e l - o p t i o n >
< el -option value = "Times New Roman"
style = "font-family: 'Times New Roman';" > Times New Roman < / e l - o p t i o n >
< el -option value = "serif" style = "font-family: serif;" > serif < / e l - o p t i o n >
< el -option value = "sans-serif"
style = "font-family: sans-serif;" > sans - serif < / e l - o p t i o n >
< el -option value = "monospace"
style = "font-family: monospace;" > monospace < / e l - o p t i o n >
< el -option value = "cursive" style = "font-family: cursive;" > cursive < / e l - o p t i o n >
< el -option value = "fantasy" style = "font-family: fantasy;" > fantasy < / e l - o p t i o n >
<!-- 中文字体字体 -- >
< el -option value = "SimSun" > 宋体 < / e l - o p t i o n >
< el -option value = "SimHei" > 黑体 < / e l - o p t i o n >
< el -option value = "Microsoft YaHei" > 微软雅黑 < / e l - o p t i o n >
< el -option value = "FangSong" > 仿宋 < / e l - o p t i o n >
< el -option value = "KaiTi" > 楷体 < / e l - o p t i o n >
< el -option value = "LiSu" > 隶书 < / e l - o p t i o n >
< el -option value = "YouYuan" > 幼圆 < / e l - o p t i o n >
< el -option value = "STSong" > 华文宋体 < / e l - o p t i o n >
< el -option value = "STHeiti" > 华文黑体 < / e l - o p t i o n >
< el -option value = "STKaiti" > 华文楷体 < / e l - o p t i o n >
< el -option value = "STFangsong" > 华文仿宋 < / e l - o p t i o n >
< el -option value = "STXihei" > 华文细黑 < / e l - o p t i o n >
< el -option value = "STCaiyun" > 华文彩云 < / e l - o p t i o n >
< el -option value = "STHupo" > 华文琥珀 < / e l - o p t i o n >
< el -option value = "STXinwei" > 华文新魏 < / e l - o p t i o n >
< el -option value = "STXingkai" > 华文行楷 < / e l - o p t i o n >
< el -option value = "FZShuTi" > 方正舒体 < / e l - o p t i o n >
< el -option value = "FZYaoti" > 方正姚体 < / e l - o p t i o n >
< el -option value = "SimSun" style = "font-family: SimSun;" > 宋体 < / e l - o p t i o n >
< el -option value = "SimHei" style = "font-family: SimHei;" > 黑体 < / e l - o p t i o n >
< el -option value = "Microsoft YaHei"
style = "font-family: 'Microsoft YaHei';" > 微软雅黑 < / e l - o p t i o n >
< el -option value = "FangSong" style = "font-family: FangSong;" > 仿宋 < / e l - o p t i o n >
< el -option value = "KaiTi" style = "font-family: KaiTi;" > 楷体 < / e l - o p t i o n >
< el -option value = "LiSu" style = "font-family: LiSu;" > 隶书 < / e l - o p t i o n >
< el -option value = "YouYuan" style = "font-family: YouYuan;" > 幼圆 < / e l - o p t i o n >
< el -option value = "STSong" style = "font-family: STSong;" > 华文宋体 < / e l - o p t i o n >
< el -option value = "STHeiti" style = "font-family: STHeiti;" > 华文黑体 < / e l - o p t i o n >
< el -option value = "STKaiti" style = "font-family: STKaiti;" > 华文楷体 < / e l - o p t i o n >
< el -option value = "STFangsong"
style = "font-family: STFangsong;" > 华文仿宋 < / e l - o p t i o n >
< el -option value = "STXihei" style = "font-family: STXihei;" > 华文细黑 < / e l - o p t i o n >
< el -option value = "STCaiyun" style = "font-family: STCaiyun;" > 华文彩云 < / e l - o p t i o n >
< el -option value = "STHupo" style = "font-family: STHupo;" > 华文琥珀 < / e l - o p t i o n >
< el -option value = "STXinwei" style = "font-family: STXinwei;" > 华文新魏 < / e l - o p t i o n >
< el -option value = "STXingkai"
style = "font-family: STXingkai;" > 华文行楷 < / e l - o p t i o n >
< el -option value = "FZShuTi" style = "font-family: FZShuTi;" > 方正舒体 < / e l - o p t i o n >
< el -option value = "FZYaoti" style = "font-family: FZYaoti;" > 方正姚体 < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< / e l - c o l >
@ -106,8 +126,8 @@
< el -form -item label = "字体样式:" >
< el -select v-model ="formData.fontStyle" @change="updatePreview" >
< el -option value = "" > 请选择 < / e l - o p t i o n >
< el -option value = "normal "> 正常 < / e l - o p t i o n >
< el -option value = "italic "> 斜体 < / e l - o p t i o n >
< el -option value = "normal " style = "font-style: normal; "> 正常 < / e l - o p t i o n >
< el -option value = "italic " style = "font-style: italic; "> 斜体 < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< / e l - c o l >
@ -115,10 +135,10 @@
< el -form -item label = "字体粗细:" >
< el -select v-model ="formData.fontWeight" @change="updatePreview" >
< el -option value = "" > 请选择 < / e l - o p t i o n >
< el -option value = "normal "> 正常 < / e l - o p t i o n >
< el -option value = "bold "> 加粗 < / e l - o p t i o n >
< el -option value = "bolder "> 更粗 < / e l - o p t i o n >
< el -option value = "lighter "> 更细 < / e l - o p t i o n >
< el -option value = "normal " style = "font-weight: normal; "> 正常 < / e l - o p t i o n >
< el -option value = "bold " style = "font-weight: bold; "> 加粗 < / e l - o p t i o n >
< el -option value = "bolder " style = "font-weight: bolder; "> 更粗 < / e l - o p t i o n >
< el -option value = "lighter " style = "font-weight: lighter; "> 更细 < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< / e l - c o l >
@ -149,13 +169,21 @@
< el -form -item label = "字体阴影:" >
< el -select v-model ="formData.textShadow" @change="updatePreview" >
< el -option value = "" > 请选择 < / e l - o p t i o n >
< el -option value = "2px 2px 4px rgba(0,0,0,0.5)" > 阴影1 < / e l - o p t i o n >
< el -option value = "4px 4px 8px rgba(0,0,0,0.5)" > 阴影2 < / e l - o p t i o n >
< el -option value = "6px 6px 12px rgba(0,0,0,0.5)" > 阴影3 < / e l - o p t i o n >
< el -option value = "-1px -1px 1px #aaa" > 阴影4 < / e l - o p t i o n >
< el -option value = "0px 4px 1px rgba(0, 0, 0, 0.5)" > 阴影5 < / e l - o p t i o n >
< el -option value = "4px 4px 5px rgba(0, 0, 0, 0.7)" > 阴影6 < / e l - o p t i o n >
< el -option value = "0px 0px 7px rgba(0, 0, 0, 0.4)" > 阴影7 < / e l - o p t i o n >
< 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 < / e l - o p t i o n >
< 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 < / e l - o p t i o n >
< 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 < / e l - o p t i o n >
< el -option value = "-1px -1px 1px #aaa"
style = "text-shadow: -1px -1px 1px #aaa;" > 阴影4 < / e l - o p t i o n >
< 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 < / e l - o p t i o n >
< 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 < / e l - o p t i o n >
< 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 < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< / e l - c o l >
@ -201,7 +229,8 @@
< / e l - f o r m - i t e m >
< / e l - c o l >
< / e l - r o w >
< el -form -item > < el -button type = "success" native -type = " submit " class = "w-100" > 提交 < / e l - b u t t o n > < / e l - f o r m - i t e m >
< el -form -item > < el -button type = "success" native -type = " submit "
class = "w-100" > 提交 < / e l - b u t t o n > < / e l - f o r m - i t e m >
< / e l - f o r m >
< 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" > < / e l - i n p u t >
< / div >
< / div >
< / div >
@ -296,9 +326,10 @@ import {
} from 'ckeditor5' ;
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 { Export2PDF , Export2Word , ToggleSideBar , Translation } from './components/plugins'
import { ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker } from 'element-plus' ;
/ / i m p o r t { g e t U s e r C o n f i g F r o m B a c k e n d , s a v e D a t a , g e t P a g e C o n t e n t , g e t A n d A p p l y U s e r S t y l e s } f r o m ' . / c o m p o n e n t s / u t i l s ' ;
import { getUserConfigFromBackend , saveData , getPageContent } from './components/utils' ;
import { Export2PDF , Export2Word , ToggleSideBar , Translation } from './components/plugins'
export default {
name : 'app' ,
@ -310,8 +341,8 @@ export default {
editor : ClassicEditor ,
isSidebarOpen : false , / / 侧 边 栏 是 否 打 开
currentForm : '' , / / 当 前 侧 边 栏 显 示 的 表 单
isSidebarOpen : false , / / 侧 边 栏 是 否 打 开
currentForm : '' , / / 当 前 侧 边 栏 显 示 的 表 单
formData : {
fontFamily : '' ,
color : '' ,
@ -326,7 +357,7 @@ export default {
letterSpacing : '' ,
wordSpacing : ''
} ,
previewStyle : { } ,
previewStyle : { } ,
aiInput : '' , / / A I 输 入 的 内 容
messages : [ ] , / / 聊 天 记 录
} ;
@ -335,7 +366,7 @@ export default {
/ / 获 取 用 户 的 样 式 配 置
const userConfig = getUserConfigFromBackend ( ) ;
/ / 获 取 用 户 定 义 的 样 式 并 应 用
getAndApplyUserStyles ( )
/ / g e t A n d A p p l y U s e r S t y l e s ( )
this . config = {
toolbar : {
items : [
@ -366,7 +397,7 @@ export default {
'numberedList' ,
'outdent' ,
'indent' ,
'|' , 'ExportToWord' , 'ExportToPDF' , 'translate' , 'SideBar'
'|' , 'ExportToWord' , 'ExportToPDF' , 'translate' , 'SideBar'
] ,
shouldNotGroupWhenFull : true
} ,
@ -440,7 +471,7 @@ export default {
TodoList ,
Underline ,
Undo ,
Export2Word , Translation , Export2PDF , ToggleSideBar
Export2Word , Translation , Export2PDF , ToggleSideBar
] ,
balloonToolbar : [ 'bold' , 'italic' , '|' , 'link' , 'insertImage' , '|' , 'bulletedList' , 'numberedList' ] ,
/ / 自 定 义 设 置 字 体
@ -557,7 +588,7 @@ export default {
} ,
menuBar : {
isVisible : true ,
removeItems : [ 'help' ] ,
removeItems : [ 'help' ] ,
} ,
placeholder : 'Type or paste your content here!' ,
/ / 用 户 可 以 自 定 义 和 管 理 样 式
@ -571,7 +602,7 @@ export default {
waitingTime : 180000 , / / ( i n m s ) 3 m i n u t e s
save ( ) {
/ / T O D O s a v e
return saveData ( getPageContent ( ) ) ;
return saveData ( getPageContent ( ) ) ;
}
} ,
translations : [ translations ]
@ -590,15 +621,15 @@ export default {
const pageContent = '<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n You\'ve successfully created a CKEditor 5 project. This powerful text editor will enhance your application, enabling rich text editing\n capabilities that are customizable and easy to use.\n</p>\n<h3>What\'s next?</h3>\n<ol>\n <li>\n <strong>Integrate into your app</strong>: time to bring the editing into your application. Take the code you created and add to your\n application.\n </li>\n <li>\n <strong>Explore features:</strong> Experiment with different plugins and toolbar options to discover what works best for your needs.\n </li>\n <li>\n <strong>Customize your editor:</strong> Tailor the editor\'s configuration to match your application\'s style and requirements. Or even\n write your plugin!\n </li>\n</ol>\n<p>\n Keep experimenting, and don\'t hesitate to push the boundaries of what you can achieve with CKEditor 5. Your feedback is invaluable to us\n as we strive to improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<ul>\n <li>📝 <a href="https://orders.ckeditor.com/trial/premium-features">Trial sign up</a>,</li>\n <li>📕 <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/index.html">Documentation</a>,</li>\n <li>⭐️ <a href="https://github.com/ckeditor/ckeditor5">GitHub</a> (star us if you can!),</li>\n <li>🏠 <a href="https://ckeditor.com">CKEditor Homepage</a>,</li>\n <li>🧑💻 <a href="https://ckeditor.com/ckeditor-5/demo/">CKEditor 5 Demos</a>,</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n See this text, but the editor is not starting up? Check the browser\'s console for clues and guidance. It may be related to an incorrect\n license key if you use premium features or another feature-related requirement. If you cannot make it work, file a GitHub issue, and we\n will help as soon as possible!\n</p>\n' ;
/ / 打 开 已 有 文 本 就 将 p a g e C o n t e n t 替 换
/ / T O D O
editor . setData ( pageContent ) ;
editor . setData ( pageContent ) ;
} ,
/ / s i d e b a r
/ / 打 开 / 关 闭 侧 边 栏
toggleSidebar ( ) {
toggleSidebar ( ) {
this . isSidebarOpen = ! this . isSidebarOpen ;
} ,
/ / 展 示 表 单
showForm ( formType ) {
showForm ( formType ) {
this . currentForm = formType ;
} ,
/ / 保 存 用 户 定 义 样 式
@ -609,8 +640,21 @@ export default {
selectedStyles [ key ] = this . formData [ key ] ;
}
}
console . log ( selectedStyles ) ; / / 这 里 可 以 将 s e l e c t e d S t y l e s 发 送 到 后 端 或 其 他 处 理 逻 辑
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 ) ; / / 这 里 可 以 将 c s s C l a s s 发 送 到 后 端 或 其 他 处 理 逻 辑
alert ( cssClass ) ;
} else {
alert ( "类名不能为空！" ) ;
}
} ,
/ / 更 新 预 览
updatePreview ( ) {
@ -634,7 +678,7 @@ export default {
} ,
components : {
/ / 导 入 组 件
ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker
ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker
}
} ;
< / script >
