如何将CKEditor 4插件安装到angular
CKEditor 4是一个功能强大且灵活的富文本编辑器，适用于Web应用程序的开发。它提供了丰富的编辑功能，可以轻松集成到Angular项目中。下面是将CKEditor 4插件安装到Angular的步骤：
- 在Angular项目中安装CKEditor 4：可以通过npm包管理工具在项目中安装CKEditor 4。打开终端，并进入到Angular项目的根目录，运行以下命令安装CKEditor 4：
npm install ckeditor4-angular --save- 配置CKEditor 4模块：在Angular项目中，需要将CKEditor 4模块添加到应用的NgModule中。打开app.module.ts文件，并在imports部分中添加以下代码：
import { CKEditorModule } from 'ckeditor4-angular';
@NgModule({
declarations: [
// ...
],
imports: [
// ...
CKEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- 使用CKEditor 4组件：在Angular项目中，可以使用CKEditor 4组件来渲染富文本编辑器。在组件的模板文件（例如app.component.html）中添加以下代码：
<ckeditor [(ngModel)]="editorData" [config]="config"></ckeditor>在组件的类文件（例如app.component.ts）中添加以下代码：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public editorData: string = '<p>Hello, CKEditor 4!</p>';
public config = {
// CKEditor 4配置
};
}这样就完成了将CKEditor 4插件安装到Angular项目的步骤。你可以根据自己的需求配置CKEditor 4的各项功能和选项，以及使用CKEditor 4提供的API进行更多的操作。
关于CKEditor 4的更多详细信息，你可以参考腾讯云提供的产品介绍页面： CKEditor 4 - 腾讯云
注意：本答案只提供了在Angular项目中安装CKEditor 4插件的步骤，未提及其他云计算品牌商的相关产品和链接。
相关·内容
如何将代码片段添加到yii 2中的2amigos Ckeditor
<?= $form->field($model, 'content')->widget(CKEditor::className(),[
'editorOptions' => [
'preset' => 'full',
'inline' => false,
],
]) ?>
浏览 0提问于2015-08-01得票数 0
1回答
我是Angular4的新手
我想将CKeditor集成到Angular4中
因为我遵循 url，但是它是用于角2，而不是在角4中工作。
我在那儿查过了
System.config({
"map": {
"ng2-ckeditor": "npm:ng2-ckeditor",
},
"packages": {
"ng2-ckeditor": {
"main": "lib/index.js",
"defaultExtension": "js&
浏览 6提问于2017-09-01得票数 2
回答已采纳
我想将添加到CKEditor组件中。我使用"ckeditor4-react": "^1.1.0"，这是我的组件：
import React, { useState, FunctionComponent } from "react";
import CKEditor from "ckeditor4-react";
export interface CreateNewArticleProps {}
const CreateNewArticle: FunctionC
浏览 4提问于2020-12-13得票数 3
回答已采纳
1回答
我正在将CKEditor集成到我们正在构建的应用程序中。我们一直使用TinyMCE，但是当在单个页面上添加大量内联编辑器(我的意思是最多100个)时，整个应用程序要么崩溃，要么需要超过10秒的时间加载。切换到CKEditor 4大大提高了性能，但是..。
由于某种原因，基本的“字体颜色”按钮在默认情况下不可用.
在CKEditor 4和5中，插件并不像几乎所有其他库那样“只是”易于使用的npm包，它非常不方便(低估)。文档也严重缺乏，在没有解决方案的情况下，您很快就有15个打开的选项卡。
我遵循了“与角度的集成”指南，这实际上是明确的，但没有提到添加自定义插件。，但这不再有效，因为angula
浏览 1提问于2019-07-10得票数 0
1回答
我想在角度上使用Ckeditor和录音机。
我以这种方式使用：
模块:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { AppComponent
浏览 5提问于2021-06-03得票数 0
我正在尝试在我的angular项目中安装ckeditor。我已经尝试过通过npm安装ckeditor4-angular，但无法找到添加像WIRIS mathType这样的插件的方法。请告诉我，如何在我的angular项目中安装编辑器，以及安装插件？
浏览 12提问于2019-12-07得票数 5
我正在尝试将一个公式插件(如“公式”或“公式”)集成到TinyMCE或CKEditor中，但没有成功。我正在遵循他们的文档页面上找到的步骤，但没有锁定。我尝试了所有的技术，但无论我做什么，tinymce和ckeditor组件都看不到我注入的插件。无论我尝试添加什么插件，问题都仍然存在。它只能看到几个默认的插件。
注意: tinymce和ckeditor插件被添加为ng2-tinymce和ng2-ckeditor。
我能举个例子说明如何在Angular 4项目的其中一个组件中添加新插件吗？我正在使用这个ngx-admin模板：
谢谢！
浏览 11提问于2017-12-29得票数 0
我正在尝试将CKEDITOR 5集成到我的角8项目中。我已经用额外的插件以及ClassicEditor和InlineEditor创建了自定义超级构建(使用本指南：)。
我已经将CKEditorModule导入到共享模块文件中。下面是我的组件文件：
import { Component, OnInit } from '@angular/core';
import * as CKEDITOR from '@ckeditor/ckeditor5-build-classic';
@Component({
templateUrl: './cke5.htm
浏览 7提问于2019-12-27得票数 8
我需要在Angular中使用autocomplete CKEditor插件。我正在使用ng2-ckeditor来使用带有Angular、Angular 6的CKEditor，以及带有我需要的插件(包括autocomplete和textMatch)的自定义本地发行版CKEditor 4.10。当输入#字符时，应显示自动完成的项目列表。 这是ckeditor组件的html片段 <ckeditor #myCKEditor formControlName="ckeditorControl" [config]="ckeditorConfig"
debounce
浏览 18提问于2019-05-27得票数 0
回答已采纳
我已经按照CKEditor 4文档创建了一个基本插件，但它似乎没有在我的react应用程序中注册。我已经添加了插件文件结构，并在节点模块中添加了plugin.js和图标。如何将其传递给ckeditor4-react中的config？ import logo from './logo.svg';
import './App.css';
import CKEditor from 'ckeditor4-react';
function App() {
return (
<div className="App"&g
浏览 107提问于2020-12-17得票数 0
我做到了: heroku插件:安装git://github.com/galetahub/rails-ckeditor.git
并得到了
Could not initialize rails-ckeditor: uninitialized constant ActiveSupport
Are you attempting to install a Rails plugin? If so, use the following:
Rails 2.x:
script/plugin install git://github.com/galetahub/rails-ckeditor.git
Rail
浏览 6提问于2011-03-06得票数 0
回答已采纳
1回答
我正在尝试使用下面的angular ckeditor扩展-
https://github.com/lemonde/angular-ckeditor
更新:已经在应用程序模块中注入了'ckeditor‘
我将以下指令插入到我的部分html中-
<div ckeditor="data_options" ng-model="note.note_data" ready="onReady()"></div>
并将以下配置选项添加到控制器-
$scope.data_options = {
lang: &
浏览 2提问于2016-10-23得票数 0
我试图在我的角应用程序中设置CKEditor，方法是遵循中的步骤
在以下文件中，“获取错误”无法找到模块“@角/核心”：ckbutton.directive.d.ts、ckeditor.component.d.ts、ckgroup.directive.d.ts
属地
"dependencies": {
"@angular/common": "~5.2.4",
"@angular/compiler": "~5.2.4",
"@angular/core": "~5.2.4",
"
浏览 3提问于2018-02-12得票数 4
我有一个Angular2 html，其中包括一个作为子级的ckeditor：
<div [class.hover-toolbar]="hideToolbar">
<ckeditor
[config]="{
toolbar: toolbar,
readOnly: isReadOnly,
height: fieldHeight,
width: auto
}"
浏览 1提问于2017-11-28得票数 0
1回答
遗憾的是，我无法将字体系列功能添加到CKEditor的工具栏中。
我在控制台中得到了以下错误：
工具条视图-项不可用:所请求的工具栏项不可用。阅读更多：
{name: "fontFamily"}
下面是我的项目的样子：
app.module.ts
...
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { CkeditorComponent } from './ckeditor/ckeditor.component';
...
@NgModule(
浏览 0提问于2018-11-07得票数 2
我在AngularJS应用程序中使用CKEditor 4。我有一个针对CKEditor的指令，用于设置编辑器选项 angular.module('someMod', []).directive("ckeditor", CKEditor).factory('someFactory',someFactory);
...etc...
CKEditor.$inject = ["someFactory"];
function CKEditor(someFactory) {
...and in the link function the e
浏览 18提问于2019-05-30得票数 0
回答已采纳
在angular 2(通过)，我尝试使用，它不是ckeditor cdn提供的。
这就是我尝试如下的原因：
import { CKEditorModule } from 'ng2-ckeditor';
declare var CKEDITOR:any;
CKEDITOR.plugins.addExternal('showprotected', '../assets/ckeditor-showprotected-plugin', 'plugin.js');
这是我的CKEDITOR_CONFIG
private CKEDITOR_C
浏览 11提问于2017-07-14得票数 0
2回答
我想覆盖CKeditor中的图像插件。当我右击一个图像时，我想打开我自己的对话框。谁能给我指个正确的方向。我已经完成了一个从CKeditor站点复制的基本插件--如何将其替换为图像编辑器。
CKEDITOR.plugins.add('myplugin',
{
init: function (editor) {
editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));
if (editor.contextMenu) {
浏览 1提问于2012-10-22得票数 1
1回答
我正在尝试添加一个自定义工具栏到我的Angular-Ckeditor工具栏中。
详细信息：
角度: 1.5.8
angular-ckeditor : 1.0.3
ckeditor: 4.7.1
angular-ckeditor已经9个月没有更新了，我怀疑它只是不支持彩色文本和彩色背景，但我不确定。
下面是editorOptions的设置方式：
app.service('EditorOptions', function() {
this.basic = {
toolbar: [
{ name: 'clipboard', items: ['U
浏览 2提问于2017-07-12得票数 0
2回答
我有一些为基本ckeditor4制作的自定义插件，我想将它们添加到ckeditor4-vue中，用于我正在处理的一个新项目。我应该如何将它们与vue ckeditor集成？ 我已经有一个来自我的原始工作的配置文件，调用插件，以及它们如何集成到工具栏中，如果这有帮助的话。 提前感谢！
浏览 143提问于2020-07-08得票数 1
我试图在工具栏配置中添加一些指定的按钮，但其中一些似乎丢失了。甚至看起来它们都没有安装，但是： app.module.js： import { CKEditorModule } from 'ckeditor4-angular';
...
imports: [
...
CKEditorModule,
...
] packaje.json "dependencies": {
"ckeditor4-angular": "^1.0.1",
} component.js public editorType:
浏览 25提问于2020-04-29得票数 0
回答已采纳
我正在使用作为一个富文本编辑器。
我希望能够将文章上传到包含相同请求中的文本和图像的服务器。
我已经检查了图片上传插件的CKEditor文档，并按照文档中提到的那样做了，但它仍然对我不起作用。
这是我的package.json文件：
{
"name": "cbms",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start":
浏览 0提问于2019-02-25得票数 4
回答已采纳
1回答
角2负载CKEDITOR
、、、
好吧，对于我的生活，我不知道如何加载角2的CKEDITOR。
我已经跑了
"typings install dt~ckeditor --global --save"
ckeditor位于/lib/ckeditor/ckeditor.js，所以在我的地图部分的system.config.js中：
"CKEDITOR": 'lib/ckeditor/ckeditor.js'
现在我不知道如何将它导入到一个角2组件中。
我添加了一个参考标签(/ <reference...>)，但失败了。我完全被困住了
编辑
这是我的system.confi
浏览 0提问于2016-07-21得票数 1
需要帮助将CKEditor添加到我的角4(“@ar角/核心”："^4.2.4")组件中。
如果我将<script src="https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js"></script>添加到index.html中，这将有效，但是库非常重，这就是为什么我尝试通过组件加载源代码脚本的原因。
我在所有的生命周期挂钩上尝试了安全的标记槽管道。如果向构造函数添加安全标记，那么脚本将加载源代码，但是CKEditor库无法在DOM中看到源代码。
任何帮助都是非常感谢的。
源代码:c
浏览 3提问于2017-09-08得票数 2
回答已采纳
3回答
我遵循了 of ckeditor5中提到的文本对齐插件的安装步骤。
添加了对齐插件如下
从'@ckeditor/ckeditor5-alignment/src/alignment'；ClassicEditor .create导入对齐(this.element.nativeElement，{ plugins:对齐，工具栏：“对齐”})
我得到了以下错误：
TypeError: Cannot read property 'getAttribute' of null
at IconView._updateXMLContent (icon
浏览 1提问于2018-05-29得票数 3
我正在尝试安装一个名为的插件，用于在Angular 8的CKEditor5中输入LaTex
。如何在CKEditor 5中添加插件和工具栏
我尝试在CKEditor标签中添加配置，并在ts文件中添加插件和工具栏详细信息
ckeditor.component.ts
import {Component, OnInit} from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import MathType from
浏览 35提问于2019-10-21得票数 0
1回答
我找了好几天了，找不到我需要做什么的例子。我希望重新格式化HTML输出ckeditor使用的区块引号。
CKEditor输出报价：
<blockquote><p>Content</p></blockquote>
我希望它能输出到如下内容：
<div class="name"><blockquote>Content</blockquote></div>
如果我能做到这一点，它有很多潜在的用途，每一个格式提供给我在许多网站。有人知道怎么做吗？
*编辑:如果可能的话，我倾向于在一个模块中使
浏览 0提问于2019-02-28得票数 0
回答已采纳
这里有人知道如何将自定义BBCode标记添加到CKEditor 4中吗？我试图查看ckeditor.js，但似乎找不到合适的部分进行编辑。
实际上，我只需更改对齐按钮以输出左、右和中心标记，而不是：
<div style="text-align: left">{TEXT_HERE}</div>
我已经尝试过在谷歌上找到它，但我发现的一切都是针对较旧版本的CKEditor和/或BBCode插件。
任何帮助都是非常感谢的！
浏览 5提问于2013-10-27得票数 0
回答已采纳
这是CKEditor文档配置编辑器的方式
我像这样在html中使用
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="{toolbar : 'Basic', uiColor: '#FFFFFF'}"
(change)="onChange($event)"
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($even
浏览 2提问于2016-12-15得票数 2
回答已采纳
我安装了CKEditor的角度遵循以下指南：
我将CKEditorModule导入到我的模块并将它添加到我的导入中。
import { CKEditorModule } from "@ckeditor/ckeditor5-angular";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CKEditorModule
],
providers: [],
bootstrap: [AppCompon
浏览 1提问于2019-03-09得票数 12
回答已采纳
我将CKEditor包更新到了最新版本，一切似乎都运行得很好，在构建过程中没有出现任何错误，也没有任何控制台错误。但当我尝试键入时，我根本无法键入任何内容。我使用CKEditor检查器查看是否可以找到任何其他信息，虽然我找不到任何错误，但在示例站点中，根段落内容是一个[]，而在我的站点中，它是一个有点红色的I。 这是我的pacakge.json {
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/pre
浏览 10提问于2020-04-04得票数 0
如何在Typescript (应用程序是Angular 9)中获得CKEDITOR 4插件的句柄？
我需要通过typescript (自动增长)设置配置，并尝试执行插入HTML功能。
我已经导入了模块(见下文)……但并不是很多。
从‘CKEditor4 -angular/ckeditor’导入{CKEditor4}；
浏览 3提问于2020-05-31得票数 0
1回答
如何将我的库从使用角度12升级到我想要做的13
ng update @angular/core @angular/cli @angular/material
但它只是更新项目的package.json，而不是库的
图书馆package.json：
"peerDependencies": {
"@angular/common": "^12.2.0",
"@angular/core": "^12.2.0",
"@angular/material": "^12.2.9
浏览 9提问于2022-04-07得票数 0
1回答
我是CKeditor的新手。需要使用Ckeditor 5的帮助。我正在使用气球区块。我需要将Edit Block图标更改为我自己的自定义图标。请参阅附件中的图像。我使用的是Angular 8 ? 提前谢谢。
浏览 22提问于2020-08-21得票数 1
import Comments from '@ckeditor/ckeditor5-comments/src/comments';
ClassicEditor.builtinPlugins = [ Essentials, Paragraph, Bold, Italic, Image, Comments ];
如何在angular js的ckeditor5中包含注释上面的代码是用angular 2+编写的，我发现绑定在ckeditor5中没有发生，之前我使用的是ckeditor4，它与angular js完美地工作。
浏览 16提问于2019-11-04得票数 0
2回答
我在动态添加CKEditors时遇到了问题，它通过NgFor和angular@2.0.0-alpha.44进行了rendred。
@Directive({
selector: 'textarea'
})
class CKEditor {
constructor(_elm: ElementRef) {
CKEDITOR.replace(_elm.nativeElement);
}
}
@Component({
selector: 'my-app',
})
@View({
directives: [NgFo
浏览 6提问于2015-12-02得票数 2
回答已采纳
我正在设置我自己的CkEditor4版本，我需要从我的Angular-cli应用程序访问它。我不知道如何访问我的Angular项目中的ckeditor.js文件。我不想用CDN。 我查看了CKEditor提供的文档：https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html 我知道我需要在我的项目中的某个地方写下这两行。 <script src="my-custom-build/ckeditor.js"></script>
<script src="your-app-
浏览 15提问于2019-05-28得票数 3
我在我的角度应用程序中的一个组件中使用。
它在本地没有问题，但是当我试图构建它时，它会抛出这个错误。
./node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js模块生成失败(来自./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js)：TypeError:无法读取未定义的属性“类别”)中的错误
我在错误中提到的文件中看不到任何名为“kind”的属性。
// Module
im
浏览 1提问于2019-11-04得票数 1
回答已采纳
我需要为ckeditor创建一个自定义插件，允许用户创建一个cutom html a元素。
我设法在小项目中创建了这个插件，包括我在脚本元素中的代码，就像在ckeditor示例中一样(如下所示：)。一切都很好。
但是我的问题是在我的Angular应用程序中包含这个插件。我不知道如何导入它。
我尝试了许多不同的方法来导入由webpack生成的构建的ckeditor.js文件，但从未奏效……
所以我的主要问题是，我不明白如何从简单的项目中生成一个构建，并将其导入到我的Angular应用程序中。
如果有人有办法解决这个问题，谢谢！?？
浏览 0提问于2019-04-12得票数 3
我在我的Angular应用程序中使用CKEditor 5。我必须检查用户在编辑器中输入的文本是否至少有100个字符。问题是绑定到编辑器的模型接收由编辑器创建的用于格式化的文本+ html标记。因此，我希望以某种方式将模型的第二个属性绑定到编辑器的原始文本。这是可能的吗？ 在我的组件中，我可以像这样访问编辑器： @ViewChild('ckeditor', { static: true }) private _ckEditor: CKEditorComponent; 我试过这个测试，但我找不到原始文本： onBlur() {
console.log( this._c
浏览 36提问于2020-09-16得票数 1
我想在 2010自定义应用程序页面(.aspx)上使用。
这个是可能的吗？
有例子吗？
我对样品没有特别的要求。我只想看看如何将ASPX文本框(Multiline)放置在aspx页面上，如何将CKEditor放在页面上，以及如何在字段中激活CKEditor。
浏览 4提问于2015-05-09得票数 0
回答已采纳
如何在react中安装CKEitor。我安装了，但有一个错误- version.js:144 Uncaught :ckeditor-复制-模块读取更多信息：。
我的代码：
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
f
浏览 9提问于2022-09-05得票数 0
回答已采纳
我正在尝试将CKEditor集成到我的角度项目中。我遵循了其他类似的解决方案，但只有文本区域出现。以下是我迄今所做的工作。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="
浏览 2提问于2017-01-23得票数 6
回答已采纳
1回答
请分享使用CKEditor 5的经验。
HTML5标记是否也在CKEditor 4中删除？如果是的话，我们能用它做什么？
显示如何启用工具栏上的所有CKEditor 5按钮和选项，如CKEditor 4。下面的链接包含包含所有选项的完整包。
谢谢你给我时间！
浏览 6提问于2017-11-20得票数 0
我正试图在我的angular2应用程序中使用ng2-ckeditor组件，但出于某种原因，我一直在控制台中看到一个错误：
原始异常: ReferenceError:没有定义CKEDITOR
这是我的密码。
system.config.json
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist'
浏览 3提问于2016-07-08得票数 4
我将在我的angular 4项目中使用ng2-ckeditor插件。我读了指南，里面有systemjs文件的配置。但是我在我的angular 4cli项目中找不到systemjs。所以我做了指南中提到的除systemjs config之外的其他事情。最后的结果是简单的文本框和警告 'CKEditor 4.x is missing (http://ckeditor.com/)' 这就是我所做的一切。 1) /*added this script to my component html file*/
<script src="https://cdn.cked
浏览 35提问于2017-07-23得票数 6
回答已采纳
1回答
我正在使用CKEditor 4来替换创建电子邮件时的消息。消息主要是商业信函模板。我想替换某些部分，如数据库中的信函模板值。
在搜索CKEditor站点时，我发现了这个。我知道如何将插件添加到我的CKEditor中。BUt，我想知道如何从我的php变量中设置一个占位符。此变量保存数据库字段列内容，例如$first_name。
我确实搜索过任何类似的问题，但他们通常跳过我要找的部分。
任何建议都很感激。
非常感谢。
浏览 2提问于2014-12-20得票数 3
回答已采纳
我已经为TYPO3 CMS 8设置了一个需求列表，并希望为一般使用添加ck编辑器(也是在扩展中)。
...
"require": {
"helhum/typo3-console": "^4.9.3 || ^5.2",
"typo3/cms-about": "^8.7.10",
"typo3/cms-belog": "^8.7.10",
"typo3/cms-beuser": "^8.7.10",
"ty
浏览 0提问于2019-01-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
