标签: ckeditor

我想问这个小但非常重要的问题：（我下载了 CKeditor 4.3.2，相信我，我一直在互联网上寻找这个，但没有成功。）

我试图在工具栏中显示“笑脸”图标，但它没有显示，并且其他一些图标也会发生这种情况，例如“保存”、“打印”、“新页”，我不知道为什么。另外，当我插入视频链接时，也不会显示视频链接，以便人们在发布后观看它......一切都与其他人一起工作得很好，但与我刚刚提到的这些人不同！请！感谢您的回复！

PS：我在一些论坛上发现4.3.2版本中的图标已经改名了，你认为是这个原因吗？

这是我的代码：

CKEDITOR.editorConfig = function( config )
{   
uiColor: '#14B8C4',
config.toolbar = 'Full';

  `config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-', 'Save','NewPage','DocProps','Preview','Print','-','Templates', 'Emoticons' ] },//solo Source
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo', 'clipboard' ] },//BIen
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt', 'TextColor' ] },//Solo SpellChecker
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', //nada
    'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' …

我正在使用 CK 编辑器并使用 jQuery 实现。我在 ckeditor config.js 中隐藏了链接选项，这样工具栏中就不会出现链接选项。当我输入 URL 或链接时，在单击事件中，它将链接（网页）加载到我的页面/div 中。我还通过删除 href 来限制它。现在，在 URL 上双击，它会显示一个链接对话框，其中包含“链接类型”、“协议”、“URL”和“确定取消”按钮等选项。现在我想限制对话框。即：我不想弹出对话框。双击应该像在普通文本中一样工作。有人可以帮助我吗？我也尝试过“config.removeDialogTabs = 'image:advanced;link';” “config.removeDialogTabs = '链接：上传；图像：上传'；”

CKEDITOR.on('dialogDefinition', 函数 (ev) {

            var dialogName = ev.data.name;
            var dialogDefinition = ev.data.definition;

            switch (dialogName) {
                case 'image': //Image Properties dialog      
                    dialogDefinition.removeContents('advanced');
                    break;
                case 'link': //image Properties dialog          
                    dialogDefinition.removeContents('advanced');
                    break;
            }
        });

它不起作用。

我在 Rails4 项目中使用 ckeditor。我尝试了 ckeditor gem 和 ckeditor_rails gem 来提供 ckeditor 库。

这里有多个帖子，人们希望删除 ckeditor 上下文菜单，以便可以显示本机浏览器上下文菜单。

这通常是为了启用浏览器拼写检查器而不是 ckeditor 付费/广告拼写检查器。

如何删除 ckeditor-4-3 中的上下文菜单

ckeditor-3-6-3-启用浏览器拼写检查并禁用上下文菜单

如何禁用 ckeditor 上下文菜单/20229730#20229730

第三个链接的回复最多，但没有一个被普遍接受。一般来说，答案是通过将以下内容放入 ckeditor config.js 中来删除 contextmenu 插件

config.removePlugins = 'contextmenu';

还有人建议上下文菜单依赖于其他插件，并且不同的人也添加了许多其他要删除的插件。

一篇有用的文章建议在控制台中运行以下代码来建立依赖关系。

$.each(CKEDITOR.plugins, function(k, v){ 
    v.requires && console.log("Plugin '" + k + "' requires: " + v.requires) 
})

这似乎工作得很好，并表明 tabletools 和 liststyle 插件依赖于上下文菜单。所以我们最终得到

config.removePlugins = 'liststyle,tabletools,contextmenu';

不幸的是，这不会禁用我正在使用的 ckeditor 版本中的上下文菜单（4.4.6 通过在 config.js 中添加警报（CKEDITOR.version）建立）

最后建议在config.js中使用以下代码

CKEDITOR.on('instanceReady', function(ev) {
   ev.editor.editable().addClass('cke_enable_context_menu')
});

没有关于如何禁用上下文菜单的建议，但无论如何，这对我来说没有什么区别。

对我来说，这是一个令人震惊的问题，因为 ckeditor 上下文菜单隐藏了浏览器拼写建议，并且它包含的剪切和粘贴选项实际上不起作用，而只是打开浏览器对话框。

您的浏览器安全设置不允许编辑器自动执行复制操作。请使用键盘（Ctrl/Cmd+C）。

在所有其他方面，ckeditor 似乎确实是功能最好的编辑器。

我在引导模式中使用 ckeditor。ckeditor 中的数据应在 ajax 调用后动态加载。我无法在 ckeditor 中加载数据。代码 ：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Thank you Message</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Subject:</label>
                <input type="text" class="form-control" id="subject">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">Message:</label>
                <?php $ckeditor->editor('message', '', array('id'=>'editor1')); ?>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn …

我正在使用CkEditor 的 Latex 插件。该插件以图像形式返回数学方程。

我正在寻找乳胶文本而不是图像。我该如何实现它？有配置可以启用它吗？例子会很棒。

请参考以下代码。

CKEDITOR.extraPlugins = 'mathjax,eqneditor';

CKEDITOR.plugins.addExternal('eqneditor', '../../vendors/ckeditor-ext-plugins/eqneditor/plugin.js');

CKEDITOR.config.toolbar = [
        {name:'document',items:[ 'Cut', 'Copy', 'Paste', 'PasteText', 'EqnEditor'],
        }
    ];

已编辑

PS：我需要一个面板来编辑数学方程，就像这样http://www.codecogs.com/latex/eqneditor.php

如果我在 CKEDITOR-textarea 中编辑链接，光标总是跳到顶部，位于内容的第一个字母之前。\n此问题仅出现在 IE 中，但仅出现在我的页面上。如果我访问 CKEDITOR-demopage，它会按要求工作。

我一直在寻找类似的问题，但没有找到任何东西。有人知道这个问题的解决方案吗？

编辑：\n我发现问题：我有一个自定义插件来更改我的链接，该插件用于element.setValue()替换链接的值，该函数会跳转到顶部。我也尝试过 setHtml() 和 setText()，但这是同样的问题。

编辑2：忘记添加我的代码：\ nplugin.js

CKEDITOR.plugins.add(\'previewLink\', {\n    icons: \'previewLink\',\n    init: function(editor){\n        editor.addCommand(\'previewLinkDialog\', new CKEDITOR.dialogCommand(\'previewLinkDialog\'));\n\n        editor.ui.addButton(\'previewLink\', {\n            label: \'Preview Link einf\xc3\xbcgen\',\n            command: \'previewLinkDialog\',\n            toolbar: \'insert\'\n        });\n\n        CKEDITOR.dialog.add(\'previewLinkDialog\', this.path + \'dialogs/previewLink.js\');\n\n        editor.on(\'doubleclick\', function(evt){\n            var element = evt.data.element;\n            if(!element.isReadOnly()){\n                if(element.is(\'a\')){\n                    editor.openDialog(\'previewLinkDialog\');\n                }\n            }\n        });\n    }\n});\n

对话框/previewLink.js

CKEDITOR.dialog.add(\'previewLinkDialog\', function(editor){\n    return {\n        title: \'Preview Link einf\xc3\xbcgen\',\n        minWidth: 400,\n        minHeight: 200,\n\n        contents: [\n            {\n                id: \'tab-basic\',\n                label: \'Basic Settings\',\n                elements: …

我想阻止我的用户将嵌入的图像粘贴到编辑器中。

<img src="data:image/png;base64,iVBORw...g==" alt="Red dot" />

查看手册后，我意识到元素属性有过滤器。

但是，我找不到任何有关过滤属性值（例如 img 元素的 src 属性）的信息。

如果有人能指出我正确的方向，我将不胜感激。

干杯，

奥利弗

我正在尝试将 CKEDITOR 5 集成到我的 Angular 8 项目中。我已经使用其他插件以及 ClassicEditor 和 InlineEditor 创建了自定义超级构建（使用本指南：https ://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#creating-super-建立）。

我已经导入CKEditorModule到我的共享模块文件中。下面是我的组件文件：

import { Component, OnInit } from '@angular/core';
import * as CKEDITOR from '@ckeditor/ckeditor5-build-classic';

@Component({
    templateUrl: './cke5.html',
    styleUrls: ['./cke5.scss'],
    selector: 'app-cke5'
})
export class CKE5  {

    loader: any;

    public CEditor = CKEDITOR.ClassicEditor.create( document.querySelector( '#editor' ), {
        extraPlugins: [ this.imageUploadAdapterPlugin ],
    } )
    .catch( error => {
        console.log( error );
    } );

    constructor() {
        console.log(CKEDITOR.ClassicEditor);
    }

    uploadImage() {
        return this.loader.file
            .then( file => new …

如何在 React 中使用 ImageResize。我找不到任何样本。我想调整我从 CKEditor 添加到我的反应组件上的图像的大小。

<CKEditor editor={ClassicEditor}
      data="<p>Hello from CKEditor 5!</p>"
      onInit={editor => {
        editor.plugins.get(
          "FileRepository"
        ).createUploadAdapter = loader => {
          return new UploadAdapter(loader)
        }

        //editor.plugins.add("ImageResize") or something?

        console.log("Editor is ready to use!", editor)
      }}
      onChange={(event, editor) => {
        const data = editor.getData()
        console.log({ event, editor, data })
      }}
      onBlur={(event, editor) => {
        console.log("Blur.", editor)
      }}
      onFocus={(event, editor) => {
        console.log("Focus.", editor)
      }}
/>

我正在尝试在 NextJS 中使用 CKEditor5。这是我的软件包版本：

"@ckeditor/ckeditor5-build-classic": "^22.0.0",
"@ckeditor/ckeditor5-code-block": "^22.0.0",
"@ckeditor/ckeditor5-react": "^2.1.0",
"next": "9.5.1",

我的组件的相关部分是：

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

const editorConfig = {
  toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'codeBlock'],
  plugins: [CodeBlock],
  codeBlock: {
    languages: [
      { language: 'plaintext', label: 'Plain text' },
      { language: 'c', label: 'C' },
      { language: 'cs', label: 'C#' },
      { language: 'cpp', label: 'C++' },
      { language: 'css', label: 'CSS' },
      { language: 'diff', label: …