ソースを参照

修改编辑器行距功能并打包

yangg 8 ヶ月 前
コミット
eb4058e570

+ 83 - 21
dist/ckeditor/config.js

@@ -55,28 +55,54 @@ config.contentsCss = '/public/ckeditor/custom-ckeditor.css';
   
   // 配置 Spacing Sliders 插件
   config.spacingsliders = {
-	  // 行距配置
-	  lineHeight: {
-		  min: 1,          // 最小值
-		  max: 3,          // 最大值
-		  step: 0.1,       // 步进值
-		  default: 1.15    // 默认值(对应 Word 默认行距)
-	  },
-	  // 段前距离配置
-	  spacingBefore: {
-		  min: 0,          // 最小值(像素)
-		  max: 72,         // 最大值(像素)
-		  step: 1,         // 步进值
-		  default: 0       // 默认值
-	  },
-	  // 段后距离配置
-	  spacingAfter: {
-		  min: 0,
-		  max: 72,
-		  step: 1,
-		  default: 0
-	  }
+	   // 行距配置
+	   lineHeight: {
+		min: 1,
+		max: 3,
+		step: 0.1,
+		default: 1.15,    // Word 默认行距
+		// 添加单位配置
+		unit: 'em',       // 使用 em 单位而不是默认的无单位值
+		css: {
+			property: 'line-height',
+			// 确保生成的样式使用确切的值
+			template: '{value}em'
+		}
+	},
+	spacingBefore: {
+		min: 0,
+		max: 72,
+		step: 1,
+		default: 0,
+		unit: 'pt',      // 使用磅作为单位
+		css: {
+			property: 'margin-top',
+			template: '{value}pt'
+		}
+	},
+	spacingAfter: {
+		min: 0,
+		max: 72,
+		step: 1,
+		default: 0,
+		unit: 'pt',
+		css: {
+			property: 'margin-bottom',
+			template: '{value}pt'
+		}
+	}
   };
+    // 添加自定义样式规则
+    config.contentsCss = [
+        '/public/ckeditor/contents.css',
+        '/public/ckeditor/custom-ckeditor.css'
+    ];
+
+    // 确保段落格式正确
+    config.enterMode = CKEDITOR.ENTER_P;
+    
+    // 允许额外的样式属性
+    config.extraAllowedContent = 'p{line-height,margin-top,margin-bottom}';
 
 // 修改图片上传配置
 config.filebrowserImageUploadUrl = 'http://183.195.216.54:8084/upload/imageNew';
@@ -85,5 +111,41 @@ config.imageUploadUrl = 'http://183.195.216.54:8084/upload/imageNew';
 // 自定义上传处理
 config.uploadUrl = 'http://183.195.216.54:8084/upload/imageNew';
 
+// 1. 添加样式组合定义
+/* config.stylesSet = [
+	// 行距样式
+	{ name: '单倍行距', element: 'p', attributes: { 'style': 'line-height: 1.0;' }},
+	{ name: '1.5倍行距', element: 'p', attributes: { 'style': 'line-height: 1.5;' }},
+	{ name: '2.0倍行距', element: 'p', attributes: { 'style': 'line-height: 2.0;' }},
+	
+	// 段前间距
+	{ name: '段前0磅', element: 'p', attributes: { 'style': 'margin-top: 0pt;' }},
+	{ name: '段前5磅', element: 'p', attributes: { 'style': 'margin-top: 5pt;' }},
+	{ name: '段前10磅', element: 'p', attributes: { 'style': 'margin-top: 10pt;' }},
+	
+	// 段后间距
+	{ name: '段后0磅', element: 'p', attributes: { 'style': 'margin-bottom: 0pt;' }},
+	{ name: '段后5磅', element: 'p', attributes: { 'style': 'margin-bottom: 5pt;' }},
+	{ name: '段后10磅', element: 'p', attributes: { 'style': 'margin-bottom: 10pt;' }}
+]; */
+
+
+// 3. 添加行距插件
+config.extraPlugins = 'lineheight,spacing';
+
+// 4. 配置行距选项
+config.line_height = '1;1.15;1.5;2;2.5;3';
+
+// 5. 配置段落间距
+config.spacing_sizes = '0pt;5pt;10pt;15pt;20pt';
+
+// 6. 允许额外的样式属性
+config.extraAllowedContent = 'p{line-height,margin-top,margin-bottom}(*);';
+
+// 7. 添加自定义样式表
+config.contentsCss = [
+	'/public/ckeditor/contents.css',
+	'/public/ckeditor/custom-styles.css'
+];
 
 };

+ 18 - 0
dist/ckeditor/custom-ckeditor.css

@@ -37,4 +37,22 @@
 @page {
     size: A4;
     margin: 0;
+}
+
+/* 确保段落样式的一致性 */
+p {
+    margin: 0;              /* 重置默认边距 */
+    padding: 0;            /* 重置默认内边距 */
+}
+
+/* 使用 Word 兼容的行距计算方式 */
+p[style*="line-height"] {
+    display: block;
+    box-sizing: border-box;
+}
+
+/* 确保段前段后距离的准确性 */
+p[style*="margin-top"],
+p[style*="margin-bottom"] {
+    position: relative;
 }

+ 37 - 0
dist/ckeditor/custom-styles.css

@@ -0,0 +1,37 @@
+/* 行距预设样式 */
+.line-height-single {
+  line-height: 1.0 !important;
+}
+
+.line-height-one-half {
+  line-height: 1.5 !important;
+}
+
+.line-height-double {
+  line-height: 2.0 !important;
+}
+
+/* 段落间距预设样式 */
+.spacing-before-none {
+  margin-top: 0pt !important;
+}
+
+.spacing-before-small {
+  margin-top: 5pt !important;
+}
+
+.spacing-before-medium {
+  margin-top: 10pt !important;
+}
+
+.spacing-after-none {
+  margin-bottom: 0pt !important;
+}
+
+.spacing-after-small {
+  margin-bottom: 5pt !important;
+}
+
+.spacing-after-medium {
+  margin-bottom: 10pt !important;
+} 

+ 67 - 0
dist/ckeditor/plugins/spacing/plugin.js

@@ -0,0 +1,67 @@
+CKEDITOR.plugins.add('spacing', {
+    init: function(editor) {
+        // 添加段前间距命令
+        editor.addCommand('setSpacingBefore', {
+            exec: function(editor) {
+                var style = new CKEDITOR.style({
+                    element: 'p',
+                    attributes: {
+                        'style': 'margin-top: ' + this.value + ';line-height: 1;'
+                    }
+                });
+                editor.applyStyle(style);
+            }
+        });
+
+        // 添加段后间距命令
+        editor.addCommand('setSpacingAfter', {
+            exec: function(editor) {
+                var style = new CKEDITOR.style({
+                    element: 'p',
+                    attributes: {
+                        'style': 'margin-bottom: ' + this.value + ';line-height: 1;'
+                    }
+                });
+                editor.applyStyle(style);
+            }
+        });
+
+        // 创建段前间距下拉菜单
+        editor.ui.addRichCombo('SpacingBefore', {
+            label: '段前间距',
+            title: '设置段前间距',
+            panel: {
+                css: [CKEDITOR.skin.getPath('editor')].concat(editor.config.contentsCss)
+            },
+            init: function() {
+                this.startGroup('段前间距');
+                this.add('0', '0行');
+                this.add('1em', '1行');
+                this.add('1.5em', '1.5行');
+                this.add('2em', '2行');
+            },
+            onClick: function(value) {
+                editor.execCommand('setSpacingBefore', { value: value });
+            }
+        });
+
+        // 创建段后间距下拉菜单
+        editor.ui.addRichCombo('SpacingAfter', {
+            label: '段后间距',
+            title: '设置段后间距',
+            panel: {
+                css: [CKEDITOR.skin.getPath('editor')].concat(editor.config.contentsCss)
+            },
+            init: function() {
+                this.startGroup('段后间距');
+                this.add('0', '0行');
+                this.add('1em', '1行');
+                this.add('1.5em', '1.5行');
+                this.add('2em', '2行');
+            },
+            onClick: function(value) {
+                editor.execCommand('setSpacingAfter', { value: value });
+            }
+        });
+    }
+}); 

+ 83 - 21
public/ckeditor/config.js

@@ -55,28 +55,54 @@ config.contentsCss = '/public/ckeditor/custom-ckeditor.css';
   
   // 配置 Spacing Sliders 插件
   config.spacingsliders = {
-	  // 行距配置
-	  lineHeight: {
-		  min: 1,          // 最小值
-		  max: 3,          // 最大值
-		  step: 0.1,       // 步进值
-		  default: 1.15    // 默认值(对应 Word 默认行距)
-	  },
-	  // 段前距离配置
-	  spacingBefore: {
-		  min: 0,          // 最小值(像素)
-		  max: 72,         // 最大值(像素)
-		  step: 1,         // 步进值
-		  default: 0       // 默认值
-	  },
-	  // 段后距离配置
-	  spacingAfter: {
-		  min: 0,
-		  max: 72,
-		  step: 1,
-		  default: 0
-	  }
+	   // 行距配置
+	   lineHeight: {
+		min: 1,
+		max: 3,
+		step: 0.1,
+		default: 1.15,    // Word 默认行距
+		// 添加单位配置
+		unit: 'em',       // 使用 em 单位而不是默认的无单位值
+		css: {
+			property: 'line-height',
+			// 确保生成的样式使用确切的值
+			template: '{value}em'
+		}
+	},
+	spacingBefore: {
+		min: 0,
+		max: 72,
+		step: 1,
+		default: 0,
+		unit: 'pt',      // 使用磅作为单位
+		css: {
+			property: 'margin-top',
+			template: '{value}pt'
+		}
+	},
+	spacingAfter: {
+		min: 0,
+		max: 72,
+		step: 1,
+		default: 0,
+		unit: 'pt',
+		css: {
+			property: 'margin-bottom',
+			template: '{value}pt'
+		}
+	}
   };
+    // 添加自定义样式规则
+    config.contentsCss = [
+        '/public/ckeditor/contents.css',
+        '/public/ckeditor/custom-ckeditor.css'
+    ];
+
+    // 确保段落格式正确
+    config.enterMode = CKEDITOR.ENTER_P;
+    
+    // 允许额外的样式属性
+    config.extraAllowedContent = 'p{line-height,margin-top,margin-bottom}';
 
 // 修改图片上传配置
 config.filebrowserImageUploadUrl = 'http://183.195.216.54:8084/upload/imageNew';
@@ -85,5 +111,41 @@ config.imageUploadUrl = 'http://183.195.216.54:8084/upload/imageNew';
 // 自定义上传处理
 config.uploadUrl = 'http://183.195.216.54:8084/upload/imageNew';
 
+// 1. 添加样式组合定义
+/* config.stylesSet = [
+	// 行距样式
+	{ name: '单倍行距', element: 'p', attributes: { 'style': 'line-height: 1.0;' }},
+	{ name: '1.5倍行距', element: 'p', attributes: { 'style': 'line-height: 1.5;' }},
+	{ name: '2.0倍行距', element: 'p', attributes: { 'style': 'line-height: 2.0;' }},
+	
+	// 段前间距
+	{ name: '段前0磅', element: 'p', attributes: { 'style': 'margin-top: 0pt;' }},
+	{ name: '段前5磅', element: 'p', attributes: { 'style': 'margin-top: 5pt;' }},
+	{ name: '段前10磅', element: 'p', attributes: { 'style': 'margin-top: 10pt;' }},
+	
+	// 段后间距
+	{ name: '段后0磅', element: 'p', attributes: { 'style': 'margin-bottom: 0pt;' }},
+	{ name: '段后5磅', element: 'p', attributes: { 'style': 'margin-bottom: 5pt;' }},
+	{ name: '段后10磅', element: 'p', attributes: { 'style': 'margin-bottom: 10pt;' }}
+]; */
+
+
+// 3. 添加行距插件
+config.extraPlugins = 'lineheight,spacing';
+
+// 4. 配置行距选项
+config.line_height = '1;1.15;1.5;2;2.5;3';
+
+// 5. 配置段落间距
+config.spacing_sizes = '0pt;5pt;10pt;15pt;20pt';
+
+// 6. 允许额外的样式属性
+config.extraAllowedContent = 'p{line-height,margin-top,margin-bottom}(*);';
+
+// 7. 添加自定义样式表
+config.contentsCss = [
+	'/public/ckeditor/contents.css',
+	'/public/ckeditor/custom-styles.css'
+];
 
 };

+ 18 - 0
public/ckeditor/custom-ckeditor.css

@@ -37,4 +37,22 @@
 @page {
     size: A4;
     margin: 0;
+}
+
+/* 确保段落样式的一致性 */
+p {
+    margin: 0;              /* 重置默认边距 */
+    padding: 0;            /* 重置默认内边距 */
+}
+
+/* 使用 Word 兼容的行距计算方式 */
+p[style*="line-height"] {
+    display: block;
+    box-sizing: border-box;
+}
+
+/* 确保段前段后距离的准确性 */
+p[style*="margin-top"],
+p[style*="margin-bottom"] {
+    position: relative;
 }

+ 37 - 0
public/ckeditor/custom-styles.css

@@ -0,0 +1,37 @@
+/* 行距预设样式 */
+.line-height-single {
+  line-height: 1.0 !important;
+}
+
+.line-height-one-half {
+  line-height: 1.5 !important;
+}
+
+.line-height-double {
+  line-height: 2.0 !important;
+}
+
+/* 段落间距预设样式 */
+.spacing-before-none {
+  margin-top: 0pt !important;
+}
+
+.spacing-before-small {
+  margin-top: 5pt !important;
+}
+
+.spacing-before-medium {
+  margin-top: 10pt !important;
+}
+
+.spacing-after-none {
+  margin-bottom: 0pt !important;
+}
+
+.spacing-after-small {
+  margin-bottom: 5pt !important;
+}
+
+.spacing-after-medium {
+  margin-bottom: 10pt !important;
+} 

+ 67 - 0
public/ckeditor/plugins/spacing/plugin.js

@@ -0,0 +1,67 @@
+CKEDITOR.plugins.add('spacing', {
+    init: function(editor) {
+        // 添加段前间距命令
+        editor.addCommand('setSpacingBefore', {
+            exec: function(editor) {
+                var style = new CKEDITOR.style({
+                    element: 'p',
+                    attributes: {
+                        'style': 'margin-top: ' + this.value + ';line-height: 1;'
+                    }
+                });
+                editor.applyStyle(style);
+            }
+        });
+
+        // 添加段后间距命令
+        editor.addCommand('setSpacingAfter', {
+            exec: function(editor) {
+                var style = new CKEDITOR.style({
+                    element: 'p',
+                    attributes: {
+                        'style': 'margin-bottom: ' + this.value + ';line-height: 1;'
+                    }
+                });
+                editor.applyStyle(style);
+            }
+        });
+
+        // 创建段前间距下拉菜单
+        editor.ui.addRichCombo('SpacingBefore', {
+            label: '段前间距',
+            title: '设置段前间距',
+            panel: {
+                css: [CKEDITOR.skin.getPath('editor')].concat(editor.config.contentsCss)
+            },
+            init: function() {
+                this.startGroup('段前间距');
+                this.add('0', '0行');
+                this.add('1em', '1行');
+                this.add('1.5em', '1.5行');
+                this.add('2em', '2行');
+            },
+            onClick: function(value) {
+                editor.execCommand('setSpacingBefore', { value: value });
+            }
+        });
+
+        // 创建段后间距下拉菜单
+        editor.ui.addRichCombo('SpacingAfter', {
+            label: '段后间距',
+            title: '设置段后间距',
+            panel: {
+                css: [CKEDITOR.skin.getPath('editor')].concat(editor.config.contentsCss)
+            },
+            init: function() {
+                this.startGroup('段后间距');
+                this.add('0', '0行');
+                this.add('1em', '1行');
+                this.add('1.5em', '1.5行');
+                this.add('2em', '2行');
+            },
+            onClick: function(value) {
+                editor.execCommand('setSpacingAfter', { value: value });
+            }
+        });
+    }
+});