• 相思湖边包鱼粽 孝心满满全家欢 2019-05-26
  • 机场周边严查违规网约车 2019-05-26
  • 紫光阁中共中央国家机关工作委员会 2019-05-25
  • 习近平关于生态环境保护的十个精妙论述 2019-05-25
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-24
  • 浙江开化一孕妇车上产子 的哥超速救人被免于处罚 2019-05-24
  • 【视频】致敬父亲节—父爱如山 一路相伴 2019-05-23
  • 光明日报:救命药岂能一降价就断货 2019-05-23
  • 准确的说,日本是美国的殖民地国家。 2019-05-22
  • 网友辣评:伊朗守护亚洲荣光 摩洛哥乌龙小哥让人心疼 2019-05-22
  • 光明网卫生编辑室招聘3名编辑 2019-05-22
  • 页岩气资源税减征30% 2019-05-21
  • 中考TIPS 带证防雨留意天气变化 2019-05-21
  • 县名解析晋城高平市地名来历 2019-05-21
  • 第523期:土鸡蛋VS洋鸡蛋,哪个好?怎样挑? 2019-05-21
  • 您的位置:香港赛马会手机料编程开发编程其它CKEditor5(富文本编辑器) v11.2.0 中文版

    香港赛马会赛马直播:CKEditor5(富文本编辑器) v11.2.0 中文版CKEditor5(富文本编辑器) v11.2.0 中文版

    香港赛马会手机料 www.zdidy.tw 软件大?。?/span>1004KB

    软件官网:香港赛马会手机料

    用户评分:

    软件类型:国外软件

    运行环境:Win All

    软件语言:简体中文

    软件分类:编程其它

    更新时间:2019/3/16

    授权方式:免费软件

    插件情况:无 插 件

    平台检测 无插件 360通过 腾讯通过 金山通过 瑞星通过
    编程工具
    CKEditor是一款口碑非常不错的html文档编辑软件,这款软件支持多款浏览器,能够让用户快速实现html在线编辑等操作。同时,该软件的安装方法极其简单,用户只需要将解压出来的文件放在网站CKEditor文件夹里即可。

    CKEditor

    【基本介绍】

    CKEditor 是 Fckeditor html编辑器了一个升级版本,用过 FCKeditor 的站长都知道,由于其打开速度的不理想把 FCKeditor 用于网站做为在线编辑器并不是明智的选择,ckeditor正好弥补了这一缺陷,ckeditor是由Frederico Knabben.针对网络而开发的在线编辑器。


    【官方介绍】

    CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。CKEditor5支持IE8以上、Netscape、Mozilla等多种浏览器。遵循LGPL版权,支持多种脚本语言调用,如asp、asp.net、php、pl、jsp 等,是目前市场使用广泛的一款在线HTML编辑器之一。


    【特色介绍】

    1、质量优秀
    多年的连续测试驱动开发(5000多个测试)和代码同行评审,让一个成熟的产品拥有最高的可靠性?;褂凶ㄓ玫暮诵目⑼哦?,以及活跃的开源社区支持的维持。

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

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

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


    【功能介绍】

    1、高级文本格式
    从基本的格式使用预定义的文本格式,文本样式和创建数学公式或漂亮的代码片段。

    2、完整的多语言支持
    本地化为超过60种语言,ckeditor支持从右到左的文本方向以及文本选择分配一个特定的语言。

    3、完全访问
    ckeditor符合最新的Web可访问性标准(WCAG2.0,WAI-ARIA)可以访问的内容,由于内置的辅助功能检查器创建。

    4、拼写检查
    作为你的类型,看到正确的拼写错误而打字。拼错的单词,你可以简单地选择替换不正确的单词建议。

    5、窗口小部件
    创新CKEditor功能使定制内容丰富的实体如标题图片创作,通过将多个HTML元素的代码片段或内容模板。

    6、干净的代码
    CKEditor创建干净的代码,符合标准和可读性。你也可以包括您的自定义格式设置规则来完全控制你的HTML输出。

    7、高级粘贴
    此功能使粘贴的内容直接从微软Word和保持原有的内容,用干净的HTML输出格式。

    8、添加存储库和生成器
    下载一个完美的定制的在线丰富的文本编辑器使用在线生成器,并轻松地集成额外的插件从库中。

    9、易于集成
    CKEditor通过添加一个脚本到您的网页。现成的zip安装包之间选择,你最喜欢的包管理器或CDN版本。

    10、丰富的API
    强大和广泛的接口,让您在运行时与编辑器交互,创建自定义功能,并将内容随意操作。

    11、完全可定制的
    自定义CKEditor的每一个方面(如工具栏、调色板、皮肤、对话框、菜单、数据解析、造型、等)和调整你的需要。

    12、先进的内容过滤
    限制和调整输入数据以对编辑器实例中允许的内容完全控制。


    【使用方法】

    一、基本使用方法

    1.下载CKEditor5库
    在起点软件园下载该软件的压缩包

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

    <divname="content"id="editor">
    <p></p>
    </div>
    <scriptsrc="./ckeditor.js"></script>
    <script>
    vardata;
    ClassicEditor.create(document.querySelector('#editor'),{
    ckfinder:{
    uploadUrl:'/'
    }
    }
    ).then(editor=>{
    window.editor=editor;
    data=editor.getData();
    console.log(data);
    })
    .catch(error=>{
    console.log(error);
    });
    </script>

    3.定制自己的CKEditor5:增删特性
    虽然build目录下的ckeditor.js可以直接使用,但是特性较少。下面开始定制自己的CKEditor5(注:本人对webpack打包不是很熟悉,本章节可能有问题,在打包使用过程遇到了问题,但用一些方法解决了)。
    首先需要的工具:npm,webpack;
    了解文件:webpack.config.js,package.json,build-config.js,src/ckeditor.js;


    webpack.config.js文件定义了打包的规则,package.json定义了用的包;build-config.js定义CKEditor5特性,src/ckeditor.js也是定义定义CKEditor5特性,似乎build-config.js和src/ckeditor.js只有一个就够了,我使用的是src/ckeditor.js。
    打包之后的工程上传的Github,工程地址:https://github.com/Taoli96/CKEditor。

    二、上传图片的方法

    1.三种方法概述
    官方教程中上传图片有三种方法
    (1):使用CKEditor自带云服务,图片上传到CKEditor服务器;
    (2):使用ckfinder框架,在初始化CKEditor时,需要定义ckfinder的uploadUrl参数,参数为上传到自己服务器的地址;
    (3)自己写上传功能,定义UploadAdapter,实现upload()和abort()方法,并对UploadAdapter进行调用。
    方法1大家几乎不用,方法3要自己写上传功能,网上有个教程写得不是很清楚,我也没有很看懂,还存在疑问。代码如下:

    classUploadAdapter{
    constructor(loader){
    this.loader=loader;
    }
    upload(){
    returnnewPromise((resolve,reject)=>{
    constdata=newFormData();
    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)=>{
    returnnewUploadAdapter(loader);
    };

    2.上传图片方法2详解
    网上有网友遇到用方法2上传图片,遇到一个奇葩问题:图片明明已经上传到服务器,返回数据也是按照所谓教程的{"default":"url"}格式??墒且廊换岜ù?。报错如下:


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

    upload(){
    returnnewPromise((resolve,reject)=>{
    this._initRequest();
    this._initListeners(resolve,reject);
    this._sendRequest();
    });
    }
    _initListeners(resolve,reject){
    constxhr=this.xhr;
    constloader=this.loader;
    constt=this.t;
    constgenericError=t('Cannotuploadfile:')+`${loader.file.name}.`;
    xhr.addEventListener('error',()=>reject(genericError));
    xhr.addEventListener('abort',()=>reject());
    xhr.addEventListener('load',()=>{
    constresponse=xhr.response;
    if(!response||!response.uploaded){
    returnreject(response&&response.error&&response.error.message?response.error.message:genericError);
    }
    resolve({
    default:response.url
    });
    });
    //Uploadprogresswhenit'ssupported.
    /*istanbulignoreelse*/
    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":"/"},如此就不会出错了。所以,返回的数据并不是按照“教程“”说的那样。


    【常见问题】

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

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

    精品软件

    电脑编程软件合集

    电脑编程软件合集

    相信大家都知道程序员这个职业不管走在那都吃香,但是想成为一名优秀合格的程序员必先苦其心志,劳其头脑,市场上很多软件都是由万能的程序猿设计的,如果你是一个正在接触或想要接触编程的小伙伴,不妨试试小编推荐的这几款编程软件,说不定对你有所帮助呢!

    用户评论

    (您的评论需要经过审核才能显示)0人参与,0条评论
    140

    最新评论

    还没有评论,快来抢沙发吧!

    请简要描述您遇到的错误,我们将尽快予以修订

    返回顶部
  • 相思湖边包鱼粽 孝心满满全家欢 2019-05-26
  • 机场周边严查违规网约车 2019-05-26
  • 紫光阁中共中央国家机关工作委员会 2019-05-25
  • 习近平关于生态环境保护的十个精妙论述 2019-05-25
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-24
  • 浙江开化一孕妇车上产子 的哥超速救人被免于处罚 2019-05-24
  • 【视频】致敬父亲节—父爱如山 一路相伴 2019-05-23
  • 光明日报:救命药岂能一降价就断货 2019-05-23
  • 准确的说,日本是美国的殖民地国家。 2019-05-22
  • 网友辣评:伊朗守护亚洲荣光 摩洛哥乌龙小哥让人心疼 2019-05-22
  • 光明网卫生编辑室招聘3名编辑 2019-05-22
  • 页岩气资源税减征30% 2019-05-21
  • 中考TIPS 带证防雨留意天气变化 2019-05-21
  • 县名解析晋城高平市地名来历 2019-05-21
  • 第523期:土鸡蛋VS洋鸡蛋,哪个好?怎样挑? 2019-05-21