ckeditor - Angular2 - CKEditor 使用-6ren

ckeditor - Angular2 - CKEditor 使用

转载作者：行者123 更新时间：2023-12-02 21:46:08

26

4

如何将 ckeditor 与 Angular2 组件一起使用？

做类似的事情:

import {Component} from 'angular2/core'

@Component({
  selector: 'e',
  template: `
  <textarea name="editor1" id="editor1" rows="10" cols="80">
      This is my textarea to be replaced with CKEditor.
  </textarea>
  <script>
      CKEDITOR.replace( 'editor1' );
  </script>
  `
})

export class E {

}

并在index.html中打印它，例如:

<html>
  <head>
    <title>Hello</title>
    <script src="../ckeditor/ckeditor.js"></script>
    <script src="../systemjs/dist/system.src.js"></script>
    <script src="../es6-shim/es6-shim.js"></script>
    <script src="../angular2/bundles/angular2-polyfills.js"></script>
    <script src="../rxjs/bundles/Rx.js"></script>
    <script src="../angular2/bundles/angular2.dev.js"></script>
    <script src="../angular2/bundles/router.dev.js"></script>
    <script src="../angular2/bundles/http.dev.js"></script>
    <script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
    <script>
      System.config({
        packages: {
          compiled: {
              format: 'register',
              defaultExtension: 'js'
          }
        }
      });
      System.import('../compiled/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <body>
    Hackathon incoming!
    <e>Loading...</e>
  </body>
</html>

不起作用。当我将所有带有脚本代码的文本区域放在index.html 中时效果很好，但我真的想将它放在组件模板中。就像 ckeditor 在组件中看不到 textarea ID 一样。

如何使 ckeditor 插件与 Angular2 组件配合良好？谢谢

最佳答案

不要将脚本添加到您的模板中。使用这个代替

import {Component} from 'angular2/core'

declare const window: any;

@Component({
  selector: 'e',
  template: `
     <textarea name="editor1" id="editor1" rows="10" cols="80">
         This is my textarea to be replaced with CKEditor.
     </textarea>
  `
})
export class E {
    constructor(){}
    ngOnInit(){
       if(window.CKEDITOR) {
           window.CKEDITOR.replace('editor1');
       }
    }
}

更新:

检查 Angular2 lifecycle hooks ，并且由于组件是 javascript，因此您可以从组件内部执行任何脚本代码。

更好的方法，

实现一个将像这样使用的CKEDITOR组件

<CKEditor [targetId]="editor1" [rows]="10" [cols]="80"> </CKEditor>

ckeditor.component.ts

import {Component, Input} from 'angular2/core';

declare const window: any;

@Component({
  selector: 'CKEditor',
  template: `
     <textarea name="targetId" id="targetId" rows="rows" cols="cols">
         This is my CKEditor component.
     </textarea>
  `
})
export class CKEditorComponent {

    @Input() targetId;
    @Input() rows = 10;  //you can also give default values here
    @Input() cols;     

    constructor(){}

    ngOnInit(){
       if(window.CKEDITOR) {
           window.CKEDITOR.replace('editor1');
       }
    }
}

最好的方法，

获取CKEditor的typescript定义文件，我找到了here 。将其添加到您的项目中，之后您就可以使用该库了。

这仅用于说明，未经测试。

import * as CKEDITOR from 'CKEDITOR/PATH';   
.
.
ngOnInit(){
   CKEDITOR.replace( targetId );
}

关于ckeditor - Angular2 - CKEditor 使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35978025/

26

4

0

文章推荐： assembly - 如何在 tasm 中在屏幕上打印 SVGA 信息？

文章推荐： bluebird - 中断 Bluebird .each() 进程

ckeditor - 在动态添加的文本上使用内联 CKEditor
我正在构建一个使用 javascript 向页面动态添加元素的 Web 应用程序，然后可以使用 contentEditable="true" 对其进行编辑和 CKEditor . 目前，如果我使用 c
ckeditor - 修改选择 Ckeditor
目前我遇到以下问题，我正在使用 CKEDITOR 4.x 中的 applyStyle 方法应用 span 标签。但是当一个跨度被部分选中并且我执行 applyStyle 方法时，一个新的跨度将被选择，
ckeditor - 如何在 CKEDITOR.inline 之后使用 CKEDITOR.replace
我在内联模式下使用CKEDITOR，每页有多个编辑器。为了创建它们，我使用 HTML 中的标签，然后运行执行 CKEDITOR.inline() 的脚本网页加载后立即针对它们中的每一个进行操作。只
ckeditor - CKEditor 中的文本方向
如何在加载编辑器上设置文本方向 [rtl]？最佳答案根据文档，应该这样做: CKEDITOR.config.contentsLangDirection in the CKSource manual
ckeditor - 隐藏但不删除图像按钮 CKEditor
在 CKEditor 中，我添加了自定义图像按钮，它直接触发文件输入。但是，只有在使用 Image 插件时才能渲染图像。我不想在工具栏上有 2 个图像按钮，有没有办法隐藏图像按钮，但仍然使用它(如显
ckeditor - 不可能在生产中看到 CKeditor
我有一个使用 CKeditor 的 Rails 4 应用程序。在开发模式下它工作正常，但在生产中 ckeditor 不会出现，并且文本区域的位置有一个空格。根据日志，缺少以下文件: ActionCo
ckeditor - ckeditor 上的临时禁用按钮
如何在选择图像时启用或禁用 CKEditor 的段落按钮。我不想完全删除它。我目前使用 ckeditor 版本 4.4 最佳答案使用editor.getCommand() + CKEDITOR.co
ckeditor - 如何在 CKEDITOR.inline 之后使用 CKEDITOR.replace
我在内联模式下使用CKEDITOR，每页有多个编辑器。为了创建它们，我使用 HTML 中的标签，然后运行执行 CKEDITOR.inline() 的脚本网页加载后立即针对它们中的每一个进行操作。只
ckeditor - CKEditor 中的行号
乍一看，我需要做一件简单的事情——在 CKEditor 中添加一个带有行号的栏。主要思想是作者在讨论文本时可以引用特定段落。我试图找到一个插件，试图找到另一个带有行号的 WYSIWYG 编辑器，但没
ckeditor - 隐藏但不删除图像按钮 CKEditor
在 CKEditor 中，我添加了自定义图像按钮，它直接触发文件输入。但是，只有在使用 Image 插件时才能渲染图像。我不想在工具栏上有 2 个图像按钮，有没有办法隐藏图像按钮，但仍然使用它(如显
ckeditor - 为 Strapi 自定义 CKEditor 会出现 "ckeditor-duplicated-modules"错误
我试图修改this repo 来自定义我想在我的 Strapi 项目中使用的 CKEditor。我添加了更多插件，这就是我的 ckeditor.js 文件的样子: import ClassicEdit
ckeditor - 如何更改 CKEditor 元素
当自定义 div 内部发生变化时是否会触发任何事件？我不想监听 editor.on('change')，而只是检测发生变化的 dom 元素， (删除或插入的字符)。例如: var template
ckeditor - HOW TO - 通过编辑器外部的另一个按钮触发 ckeditor 中的源按钮
我有一个像 ckeditor 一样的 textarea。在编辑器中有一个按钮可以将内容查看为 source/html。我在 textarea 上方有一个输入按钮，可以将 textarea 内容预览
ckeditor - yii2 ckeditor 自定义插件
我正在使用 2amigos ckeditor plugins在 yii2 中，我能够从 plugin_sdk_sample 创建一个示例插件，它在原始项目中工作正常，但是当我将其放入 yii2 项目时
ckeditor - 如何为只读显示设置 CKEditor 内容的样式
我在我的应用程序中使用 CKEditor 5，供用户输入包含图像、媒体、表格和样式文本的文档。用户存储文档后，我会再次将其拉出进行显示。过去当我只有最通用的样式时，我会这样显示内容: 这是一个
ckeditor - 如何在 CKEditor 中修改上下文菜单？
有谁知道如何修改CKEditor右键单击上下文菜单？我想弄清楚如何从右键单击菜单中删除“剪切、复制、粘贴、编辑 DIV”，并尝试向其中添加“插入图像、插入表格”。最佳答案 3.6.1 版在其 AP
ckeditor - 有没有办法在 CKEditor 中设置默认字体和字体大小？
我一直在为此寻找解决方案有一段时间了，我发现的唯一修复只会影响文本在编辑器本身中的显示方式，而不影响生成的文本在发送/保存到其他地方时的外观。我说的是 CSS 修复之类的东西。我正在使用 CKEdi
ckeditor - 动态设置 CKEditor 配置
我需要动态更改 CKEditor 配置中的一个配置设置。我正在编写一个插件，它将复选框添加到 CKEditor 工具栏并在选中/取消选中它时 - forcePasteAsPlainText 被更改为
ckeditor - 动态更改 CKEditor 工具栏
如何动态更改 CKEditor 工具栏(不使用预定义的工具栏)？ CKEditor Developer's Guide只告诉您如何在初始化期间设置工具栏。我正在使用 CKEditor 3.6.4。
ckeditor - 如何配置 CKEditor 使其保留数据属性而不是删除它们？
我使用 CKeditor 来编辑丰富的 HTML 页面，但是一些 javascript 功能依赖于的特殊属性。触发它们的标签。这些是极少数情况，只有 5000 多条记录的数据库中的几条记录需要触

首页

博学

6Ren·AI

商城

ckeditor - Angular2 - CKEditor 使用