CKEditor4x word导入不保存格式的解决方案

后台上传文档时,目前功能都通过word直接复制黏贴实现,之前和word控件朋友一起测试找个问题,原始代码CK4.X没有找个问题.

第一时间排查config.js的配置发现端倪,测试解决!

由于配合ckfinder来进行附件上传,所以修改了自定义basic的所有配置参数具体代码如下:

 

 1 /*
 2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
 3 For licensing, see LICENSE.html or http://ckeditor.com/license
 4 */
 5 
 6 CKEDITOR.editorConfig = function (config) {
 7     // Define changes to default configuration here. For example:
 8     //定义语言,此处改为中文
 9     //config.language = 'fr'; //中文
10     //config.language = 'zh-cn'; //配置语言 
11     //颜色
12     config.uiColor = '#E6EBEE';
13 
14     //字体
15     //config.font_names = '新细明体/PMingLiU;细明体/MingLiU;标楷体/DFKai-SB;黑体/SimHei;宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312楷体_GB2312/KaiTi_GB2312;微軟正黑體/Microsoft JhengHei;微软雅黑体/Microsoft YaHei;隶书/LiSu;幼圆/YouYuan;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;华文仿宋/STFangsong;方正舒体/FZShuTi;方正姚体/FZYaoti;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;'+ config.font_names; 
16     config.font_names = "宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;" + config.font_names;
17 
18     //config.font_names = '宋体;楷体;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
19     //默认使用的toolbar(工具栏),此设定名字为“Basic”的toolbar为系统默认的工具栏
20     config.toolbar = 'Basic';
21     //名字为“Basic”的toolbar(工具栏)的具体设定。只保留以下功能:
22     config.toolbar_Basic =
23     [
24         { name: 'styles', items: ['Font', 'FontSize'] }, //样式栏:字体、大小
25         {name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }, //对齐栏:左对齐、中心对齐、右对齐、两端对齐
26         {name: 'colors', items: ['TextColor', 'BGColor'] }, //颜色栏:文本颜色、背景颜色
27         {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }, //基本样式栏:加粗、倾斜、下划线、删除线、下标、上标、移除样式
28         { name: 'insert', items: ['Image', 'Flash', 'VideoPlayer'] }, //插入栏:图像、flash、表格、水平线, 'Table', 'HorizontalRule'
29         {name: 'links', items: ['Link', 'Unlink'] }, //超链接栏:增加超链接、取消超链接
30         {name: 'document', items: ['Source'] }, //源代码栏:查看源代码
31 
32         { name: 'tools', items: ['imagepaster', 'netpaster', 'Find', 'Smiley'] }//Word 粘帖代码+查找功能
33     ];
34 
35    // config.extraPlugins = 'videoplayer';
36 
37     config.extraPlugins += (config.extraPlugins ? ',videoplayer' : 'videoplayer');
38     //工具栏是否可以被收缩(即:右上角的三角符号是否显示)
39     config.toolbarCanCollapse = true;
40     //工具栏默认是否展开
41     config.toolbarStartupExpanded = true;
42     // 是否允许“拖拽改变尺寸”功能(即:右下角的三角符号是否显示)
43     config.resize_enabled = false;
44     //当输入:shift+Enter时插入的标签
45     config.shiftEnterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
46     //回车(Enter)时产生的标签
47     config.enterMode = CKEDITOR.ENTER_BR; //可選:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
48     //宽度
49     //config.width = "600px";
50     //高度
51     config.height = "300px";
52 
53     config.allowedContent = true;
54 
55     //保证word导入格式--问题就出现在配置参数导入配置问题--拍块砖20190501mark
56     config.pasteFromWordRemoveFontStyles = true;
57     config.pasteFromWordRemoveStyles = true;
58     //是否强制复制来的内容去除格式
59     config.forcePasteAsPlainText = false; //不去除
60 
61 
62     //默认样式
63     //config.skin :'kama'(默认)、'office2003'、'v2'
64     //config.skin = "bootstrapck";
65     //工具栏的位置
66     //config.toolbarLocation = 'top'; //可选:bottom
67     //改变大小的最大高度
68     //config.resize_maxHeight = 3000;
69     //改变大小的最大宽度
70     //config.resize_maxWidth = 3000;
71     //改变大小的最小高度
72     //config.resize_minHeight = 250;
73     //改变大小的最小宽度
74     //config.resize_minWidth = 750;
75     //当提交包含有此编辑器的表单时,是否自动更新元素內的资料
76     //config.autoUpdateElement = true;
77     //绝对目录还是相对目录,为空为相对目录
78     //config.baseHref = ''
79     //编辑器的z-index值
80     //config.baseFloatZIndex = 10000;
81 
82 
83 
84 
85     //以下为上传附件的相关配置,需配合ckfinder控件使用
86     //    var ckfinderPath = "/js";
87     //    config.filebrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html';//上传文件时浏览服务文件夹
88     //    config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Images';//上传图片时浏览服务文件夹
89     //    config.filebrowserFlashBrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹
90     //    config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
91     //    config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//上传图片按钮(标签)
92     //    config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上传Flash按钮(标签)
93 };

修改后导入word格式测试OK!

 

转载于:https://www.cnblogs.com/paul010/p/10799406.html

你可以使用CKEditor5的官方插件`@ckeditor/ckeditor5-import-export`来导入Word文档。首先,你需要安装该插件和其依赖项: ``` npm install --save @ckeditor/ckeditor5-import-export @ckeditor/ckeditor5-utils @ckeditor/ckeditor5-upload ``` 然后在你的Vue组件中导入CKEditor5和插件: ``` import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'; import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'; import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'; import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'; import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import ExportWordPlugin from '@ckeditor/ckeditor5-export-word/src/exportword'; import ImportWordPlugin from '@ckeditor/ckeditor5-import-export/src/importword'; Vue.component('ckeditor', { props: ['editorConfig', 'value'], template: '<div><textarea ref="textarea" :value="value" @input="update"></textarea></div>', data() { return { editor: null } }, mounted() { ClassicEditor.create(this.$refs.textarea, { plugins: [EssentialsPlugin, UploadAdapterPlugin, AutoformatPlugin, BoldPlugin, ItalicPlugin, ParagraphPlugin, ExportWordPlugin, ImportWordPlugin], toolbar: ['bold', 'italic', 'exportWord', 'importWord'], ...this.editorConfig }) .then(editor => { this.editor = editor; this.editor.model.document.on('change:data', () => { this.$emit('input', editor.getData()); }); }) .catch(error => { console.error(error); }); }, methods: { update(event) { this.editor.setData(event.target.value); } }, beforeDestroy() { this.editor.destroy().then(() => { this.editor = null; }); } }); ``` 然后就可以在你的Vue组件中使用CKEditor5,并导入Word文档了: ``` <ckeditor v-model="content" :editorConfig="{importWord: {converterOptions: {indentation: 4}}}" /> ``` 在上面的例子中,我们使用了`importWord`插件来导入Word文档,并使用了`editorConfig`属性来传递选项给插件。在`importWord`插件的选项中,我们指定了缩进为4个空格。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值