标签: ckeditor
隐藏但不删除图像按钮 CKEditor
在 CKEditor 中，我添加了自定义图像按钮，它直接触发文件输入。但是，只有在使用图像插件时才能渲染图像。
我不想在工具栏上有 2 个图像按钮，有没有办法隐藏图像按钮，但仍然使用它（如显示：无，但以更具结构性的方式？）
提前致谢。
推荐指数
解决办法
查看次数
ckeditor - 从错误的 URL 加载语言 JS 文件
我正在使用最新版本（4.7.0）的ckeditor.
我通过安装它npm，它位于常规前端内（没有花哨的 js 框架）。
问题：翻译 js 文件 - 我的情况是“de.js”是从错误的 URL 加载的。
当我检查代码时，我在代码中看到以下内容：
CKEDITOR.scriptLoader.load(CKEDITOR.getUrl("lang/"+a+".js"),f,this)
它仅添加lang/de.js到我当前的网址，而不是转到我的静态文件夹。
我的配置如下：
CKEDITOR.editorConfig = function (config) {
config.toolbar = 'Custom';
config.toolbar_Custom = [
{
name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Styles',
'Format', 'NumberedList', 'BulletedList', 'Undo', 'Redo', 'Image', 'Smiley'],
},
];
config.extraPlugins = 'clipboard,dialog,uploadimage,uploadfile';
config.imageUploadUrl = '/uploader/';
config.uploadUrl = '/uploader/';
};
我尝试添加：
config.baseHref = '/static/ckeditor/';
和
config.path = '/static/ckeditor/';
和
config.basepath = '/static/ckeditor/';
但代码仍然是从相对 URL 加载的。
有谁知道如何正确配置编辑器，使其不会从（错误的）相对路径加载文件？
谢谢
罗恩
更新：
这是我的配置文件，我通过参数添加它 …
推荐指数
解决办法
查看次数
Laravel - CK Editor 在上传图像时返回 419 http 状态
我想使用 ck 编辑器存储我的图像。但即使我将 csrf 令牌设置为请求标头，它也会返回 419 http 状态。
let token = document.head.querySelector('[name=csrf-token]').content,
document.querySelector('#article_editor').on('fileUploadRequest', function (evt) {
var xhr = evt.data.fileLoader.xhr;
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader('X-File-Name', this.fileName);
xhr.setRequestHeader('X-File-Size', this.total);
xhr.setRequestHeader('X-CSRF-Token', token);
xhr.send(this.file);
// Prevented the default behavior.
evt.stop()
});
我怎样才能解决这个问题 ？
我已经在 head 标签之间设置了 csrf 元数据。尽管如此，我还是不断收到错误..
<head>
...
<meta name="csrf-token" content="{{ csrf_token() }}">
...
</head>
推荐指数
解决办法
查看次数
Django ckeditor - 将宽度设置为 100%
我有一个简单的 django-ckeditor 实现，默认设置设置为
CKEDITOR_CONFIGS = {
'default': {
'toolbar': [
['Undo', 'Redo',
'-', 'Bold', 'Italic', 'Underline',
'-', 'Link', 'Unlink', 'Anchor',
'-', 'Format',
'-', 'SpellChecker', 'Scayt',
'-', 'Maximize',
'-', 'Language',
],
],
'height': '100%',
'width': '100%',
'toolbarCanCollapse': False,
},
}
在我的表格中我有
{{ form.media }}
{{ form.description }}
我期望 ckeditor 字段覆盖 100% 宽度，但它覆盖了菜单栏的 100%。如何让它覆盖可用宽度？
谢谢
推荐指数
解决办法
查看次数
Laravel Livewire 和 ckeditor
我正在尝试将 ckeditro 与 laravel livewire 集成，但每次我在编辑器中输入内容时，livewire 都会从我的文本区域中删除编辑器。
我的代码如下
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model="description"
></textarea>
</div>
以下是javascript
$(document).ready(function () {
CKEDITOR.instances['description'].on('change', function(e){
@this.set('description', e.editor.getData());
});
});
任何帮助，将不胜感激
谢谢
更新
我正在慢慢到达那里。我遇到的唯一问题是，当我保存表单时，ckeditor 将从文本区域中删除。
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model.debounce.9999999ms="description"
x-data
x-init="
CKEDITOR.instances['description'].on('change', function(e){
$dispatch('input', e.editor.getData())
});
"></textarea>
</div>
推荐指数
解决办法
查看次数
在 Angular 中向 ckeditor 添加简单的上传适配器
我确实通过安装在我的角度项目中启动了经典的ckeditor...
npm install --save @ckeditor/ckeditor5-angular
npm install --save @ckeditor/ckeditor5-build-classic
在我的组件中我已经导入了它......
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
发起对象...
public Editor = ClassicEditor;
在模板中这样开始
<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" name="Blog" placeholder="About your ride" [(ngModel)]="formModel.Blog" required [editor]="Editor" data="<p>Blog!</p>"></ckeditor>
现在我想向此编辑器添加简单上传适配器。
我确实安装了
npm install --save @ckeditor/ckeditor5-upload
然后有写着
- 将 SimpleUploadAdapter 添加到我的插件列表 https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html
我被困在这里了。我不知道该插件列表是什么以及在哪里。
有什么想法如何将图像上传添加到我的 ckeditor 吗？
更新 在我的组件中执行了以下操作：
public Editor = ClassicEditor;
public config = { plugins: [SimpleUploadAdapter]};
在我的 HTML 中调用相同的
<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" …推荐指数
解决办法
查看次数
ckeditor 5 中的图像上传不适用于 laravel 8
我正在使用 Laravel 8 和 JavaScript 开发一个网站。我使用 ckeditor 5 并且运行良好。当我尝试上传照片时出现问题。照片上传已完成，但收到错误消息并且没有显示照片。我收到以下标题的错误：“无法上传文件：filename.jpg”我认为我没有向前端返回正确的响应。我在route/web.php文件中有这些代码
Route::group(["middleware"=>"auth","prefix"=>"panel"],function (){
Route::post('/post/edit/{post_slug}', [PostController::class,"update"])->name("updatePostRoute");
Route::get('/post/edit/{post_slug}', [RenderPanelController::class,"renderPostEditPage"])->name("renderPostEditPageRoute");
Route::post('/post/ckeditor/upload', [PostController::class,"upload_image_cke"])->name('ckeditor.upload');
});
在后控制器中
public function upload_image_cke(Request $request){
if ($request->hasFile('upload')) {
$originName = $request->file('upload')->getClientOriginalName();
$fileName = pathinfo($originName, PATHINFO_FILENAME);
$extension = $request->file('upload')->getClientOriginalExtension();
$fileName = $fileName . '_' . time() . '.' . $extension;
$request->file('upload')->move(public_path('media'), $fileName);
$CKEditorFuncNum = $request->input('CKEditorFuncNum');
$url = asset('media/' . $fileName);
$msg = 'upload successfully';
$response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
@header('Content-type: text/html; charset=utf-8');
echo $response;
}
}
在刀片文件中：
<textarea type="text" class="form-control" name="content" …推荐指数
解决办法
查看次数
如何在Angular项目中集成CKEditor的上传图片插件
我想在 CKEditor 中添加“选择文件选项”。为此，我指的是有关上传图像插件的文档
单击此图像图标时，将打开以下窗口
没有上传图像选项（选择文件选项）。我想将这个插件与 CKEditor 一起添加。有什么方法可以使用 npm 添加这个吗？
或者有什么其他方法可以在 CKEditor 4 中包含此功能？
推荐指数
解决办法
查看次数
CKEditor 5 不适用于 Vue 3 Composition API
我正在尝试在本地使用 CKEditor 和 vue 3 组合 api，但此处页面上未显示的编辑器可能是组件
<template>
<PageWrapper title="Post">
<CKEditor :editor="editor"></CKEditor>
</PageWrapper>
</template>
<script setup>
import PageWrapper from '@/components/PageWrapper.vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
const editor = ClassicEditor
</script>
怎么了？
推荐指数
解决办法
查看次数
CKEditor Inlineditor - 按类而不是ID选择
所以我有一个页面,其中有几个textareas用于我制作的自定义表单.我可以通过它的ID来定位单个textarea,但我想知道是否有一个简单的方法让CKeditor内联目标所有textareas元素或者让他们的类通过编辑器选择元素.目前我已经为彼此设置了ID,但它们各自都是独一无二的,试图找出最好的方法,但我对javascript不太好,并希望得到一些帮助.
Current code:
<script>
CKEDITOR.inline( 'ID');
</script>
寻找能够针对所有文本区域或目标类而不是ID的代码.
推荐指数
解决办法
查看次数
标签 统计
ckeditor ×10
angular ×2
ckeditor4.x ×2
laravel ×2
django ×1
file-upload ×1
javascript ×1
laravel-5 ×1
php ×1
vue.js ×1