vue-cli-ckeditor5集成
产品功能:
粘贴Word文档内容,
批量传图,
自动上传网络图片,
导入Word,
导入Excel,
导入PowerPoint,
导入PDF,
在线演示:
UEditor 1x,
UEditor Plus,
TinyMCE 5,
Tinymce 3,
TinyMCE 4,
FCKEditor 2,
CKEditor 3x,
CKEditor 4,
KindEditor 3,
KindEditor 4,
wangEditor 3,
wangEditor 4,
xheditor,
相关资料:
解决方案,
产品介绍,
产品比较,
产品源代码,
授权生成器,
成功案例,
控件包,
订阅版价格,
政企版价格,
年费版价格,
OEM版价格,
源码版价格,控件部署(授权码),控件部署(正式包),控件升级,
源码编译:
ActiveX(x86),
ActiveX(x64),
NativeMessage,
macOS,
Linux(海光,兆芯),
arm(鲲鹏,飞腾),
mips(龙芯),
LoongArch(龙芯),
配置教程:
增加自定义参数,
自定义文件字段名称,
配置上传地址,
授权码配置,
文件名称生成规则,
提取图片地址,
图片地址增加域名,
设置缩略图,
图片格式和质量,
控件监听端口,
自定义头(Headers),
图片数量限制,
间距优化,
集成:
UEditor 1.5x,
CKEditor4.x,
CKEditor3.x,
FCKEditor 2.x,
KindEditor4.x,
KindEditor3.x,
UMEditor1.x,
UEditor 1.x,
UEditor 1.4x,
wangEditor3,
tinymce4x,
eWebEditor 9x,
eWebEditor 12.x,neditor,
tinymce 3x,
xhEditor,HDwik 5.0,
Drupal 7.34-ckeditor4.x,
Joomla-3.4.7-tinymce 4.x,
Joomla3x-ckeditor4.x,
WordPress,FoonSunCMS,KesionCMS V8,KesionCMS V9,
帝国CMS 7.2,
帝国CMS 7.5-UEditor,emlog,
PHPCMS V9,
Z-Blog,
Z-Blog-php-ueditor,
动易SiteFactory 4.7,
动易SiteFactory5.6,
动易SiteFactory6.2,
dedecms 5.7,
dedecms 5.7-ckeditor3x,
dedecms 5.7-ueditor,
vue-cli-ckeditor5x,
vue-cli-ueditor,
vue-cli-wangEditor,
vue-cli-tinymce5,vue-cli-quill,YouDianCMS 9.4.0,
DokuWiki,PHPMyWind-5.6,PbootCMS,question2answer,
视频教程:
解决方案,
动易SiteFactory 6.2整合,
动易SiteFactory 4.7整合,
动易SiteFactory 5.6整合,PbootCMS整合,
PHPCMS v9整合,
dedecms 5.7-ueditor整合,
dedecms 5.7-ckeditor3x整合,
帝国CMS-ueditor整合,
帝国CMS-ckeditor4x整合,
dokuwiki整合,
Windows控件安装,
macOS控件安装,
deb控件安装,
rpm控件安装,
ASP示例:
FCKEditor 2x,
CKEditor 3x,
CKEditor 4x,
CuteEditor 6x,
KindEditor 3x,
KindEditor 4x,
TinyMCE 3x,
TinyMCE 4x,
TinyMCE 5x,
UEditor1.4x,
UEditor 1.5x,
UMEditor 1x,
xhEditor 1x,
eWebEditor 9x,
wangEditor,NEditor,Summernote,
ASP.NET示例:
FCKEditor2x,
FCKEditor2x-ext,
CKEditor3x,
CKEditor3x-ext,
CKEditor4x,
CuteEditor 6x,
KindEditor 3x,
KindEditor 4x,
TinyMCE 3x,
TinyMCE 4x,
TinyMCE 5x,
UEditor1.4x,
UEditor1.5x,
UMEditor1x,xhEditor1x,
eWebEditor9x,
wangEditor,NEditor,Summernote,
SiteFactory 5.2,
SiteFactory 5.6,
JSP示例:
FCKEditor2x,
CKEditor3x,
CKEditor4x,
CuteEditor6x,
KindEditor3x,
KindEditor4x,
TinyMCE3x,
TinyMCE4x,
TinyMCE5x,
UEditor1.4x,
UEditor1.5x,
UMEditor1x,
xhEditor1x,
eWebEditor9x,
wangEditor,NEditor,Summernote,
PHP示例:
FCKEditor2x,
CKEditor3x,
CKEditor4x,
CuteEditor6x,
KindEditor3x,
KindEditor4x,
TinyMCE3x,
TinyMCE4x,
TinyMCE5x,
UEditor1.4x,
UEditor1.5x,
UMEditor1x,
xhEditor1x,
wangEditor,NEditor,Summernote,HKwik5.0,
WordPress,3.7.1,
WordPress插件包,
Joomla,3.4.7,
Drupal,7.34,
帝国CMS,7.x插件包,
PHPCMS v9插件包,
dedecms,v5.7插件包,
dedecms,v5.7-ueditor插件包,
DokuWiki插件包,PHPMyWind,5.6插件包,
Z-Blog,1.7x插件包,PbootCMS,3.x插件包,
vue-cli示例:
vue2-cli-CKEditor5,
vue2-cli-UEditor1.4x,
vue2-cli-UEditor1.5x,
vue3-cli-UEditor1.4x,
vue3-cli-UEditor1.5x,
vue2-cli-TinyMCE5,
vue3-cli-TinyMCE5,
vue3-cli-wangEditor,
vue2-cli-wangEditor,
vue2-cli-KindEditor,vue2-cli-Quill,
相关问题:WebSocket连接失败,ueditor整合后无法粘贴图片,域名未授权,ueditor粘贴部分文档样式不正确,无插件解决方案,
互联网应用:Word内容一键发布,如何转载到新浪博客,如何转载到网易LOFTER,
如何转载到CSDN博客,如何发布到媒介盒子,如何发布到365编辑器,
转载微信公众号图文,如何发布到博客园,
联系我们:
QQ:1269085759(技术),
QQ:3040217208(售后),
QQ:1085617561(商务),
微信:13235643658,
邮箱:1269085759@qq.com,
1085617561@qq.com,
qwl@ncmem.com,

视频教程:https://www.bilibili.com/video/BV1Cz4y1t7wx/?vd_source=d1843c7f8c164416779b5188178bad8c
示例项目:https://gitee.com/xproer/wordpaster-vue-ckeditor5
1.为ckeditor增加插件按钮
1.下载ckeditor5源码,注意:不是在npm中直接安装ckeditor5,在npm中直接安装的ckeditor5是已经打包好的编辑器,我们无法为其添加插件,必须下载源码添加好后再手动打包。
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
2.添加插件文件
将plugin下的插件复制到ckeditor5的目录中

导入插件
在ckeditor.js中导入插件
3.添加插件

添加到工具栏

# 构建,生成ckeditor.js,生成的ckeditor.js在build目录下
yarn build
执行命令后生成ckeditor.js

将打包好的ckeditor.js复制到项目中

2.复制layer,wordpaster目录,安装jquery

#通过命令安装jquery
npm install jquery
3.在组件中导入样式

代码:
import {WordPaster,WordPasterManager} from '../../static/WordPaster/js/w'
import '../../static/WordPaster/js/w.css'
import '../../static/layer-v3.1.1/layer/layer'
import '../../static/layer-v3.1.1/layer/theme/default/layer.css'
4.初始化wordpaster组件
配置posturl,

代码:
//初始化
WordPaster.getInstance({
PostUrl:"http://localhost:8891/upload.aspx",
ImageUrl:"http://localhost:8891{url}"
}).Load();
整合效果:

免费下载报价单和产品源代码:
订阅版:http://www.ncmem.com/webapp/wordpaster/purchase.aspx
政企版:http://www.ncmem.com/webapp/wordpaster/purchase.aspx?type=ent
年费版:http://www.ncmem.com/webapp/wordpaster/purchase.aspx?type=year
OEM版:http://www.ncmem.com/webapp/wordpaster/purchase.aspx?type=oem
源码版:http://www.ncmem.com/webapp/wordpaster/purchase.aspx?type=code