首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我们如何在ANGULAR 6的ckeditor中集成ckfinder?

在Angular 6中集成CKEditor和CKFinder,可以通过以下步骤完成:

步骤1:安装CKEditor和CKFinder 首先,需要安装CKEditor和CKFinder。您可以从CKEditor官方网站(https://ckeditor.com/ckeditor-4/download/)下载CKEditor的最新版本,并将其解压缩到您的项目目录中。同样,您可以从CKFinder官方网站(https://ckeditor.com/ckfinder/download/)下载CKFinder的最新版本,并将其解压缩到项目目录中。

步骤2:安装依赖 在项目目录中打开命令行界面,运行以下命令安装CKEditor所需的依赖:

代码语言:txt
复制
npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic

步骤3:配置Angular 打开app.module.ts文件,并在imports部分添加以下代码:

代码语言:txt
复制
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...
    CKEditorModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  public static readonly ckeditor = ClassicEditor;
}

步骤4:创建CKEditor组件 在你的项目中,创建一个CKEditor组件,例如editor.component.ts。在该组件中,添加以下代码:

代码语言:txt
复制
import { Component } from '@angular/core';
import * as Editor from './app.module';

@Component({
  selector: 'app-editor',
  template: '<ckeditor [editor]="Editor.ckeditor" (ready)="onReady($event)"></ckeditor>'
})
export class EditorComponent {
  public Editor = Editor;

  public onReady(editor: any) {
    editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
    );
  }
}

步骤5:配置CKFinder 打开CKEditor文件夹中的config.js文件,将以下代码添加到文件末尾:

代码语言:txt
复制
CKEDITOR.editorConfig = function(config) {
  // ...
  config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html';
  config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
  config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images';
  config.filebrowserImageUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
  // ...
};

步骤6:配置服务器 在项目根目录中创建一个名为server.js的文件,并添加以下代码:

代码语言:txt
复制
const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

步骤7:启动服务器和应用 在命令行界面中,运行以下命令启动服务器:

代码语言:txt
复制
node server.js

在另一个命令行界面中,运行以下命令启动Angular应用:

代码语言:txt
复制
ng serve

现在,您可以通过访问http://localhost:4200来查看集成了CKEditor和CKFinder的Angular 6应用。在CKEditor中,您将能够浏览、上传和插入文件和图像。

以上是在Angular 6中集成CKEditor和CKFinder的完整步骤。希望对您有帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

常见问题 - 构建文档 - ckeditor5文文档

但是,要在安装CKEditor 5时完全启用图像上传,你需要配置一个可用的上传适配器(Easy Image或CKFinder适配器)或实现并使用您自己上传适配器。...如何在一些框架中使用CKEditor 5(例如Angular,React)? 有关官方集成完整列表,请参阅“官方集成”部分。...如果您所选择框架官方集成尚不存在,请务必阅读“将CKEditor 5与JavaScript框架集成”指南。...CKEditor 5提供了丰富JavaScript API和随时可用构建,使您可以在任何需要框架中使用CKEditor 5。 随着时间推移,我们会逐渐提供更多官方集成。...包含未使用功能毫无意义,因为它们会增加编辑器大小并使网站变得更重。 这就是为什么我们不提供类似于我们CKEditor 4提供完整编辑器包原因。

5.5K40
  • Spring Boot集成CKEditor

    背景 项目中需要用到富文本编辑器,朋友推荐用CKEditorCKEditor可以和Spring mvc很好集成。...CKEditorCKFinder学习–整合SpringMVC介绍不错,内容很详细,可是我们是Spring boot,这就蛋疼了,加上CKeditor不熟悉,走了一些弯路,搞了好久,参考一些前辈文章...index.html引入ckeditor.js。...如果想定制样式在config.js中就可以,另外写一个js也可以,不过需要html需要引入,会覆盖掉config.js配置。 集成效果: ?...上传也可以集成CKFinder来实现,问题是CKFinder不是开源软件,对java支持也停留在2.6.2.1,所以上传方法自己写一下了。 3.上传效果 ? ? ? 本地路径下面的图片 ?

    2.3K30

    php版本CKEditor 4和CKFinder安装及配置方法图文教程

    本文实例讲述了php版本CKEditor 4和CKFinder安装及配置方法。...分享给大家供大家参考,具体如下: 下载并解压CKEditor 4和CKFinder CKEditor 4下载地址:https://ckeditor.com/cke4/builder,选择自定义版本,记得加上中文语言包...= '#AADC6E'; config.filebrowserBrowseUrl = '/CKEditorAndCKFinder/ckfinder/ckfinder.html' ; config.filebrowserImageBrowseUrl...在工具栏上显示 //config.format_tags = "p;h1;h2;h3;h4;h5;h6;pre;address;div"; //是否使用完整html编辑模式 使用,其源码将包含:<...true; //在清除图片属性框链接属性时 是否同时清除两边<a 标签 //config.image_removeLinkByEmptyURL = true; //一组用逗号分隔标签名称,显示在左下角层次嵌套

    2.7K10

    CKEditorCKFinder升级心得

    这几天把一个旧项目中fckeditor升级为ckeditor 3.2 + ckfinder 1.4.3 组合,下面是一些升级心得: 一、CKFinder若干问题 1.单独使用 ckfinder从原fckeditor...,让其从session取值,然后再把config.ascxBaseUrl改成下面这样 //BaseUrl = "/ckfinder/userfiles/"; BaseUrl = DynamicBaseUrl...; 最后在嵌入ckFinder页面类似这样处理: protected void Page_Load(object sender, EventArgs e) { Session["CKFinder...,qo);},改成{/*en.call(window,qo);*/}即可 二、与CKeditor整合 1.CKeditor设置 window.onload = function () { CKEDITOR.replace...Type=Image"上Type=XXX,即对应CKFinderConfig.ascxResourceType设置,而且ResourceType名称不能用中文名,否则在快速上传时无法上传到服务端

    2K70

    概览 - 框架 - 集成 - 构建文档 - ckeditor5文文档

    CKEditor 5是否与框架XYZ兼容? 是。 CKEditor 5与我们目前所听到每个JavaScript框架兼容。...如何在框架中使用CKEditor 5?...在检查如何将CKEditor 5与您框架集成时,您可以按照以下步骤操作: 官方WYSIWYG编辑器集成 到目前为止,有三个官方集成Angular 2+ React Vue.js 请参阅他们文档以了解如何使用它们...我们计划了时间来提供更多集成我们希望听到您想法,我们下一步应该做些什么。 与Electron兼容性 从版本11.0.0开始,CKEditor 5与Electron兼容。...如果没有,请搜索社区驱动集成。其中大部分都是在npm上提供。 到目前为止,有三种官方集成:React,Angular 2+和Vue.js. 检查是否存在官方集成

    2.8K30

    Laravel5.6框架使用CKEditor5相关配置详解

    “浏览服务器”按钮,用于实现对已上传文件管理,可以借助CKFinder实现,由于目前没有该需求,并且引入该功能会导致文件安全问题,本文采用了隐藏该按钮方案。...参考附录:ckeditor隐藏“浏览服务器”按钮 基本思路是从一下三个文件,查找关键字browseServer,通过设置display属性隐藏该按钮。...附录:ckeditor隐藏“浏览服务器”按钮 由于ckeditor”上传图片””上传文件””上传FLASH” 三个功能中都有“浏览服务器”按钮,所以我们要修改3个JS文件,先打开ckeditor文件夹...CTRL+S保存该JS文件,出去刷新下自己ckeditor,点击“链接”按钮后,你会发现“文件上传选项”浏览服务器按钮不见了。...最后弄掉上传FLASH浏览服务器按钮,打开ckeditor\plugins\flash\dialogs\flash.js文件,还是搜索”browseServer”第一次出现地方,如上图位置处插入双引号内内容

    2.9K40

    基于 Django 个人网站(3)

    增加可以选择语言代码块 因为 django-ckeditor-5 里面默认是没有可以选择语言代码块插件,所以我们需要自己定制这个插件,定制之前我们首先去 GitHub 把 django-ckeditor...-essentials/src/essentials'; import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter...输出有点多,我们不用管,只要没看到报错就行,接下来我们把 static\django_ckeditor_5\dist 目录下文件复制到 Python 模块 django-ckeditor-5 对应路径..._5\src 目录下文件复制 Python 模块 django-ckeditor-5 对应路径,在我这里是 D:\ANACONDA3\Lib\site-packages\django_ckeditor..._5_CONFIGS 变量,在 toolbar 对应列表添加值为 codeBlock 字符串元素,代码如下: CKEDITOR_5_CONFIGS = { 'default': {

    2.5K30

    推荐一个 SpringBoot 前后端分离系列项目,可以学习用 | 每日开源

    该项目是一个系列项目,目的是示范前后端分离开发模式:前端浏览器、移动端、Electron 环境各种开发模式;后端有两个版本:SpringBoot 版本和 SpringCloud 版本。...1、主要依赖 Angular 8.0 PrimeNG 7.1 Bootstrap 3.3.7 Echarts 3.4.0 ckeditor5-angular 1.0(目前有bug,不能兼容Angular8.0...,注释掉了CKEditor入口,等官方升级到8.0) 2、系列项目 NiceFish:这是 Angular 版本实现,前端基于 Angular 8.0 + PrimeNG 7.1.0。...已经完成了一些基本功能, SpringSecurity+OAuth2+JWT 实现SSO,文章、用户、评论等分页查询等。...3、部分截图 (列表页) (正文内容) (用户地区分布) (基本资料) 4 最后 该项目是一个系列教学项目,目标是全面示范 Angular 在浏览器、移动端、Electron 环境用法

    1.4K30

    最好用 6 款 Vue 3 富文本编辑器

    我试用了市面上所有主流富文本编辑器,筛掉长期不更新,bug 明显,社区活跃度低,功能单一编辑器,把最好、最有特点 6 款编辑器挑出来,分享给大家。...本文测评 6 款 Vue 富文本编辑器 TinyMCE - 富文本编辑器里 Word ,功能想不到丰富 tiptap - 多人在线实时协同编辑 CKEditor 5 - 开源免费可商用,行内编辑...CKEditor 5 有详细文档,从入门到自定义编辑器,再到如何与不同框架集成,写非常详细。 四....,开发者上手友好,支持非常多前端框架 VueJS、ReactJS、Angular、Meteor、Ember。...富文本编辑器总结 本文介绍了我自己用过 7 款 Vue.js 富文本编辑器特点,大家可以根据自己工作实际场景来对编辑器进行挑选。 九. 本文作者 蒋川,B 端数据开发。

    13.6K10

    14款web前端常用富文本编辑器插件

    作为一个技术人员,手上备上两款富文本编辑器还是很有用,指不定那个项目就要集成一个进去。 到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器用法都是有区别的。...它对IE6+和Firefox1.5+都有着非常良好支持。 功能齐全,界面美观,就是文档是英文,对开发人员英文水平有一定要求。...6CKEditor 网址:https://ckeditor.com/ckeditor-5/demo/ CKEditor官方版是一款专业专业在线文字编辑器,软件支持各种不同浏览器,可以让用户们轻松在线编辑...,CKEditor5官方版软件体积非常小巧,使用起来也十分方便快捷,还能与不同编程语言相结合,是大家编辑网页代码必备工具。...该编辑器可以直接集成Angular,react和vue.js框架,该编辑器还同时支持Markdown和富文本。

    17.5K41

    13个顶级免费所见即所得文本编辑器工具

    它还可以运行在许多不同浏览器上,并能很好地与大多数前端框架,reat,vue,angular......你可以使用CDN直接嵌入到你HTML页面......。...目前它有两个版本并行运行CKEditor4和CKEditor5,根据不同使用目的,你会选择适合自己编辑器。...它允许你以多种方式设置它,通过npm、使用CDN......。我喜欢它是,除了详细说明,还有一个程序,通过代码让我们自由选择哪些工具附加到Jodit Editor。...它仅包含编辑器所需基本实用程序,因此仅约28kB,这将有助于你网站得到优化。同时如果我们想要添加其他功能,为了优化编辑,MediumEditor还提供了额外外部实用工具,定期更新。...我还发现了如何设置,添加或删除程序函数文章…都是非常细致

    5.8K00

    新内容 - 构建文档 - ckeditor5文文档

    增强用户体验 ckeditor5努力打造无缝、专注编辑体验让用户去专注于创作内容。 更好图片展示 插入图片到内容是非常直观,在用户体验上隐藏了所有的技术方面(上传,重置大小)。...增强经典编辑器 对于CKEditor 5,我们重新设计了“盒子”编辑器概念。 全新工具栏 当用户向下滚动页面时,工具栏现在总是可见。...更少特性 == 更好内容 我们专注于创建用于编写高质量内容工具。 同时,我们简化了编辑器与系统集成我们认为在以前编辑器版本我们有太多功能和配置。...Letters是使用CKEditor 5强大协作功能应用程序示例。 ? 更现代化 CKEditor 5使用了ECMAScript 2015(也称为ES6)提供强大模块功能完全重写。...它提供了所有必要工具,可以轻松地将其与现代应用程序和技术集成

    3.2K40

    英诗派精致版配置参数_自动舒适版是什么配置

    大家好,又见面了,我是你们朋友全栈君。 1. 下载 CKFinder官网下载地址提供了PHP,ASP, Java等不同下载版本。 2....--根据ckfinder文件所在文件夹决定,我ckfinder放到webcontent下view文件夹下--> /view/ckfinder/core/connector/java/connector.java...--根据ckfinder文件所在文件夹决定,我ckfinder放到webcontent下view文件夹下--> /view/ckfinder/core/connector/java/connector.java...附录 去除CKFinder界面水印方法 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    29560

    vue组件 - 框架 - 集成 - 构建文档 - ckeditor5文文档

    在Vue.js应用程序中使用CKEditor 5最简单方法是选择一个富文本编辑器构建,并将其简单地传递给Vue.js组件配置。 在快速入门部分阅读有关此解决方案更多信息。...此外,您可以从源集成CKEditor 5,这是一个更加灵活和强大解决方案,但需要一些额外配置。 该组件与Vue.js 2.x兼容。...有两种方法可以做到这一点: 直接script引入 导入ES6模块 (可选)您可以在本地使用该组件。 直接引入script 这是在项目中开始使用CKEditor最快方法。...确保可以访问CKEditor和ClassicEditor,具体取决于集成方案:直接脚本包含或ES6模块导入。......       };     }   } 从源代码使用CKEditor 从源代码集成富文本编辑器允许您使用CKEditor 5 Framework全部功能。

    5.5K20

    揭秘程序员眼中 Vue 与 Angular | 码云周刊第 32 期

    项目名称:基于 Vue.js UI 组件库 项目简介:iView 是一套基于 Vue.js UI 组件库,主要服务于 PC 界面的后台产品。...项目名称: 基于 angular 后台管理 项目简介:这是一个基于 Angular 1.6.4(最新版)管理后台模板,用于演示 Angular 1.x 最新版本用法,纯前端无后台。...整套组件借鉴了 UI Bootstrap 等开源组件写法,主要对指令进行了自己封装,我们希望通过 angular 指令编写一套类似 flex 声明式 UI 组件,使得页面代码更加简洁,可读性更强...;双向数据绑定脏值检查优化;嵌套路由;构造函数依赖注入等等。...,highcharts,ckeditor,高德地图,fullcalendar 等等)。

    2K50
    领券