From 784066340c5de1362fa8124449bac0d453c89feb Mon Sep 17 00:00:00 2001 From: joefalmko Date: Fri, 15 Nov 2024 15:45:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BE=A7=E8=BE=B9=E6=A0=8F?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=96=87=E4=BB=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ckeditor5/handbook.md | 14 +- ckeditor5/prompt_generate_style.md | 69 +++- ckeditor5/public/sidebar.css | 127 ++++++ ckeditor5/src/App.vue | 603 +++++++++------------------- ckeditor5/src/components/plugins.js | 442 ++++++++++++++++++-- ckeditor5/src/components/utils.js | 7 +- ckeditor5/vue.config.js | 3 +- 7 files changed, 800 insertions(+), 465 deletions(-) create mode 100644 ckeditor5/public/sidebar.css diff --git a/ckeditor5/handbook.md b/ckeditor5/handbook.md index 602ba84..11bc06b 100644 --- a/ckeditor5/handbook.md +++ b/ckeditor5/handbook.md @@ -1,5 +1,5 @@ ### 运行 -``` +```bash npm install npm run serve ``` @@ -8,7 +8,7 @@ npm run serve 见`App.vue`、`main.js` ### 添加插件 -直接修改`App.vue`,见Export2Word插件 +插件定义在`./components/plugins.js`中,添加方式见Export2Word插件 #### Export2Word插件 bug1:图片导出为word会恢复原始大小,而不是在编辑器中显示的大小。 @@ -20,6 +20,7 @@ bug2: 导出格式部分错误,字体颜色可以正常显示但背景颜色 #### 智能润色 选中需要处理的文本后,点击对应按钮即可触发实现,对应逻辑需要实现,框架已搭建。见插件Translate +具体的输出可以显示在侧边栏中,修改侧边栏中智能润色子菜单部分`App.vue`44-48行,如果需要与大模型交互,可以参考271-279行和`sendMessage, displayMessage`函数 #### 智能格式排版 · 样式库的管理和编辑 @@ -27,7 +28,7 @@ bug2: 导出格式部分错误,字体颜色可以正常显示但背景颜色 https://ckeditor.com/docs/ckeditor5/latest/features/style.html 编辑器初始化时 -``` +```javascript // 配置文件定义样式 import { ClassicEditor, Style } from 'ckeditor5'; @@ -51,8 +52,11 @@ ClassicEditor .then( /* ... */ ) .catch( /* ... */ ); ``` -``` -// 定义对应样式的css格式 +初始化配置,可以通过修改`./components/utils`中的`setConfig`函数和`getUserConfigFromBackend`函数和初始化时对应部分。 +应用样式需要修改`getAndApplyUserStyles`函数。需要和后端配合。 +需要在目录页面(或其他位置)增加一个用户自定义配置的功能。 +```css +/* 定义对应样式的css格式*/ .ck.ck-content h3.category { font-family: 'Bebas Neue'; font-size: 20px; diff --git a/ckeditor5/prompt_generate_style.md b/ckeditor5/prompt_generate_style.md index 7db368b..0d198a3 100644 --- a/ckeditor5/prompt_generate_style.md +++ b/ckeditor5/prompt_generate_style.md @@ -1,5 +1,5 @@ ### 角色 -你是一个设计和 CSS 专家,能够根据用户需求生成精确的 CSS 样式。 +你是一个设计和 CSS 专家,能够根据用户需求生成精确的 CSS 样式。 如果用户提出与生成CSS样式无关的问题,请回答“对不起,我无法回答该问题” ### 任务 为以下元素生成 CSS 样式类: 标题:(i为标题级别,如 h1, h2 等) @@ -9,8 +9,10 @@ 代码块:
 所有样式都需在 .ck-content 中定义,格式为:
 ``` css
-.ck-content element.class { ... }
+.ck-content element.className { ... }
 ```
+### 输出
+仅输出你编写的 CSS 内容,不要对其进行解释和输出其他内容。!important
 ### 示例
 生成一个文本块样式,生成的样式如下所示。 
 ``` css
@@ -25,5 +27,64 @@
     box-shadow: 5px 5px 0 #ffe6ef; 
 }
 ```
-### 输出
-仅输出你编写的 CSS 内容,不要对其进行解释和输出其他内容。
\ No newline at end of file
+生成一个代码框样式,生成的样式如下所示:
+```css
+.ck-content pre.fancy-code {
+	border: 0;
+	margin-left: 2em;
+	margin-right: 2em;
+	border-radius: 10px;
+}
+
+.ck-content pre.fancy-code::before {
+	content: '';
+	display: block;
+	height: 13px;
+	background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
+	margin-bottom: 8px;
+	background-repeat: no-repeat;
+}
+
+.ck-content pre.fancy-code-dark {
+	background: #272822;
+	color: #fff;
+	box-shadow: 5px 5px 0 #0000001f;
+}
+```
+生成一个块引用样式,生成的样式如下所示
+```css
+.ck-content blockquote.side-quote {
+	font-family: 'Oswald';
+	font-style: normal;
+	float: right;
+	width: 35%;
+	position: relative;
+	border: 0;
+	overflow: visible;
+	z-index: 1;
+	margin-left: 1em;
+}
+
+.ck-content blockquote.side-quote::before {
+	content: '“';
+	position: absolute;
+	top: -37px;
+	left: -10px;
+	display: block;
+	font-size: 200px;
+	color: #e7e7e7;
+	z-index: -1;
+	line-height: 1;
+}
+
+.ck-content blockquote.side-quote p {
+	font-size: 2em;
+	line-height: 1;
+}
+
+.ck-content blockquote.side-quote p:last-child:not(:first-child) {
+	font-size: 1.3em;
+	text-align: right;
+	color: #555;
+}
+```
diff --git a/ckeditor5/public/sidebar.css b/ckeditor5/public/sidebar.css
new file mode 100644
index 0000000..5e083fe
--- /dev/null
+++ b/ckeditor5/public/sidebar.css
@@ -0,0 +1,127 @@
+/*侧边栏样式*/
+.sidebar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 350px;
+	height: 100%;
+	overflow-y: hidden;
+	transition: transform 0.3s ease;
+	transform: translateX(-100%);
+	background-color: #f9f9f9;
+	padding-left: 8px;
+	/* 调整内边距,使文字右移 */
+	padding-right: 8px;
+	/* 调整内边距,使文字右移 */
+	z-index: 9;
+	border-right: 5px solid #aec7e5;
+	resize: horizontal;
+	overflow: auto;
+}
+
+.sidebar.active {
+	transform: translateX(0);
+}
+
+.sidebar-menu {
+	flex-direction: row;
+	justify-content: space-between;
+	/* background-color: rgb(182, 229, 244); */
+	border-radius: 19px;
+	/* 添加圆角 */
+	display: flex;
+}
+
+.sidebar-menu .el-sub-menu {
+	display: flex;
+	flex-direction: column;
+}
+
+.sidebar-menu .el-menu-item {
+	flex: 1;
+	text-align: left;
+	background-color: #9cd6ce;
+	border-radius: 8px;
+	/* 添加圆角 */
+	margin: 2px 0;
+	/* 添加间距 */
+}
+
+.sidebar-menu .el-menu-item span {
+	display: block;
+	padding: 10px;
+	background-color: #ffffff;
+	border-radius: 4px;
+}
+
+.sidebar-menu .el-menu-item span:hover {
+	background-color: #e0e0e0;
+}
+
+.preview {
+	margin-top: 20px;
+	/* 调整预览区与表单之间的距离 */
+	border: 1px solid #ccc;
+	/* 添加边框 */
+	padding: 10px;
+	/* 添加内边距 */
+	border-radius: 4px;
+	/* 添加圆角 */
+}
+
+.form-item {
+	margin-bottom: 1px;
+	/* 减小表单项之间的距离 */
+}
+
+.chat-container {
+	display: flex;
+	flex-direction: column;
+	height: 90vh;
+	justify-content: space-between;
+}
+
+.messages {
+	flex: 1;
+	overflow-y: auto;
+	margin-bottom: 10px;
+}
+
+.message pre {
+	white-space: pre-wrap;
+	/* 保留空白符,但允许自动换行 */
+	word-wrap: break-word;
+	/* 允许长单词换行 */
+}
+
+.input-area {
+	display: flex;
+}
+
+.input-area input {
+	flex: 1;
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+.input-area button {
+	padding: 10px 15px;
+	background-color: #2980b9;
+	color: white;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	margin-left: 5px;
+}
+
+.input-area button:hover {
+	background-color: #3498db;
+}
+
+.message {
+	margin: 5px 0;
+	padding: 10px;
+	border-radius: 4px;
+	background-color: #ecf0f1;
+}
\ No newline at end of file
diff --git a/ckeditor5/src/App.vue b/ckeditor5/src/App.vue
index 93d6775..1ae2e3b 100644
--- a/ckeditor5/src/App.vue
+++ b/ckeditor5/src/App.vue
@@ -18,8 +18,8 @@
 				id="toggleSidebarButton">打开/关闭侧边栏