<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 中未获取的数据。
我究竟做错了什么?
我有最新的 ckeditor 版本 4.5.7,带有拖放 API,我有一个情况,我需要将一个小部件从一个编辑器拖放到另一个编辑器。正如这张票所说,建议的功能是静默失败并且不执行任何操作。
就我而言,如果将小部件拖动到不同的编辑器,则需要复制小部件;如果将小部件拖动到同一编辑器中,则需要移动小部件。第二种情况已经在工作
关于如何做到这一点有什么想法吗?
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) 我可以删除其他选项卡,例如图像中的“高级”和链接中的另一个选项卡,但是,相同的方法不适用于链接选项卡。
我像这样编辑了 config.js 文件,它适用于高级选项卡: config.removeDialogTabs = 'image:advanced';
但是当我编辑链接选项卡的 config.js 文件时,它不起作用: config.removeDialogTabs = 'image:advanced';'image:link';!
正如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)
部分控制台输出:
../../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) 我想在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) 我在这里的 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) 为什么 CKEditor 4 Angular 模块表单字段验证不起作用?
我的住在这里。
我尝试了 .touched、.pristine、.valid 的不同组合。
但是,该字段不像另一个字段那样工作。
这意味着当我点击“保存”按钮时,在非触摸状态下,
将显示其他字段错误消息,但是 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',
似乎不起作用。
如何在 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)
如何在 React 中将 html 字符串(带有很多标签等)转换为纯文本?可能有任何 npm 模块吗?
我还没有找到任何将html 字符串转换为纯文本的方法。我需要这个是因为我想将在Ckeditor 5 中编辑的文本文件保存为纯文本文件,但 Ckeditor 5 以 html 或 markdown 格式管理数据。