下载之家_微软原版Msdn Win11正式版 64位系统下载

当前位置:首页软件下载应用软件详细列表

CKEditor V4.4.3中文版

CKEditor V4.4.3中文版

软件大小:1.06 MB软件语言:简体中文授权方式:免费软件

更新时间:2022-09-14运行环境:Win ALL

  • 软件介绍
  • 下载地址
  • 同类推荐
  • 相关文章

CKEditor中文版可以说是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。CKEditor中文版是Fckeditor html编辑器的一个升级版本,用过 FCKeditor 的站长都知道,由于其打开速度的不理想把 FCKeditor 用于网站做为在线编辑器并不是明智的选择,而我们的CKEditor中文版正好弥补了这一缺陷,CKEditor中文版是由Frederico Knabben.针对网络而开发的在线编辑器。CKEditor中文版能够帮助用户对HTML等代码进行快捷的编写,而且还可以在线编译功能,让用户看到自己编写的代码所产生的效果,CKEditor中文版支持IE8以上、Netscape、Mozilla等多种浏览器。遵循LGPL版权,支持多种脚本语言调用,如asp、asp.net、php、pl、jsp 等,是目前市场使用广泛的一款在线HTML编辑器之一。CKEditor中文版体积非常小巧,使用起来也十分方便快捷,还能与不同的编程语言相结合,是大家编辑网页代码的必备工具。CKEditor中文版包括粘贴来自Microsoft Word的图像,Microsoft Edge的剪贴板增强功能和一个全新的气球工具栏插件。

CKEditor V4.4.3中文版

CKEditor中文版软件特色

1、质量优秀

多年的连续测试驱动开发(5000多个测试)和代码同行评审,让一个成熟的产品拥有最高的可靠性。还有专用的核心开发团队,以及活跃的开源社区支持的维持。

2、可访问性

符合最新的Web可访问性标准(WCAG 2、508节,WAI-ARIA)同时使您能够创建可访问的内容,以及内置的辅助检查。

3、可定制性

自定义编辑器的每一个细节,定制您的需求,使用其强大的开发者友好的文档和丰富的JavaScript API。

4、创新思维

不断引领创新领域的丰富文本编辑。把你的内容创作过程由Word粘贴等独特功能的全面控制,引申到先进的内容过滤,控件,自定义HTML格式以及更多。

CKEditor中文版使用说明

1. 下载CKEditor5库

官方教程有CDN,npm, Zip download三种获取方式,但这三种方式获取的都是打包精简之后的版本,有一些文本编辑特性并没有,如对齐方式、字体大小等。如要更灵活的根据自己的需求添加或删减编辑器的特性,建议从零度软件园中下载完整版

2. 开始使用

目录ckeditor5-build-classic-masterbuild下的ckeditor.js是打包好的库,可以直接引用去使用。 新建一个editor.html,基本使用代码如下:

3. 定制自己的CKEditor5: 增删特性

虽然build目录下的ckeditor.js可以直接使用,但是特性较少。下面开始定制自己的CKEditor5(注:本人对webpack打包不是很熟悉,本章节可能有问题,在打包使用过程遇到了问题,但用一些方法解决了)。

首先需要的工具: npm,webpack;

了解文件:webpack.config.js,package.json,build-config.js,src/ckeditor.js;

ckeditor5-build-classic目录结构.png

webpack.config.js文件定义了打包的规则,package.json定义了用的包;build-config.js定义CKEditor5特性,src/ckeditor.js也是定义定义CKEditor5特性,似乎build-config.js和src/ckeditor.js只有一个就够了,我使用的是src/ckeditor.js。

CKEditor V4.4.3中文版

如何上传图片

1. 三种方法概述

官方教程中上传图片有三种方法(1):使用CKEditor自带云服务,图片上传到CKEditor服务器;(2):使用ckfinder框架,在初始化CKEditor时,需要定义 ckfinder的uploadUrl参数,参数为上传到自己服务器的地址;(3)自己写上传功能,定义UploadAdapter,实现upload()和 abort() 方法,并对UploadAdapter进行调用。

方法1大家几乎不用,方法3要自己写上传功能,网上有个教程写得不是很清楚,我也没有很看懂,还存在疑问。代码如下:

class UploadAdapter {

constructor(loader) {

this.loader = loader;

}

upload() {

return new Promise((resolve, reject) => {

const data = new FormData();

data.append('upload', this.loader.file);

data.append('allowSize', 10);//允许图片上传的大小/兆

$.ajax({

url: '/QingXiao/Article/uploadArticleImage4',

type: 'POST',

data: data,

dataType: 'json',

processData: false,

contentType: false,

success: function (data) {

if (data.res) {

resolve({

default: data.url

});

} else {

reject(data.msg);

}

}

});

});

}

abort() {

}

}

// 加载了适配器

editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{

return new UploadAdapter(loader);

};

2. 上传图片方法2详解

网上有网友遇到用方法2上传图片,遇到一个奇葩问题:图片明明已经上传到服务器,返回数据也是按照所谓教程的{"default":"url"}格式。可是依然会报错。报错如下:

CKEditor V4.4.3中文版

我也遇到了这个问题,迟迟没有解决,直到今天看了CKEditor中ckfinder的源码才发现问题。阅读ckeditor5-adapter-ckfinder发现,ckfinder也定义了UploadAdapter,同样实现了upload()和 abort() 方法。而问题就出现在upload()方法中。下面贴出upload()方法的源码:

upload() {

return new Promise( ( resolve, reject ) => {

this._initRequest();

this._initListeners( resolve, reject );

this._sendRequest();

} );

}

_initListeners( resolve, reject ) {

const xhr = this.xhr;

const loader = this.loader;

const t = this.t;

const genericError = t( 'Cannot upload file:' ) + ` ${ loader.file.name }.`;

xhr.addEventListener( 'error', () => reject( genericError ) );

xhr.addEventListener( 'abort', () => reject() );

xhr.addEventListener( 'load', () => {

const response = xhr.response;

if ( !response || !response.uploaded ) {

return reject( response && response.error && response.error.message ? response.error.message : genericError );

}

resolve( {

default: response.url

} );

} );

// Upload progress when it's supported.

/* istanbul ignore else */

if ( xhr.upload ) {

xhr.upload.addEventListener( 'progress', evt => {

if ( evt.lengthComputable ) {

loader.uploadTotal = evt.total;

loader.uploaded = evt.loaded;

}

} );

}

}

从上面源码中可以发现,ckfinder请求之后的返回体response应该不为空,且还要包括uploaded和url字段,所以返回数据实际格式应该是{"uploaded":1,"url":"/"},如此就不会出错了。所以,返回的数据并不是按照“教程“”说的那样。

CKEditor中文版常见问题

什么是CKEditor5?

CKEditor5是一款富文本编辑器,可让您在网页或在线应用程序中编写内容。

查看CKEditor5SDK,这是一个大量的在线样本,旨在帮助您熟悉所有编辑器功能,并使实现和配置过程更加轻松。如果您仍然有疑问,您可以下载任何CKEditor5软件包,并直接在您的网站或应用程序中测试它们。

CKEditor5是否支持我的语言?

CKEditor5现在有60多种语言可供选择,默认情况下它以用户的语言显示。