标签: ckeditor

php ckeditor 无法设置 php 数据

<textarea cols="80"  id="editor1"    name="content" rows="10" >    
</textarea>     
<script>
    CKEDITOR.replace( 'editor1' );
</script>
Run Code Online (Sandbox Code Playgroud)

这工作正常,我正在获取编辑文本框,但现在我需要从数据库获取数据。为此我正在做:

<textarea cols="80"  id="editor1" value="<?php echo $rows['content']; ?>"   name="content" rows="10" >  

</textarea>         
<script>
      CKEDITOR.replace( 'editor1' );
</script>
Run Code Online (Sandbox Code Playgroud)

但它没有显示我的数据。

我尝试过在简单文本区域中获取的数据,但在 CKEDITOR 中未获取的数据。

我究竟做错了什么?

php ckeditor

1
推荐指数
1
解决办法
4767
查看次数

ckeditor 拖放小部件

我有最新的 ckeditor 版本 4.5.7,带有拖放 API,我有一个情况,我需要将一个小部件从一个编辑器拖放到另一个编辑器。正如这张票所说,建议的功能是静默失败并且不执行任何操作。

ckeditor 票证链接

就我而言,如果将小部件拖动到不同的编辑器,则需要复制小部件;如果将小部件拖动到同一编辑器中,则需要移动小部件。第二种情况已经在工作

关于如何做到这一点有什么想法吗?

editor.on( 'contentDom', function() {
    var dropTarget = CKEDITOR.plugins.clipboard.getDropTarget( editor );
    editor.editable().attachListener( dropTarget, 'drop', function( evt ) {
    // The target may be some element inside the draggable div (e.g. the image), so get the div.h-card.
    var target = evt.data.getTarget().getAscendant( 'div', true );

    // Initialization of CKEditor data transfer facade is a necessary step to extend and unify native 
    // browser capabilities. For instance, Internet Explorer does not support any other data …
Run Code Online (Sandbox Code Playgroud)

drag-and-drop widget ckeditor

1
推荐指数
1
解决办法
3573
查看次数

如何删除 CKEditor 图像中的链接选项卡?

我可以删除其他选项卡,例如图像中的“高级”和链接中的另一个选项卡,但是,相同的方法不适用于链接选项卡。

我像这样编辑了 config.js 文件,它适用于高级选项卡: config.removeDialogTabs = 'image:advanced';

但是当我编辑链接选项卡的 config.js 文件时,它不起作用: config.removeDialogTabs = 'image:advanced';'image:link';!

在此输入图像描述

ckeditor

1
推荐指数
1
解决办法
2954
查看次数

稍微修改 resourceRegExp 时 NormalModuleReplacementPlugin 不起作用

正如CKEditor5主页上的官方建议,我想替换几个插件预装的标准图标。由于每个插件(例如 ckeditor5-core 或 ckeditor5-alignment).svg在 [PLUGIN_DIR]/theme/icons 中都提供了自己的设置,因此建议的策略 - 用自己的修改替换它们 - 是可以理解和明确的:

(...) 使用 webpack 的 NormalModuleReplacementPlugin 插件

...
plugins: [
  new webpack.NormalModuleReplacementPlugin(
    /bold\.svg/,
    '/absolute/path/to/my/icon.svg'
  )
]
Run Code Online (Sandbox Code Playgroud)

基于此代码,我进行了试验并最终得到了以下结果:

...
plugins: [
  new webpack.NormalModuleReplacementPlugin(
    /\/theme\/icons\/[^/]+\.svg$/,
    resource => {
      console.log(resource.request);
      resource.request = path.resolve(
        THEME_PATH,
        "../../icons/coffee-solid.svg"
      );
    }
  ),
]
Run Code Online (Sandbox Code Playgroud)

导致以下(想要的/预期的)变化: before after

部分控制台输出:

../../theme/icons/bold.svg
../../theme/icons/italic.svg
@ckeditor/ckeditor5-core/theme/icons/quote.svg
@ckeditor/ckeditor5-core/theme/icons/image.svg
../theme/icons/numberedlist.svg
../theme/icons/bulletedlist.svg
../theme/icons/align-justify.svg
../theme/icons/link.svg
(node:10394) DeprecationWarning: Chunk.mapModules: Use Array.from(chunk.modulesIterable, fn) instead
@ckeditor/ckeditor5-core/theme/icons/object-right.svg
@ckeditor/ckeditor5-core/theme/icons/object-center.svg
@ckeditor/ckeditor5-core/theme/icons/object-left.svg
@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg
@ckeditor/ckeditor5-core/theme/icons/low-vision.svg
../theme/icons/drag-handler.svg
@ckeditor/ckeditor5-core/theme/icons/cancel.svg
../theme/icons/redo.svg
../../../theme/icons/next-arrow.svg
../../../theme/icons/previous-arrow.svg
../theme/icons/undo.svg
../../../theme/icons/dropdown-arrow.svg …
Run Code Online (Sandbox Code Playgroud)

icons theming ckeditor webpack

1
推荐指数
1
解决办法
1563
查看次数

如何在 React JS 中配置 Ckeditor 工具栏?

我想在React中配置Ckeditor工具栏,但不知道文档中的属性详细信息在哪里。Ckeditor React 集成文档没有帮助,因为它不包含太多信息。

我试过这个:

import CKEditor from "ckeditor4-react"

<CKEditor
          data={this.state.data}
          onChange={this.onEditorChange}
          config={{
            toolbar: [
              ["Bold", "Italic", "Strike Through"],
              [
                "Cut",
                "Copy",
                "Paste",
                "Pasteasplaintext",
                "FormattingStyles",
                "Undo",
                "Redo"
              ],
              ["List", "Indent", "Blocks", "Align", "Bidi", "Paragraph"],
              ["Find", "Selection", "Spellchecker", "Editing"]
            ]
          }}
        />
Run Code Online (Sandbox Code Playgroud)

但是其中一些配置没有出现,因为我在猜测属性。我知道文档中有工具栏配置生成器,但我不知道把它放在 React 的哪里:

CKEDITOR.editorConfig = function( config ) {
    config.toolbarGroups = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' …
Run Code Online (Sandbox Code Playgroud)

javascript textarea ckeditor reactjs

1
推荐指数
1
解决办法
4082
查看次数

CKEDITOR - 我无法填写任何字段 - 不关注输入

我在这里的 CKEDITOR 的 Github 页面上问过我的问题,我被要求在这里问:https : //github.com/ckeditor/ckeditor4/issues/3555

我正在与 CKEDITOR 合作使内容可编辑。当我点击一个按钮时,编辑器在引导模式中打开,这可能是它不起作用的原因。这里的问题是我无法将注意力集中在在编辑器中插入内容所需的字段上。

两个截图来理解问题:https : //imgur.com/BB8RDfB - 当我不能在输入中写任何东西时,没有焦点

https://imgur.com/BufQ2y2 - 当我尝试验证时,因为没有写入任何内容

这是我的 CKEditor 配置:

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

 CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    config.uiColor = '#AADC6E';
    config.extraPlugins = 'ckawesome';
    config.fontawesomePath = 'C:/wamp64/www/landing/fontawesome-free-5.10.2-web/css/fontawesome.css';
    config.extraPlugins = 'fontawesome';
    config.allowedContent = true;
    CKEDITOR.dtd.$removeEmpty['i'] = false;
    CKEDITOR.dtd.$removeEmpty['span'] …
Run Code Online (Sandbox Code Playgroud)

jquery ckeditor

1
推荐指数
1
解决办法
1262
查看次数

为什么 CKEditor 4 Angular 模块表单字段验证不起作用?

为什么 CKEditor 4 Angular 模块表单字段验证不起作用?

我的住在这里

我尝试了 .touched、.pristine、.valid 的不同组合。

但是,该字段不像另一个字段那样工作。

这意味着当我点击“保存”按钮时,在非触摸状态下,

将显示其他字段错误消息,但是 CKEditor 不会。

ckeditor angular-material angular angular-forms

1
推荐指数
1
解决办法
512
查看次数

如何将 CKEditor 上的主题/皮肤从浅色更改为深色?

我正在为我的网站使用 CKEditor,我试图将所有元素从亮模式转变为暗模式。

在此处输入图片说明


我有

<script src="//cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>



<textarea name="description" rows="100" cols="80" id="description">
......TEXTS......
</textarea>
<script>
CKEDITOR.replace( 'description' );
CKEDITOR.config.height = 500;
</script>
Run Code Online (Sandbox Code Playgroud)

我试过了

下载 zip,并将其移动到我的项目中/js

CKEDITOR.replace( 'description', {
    skin: 'moonocolor,/js/ckeditor/skins/moono-dark/skin.js',
    height : 500
} );
Run Code Online (Sandbox Code Playgroud)

这条线

皮肤:'moonocolor,/js/ckeditor/skins/moono-dark/skin.js',

似乎不起作用。

javascript css jquery ckeditor ckeditor4.x

1
推荐指数
1
解决办法
1586
查看次数

如何在 reactjs 的 CKEditor5 工具栏中添加下划线选项和对齐选项

如何在 reactjs 的 CKEditor 中添加选项作为文本对齐和下划线,我尝试过但没有成功。请帮我

text-editor.js

import React from 'react'
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const TextEditor = ({handleChildClick}) => {
    return (
        <div className="container">
            <CKEditor
                editor={ ClassicEditor }
                onChange={ ( event, editor ) => {
                    const data = editor.getData();
                    handleChildClick(data)
                } }
            />
            <style>
                {`
                .ck-content { height: 150px; }
                `}
            </style>
        </div>
    );
}; 
export default TextEditor
Run Code Online (Sandbox Code Playgroud)
Parent.js

<TextEditor handleChildClick={getDataFromTextEditor} />
Run Code Online (Sandbox Code Playgroud)

以供参考

options underline text-alignment ckeditor reactjs

1
推荐指数
1
解决办法
1721
查看次数

如何在 React 中将 html 字符串转换为纯文本?

如何在 React 中将 html 字符串(带有很多标签等)转换为纯文本?可能有任何 npm 模块吗?

我还没有找到任何将html 字符串转换为纯文本的方法。我需要这个是因为我想将在Ckeditor 5 中编辑的文本文件保存为纯文本文件,但 Ckeditor 5 以 html 或 markdown 格式管理数据。

javascript ckeditor node.js reactjs ckeditor5

1
推荐指数
1
解决办法
4679
查看次数