ckeditor5 相关问题

CKEditor 5是一组随时可用的富文本编辑器，使用强大的框架创建，使您能够创建任何类型的文本编辑解决方案，并在其中包含实时协作编辑。将此标记用于任何与CKEditor 5相关的问题。有关CKEditor 4的问题，请使用“ckeditor4.x”标签。

CKEditor Webpack 配置错误

我正在尝试为 CKEditor 5 创建 webpack 配置。我正在尝试创建自定义构建。这是我的 webpack.mix.js const mix = require('laravel-mix'); require('laravel-mix-purgecss'); const { 样式...

javascript vue.js webpack ckeditor5

回答 1 投票 0

在我的nextjs项目中哪里放置ckeditor5自定义构建？（AppRouter-SRC目录）

大家好，我想为我的 nextjs 项目提供一个所见即所得的编辑器。经过一番研究后，我决定在我的项目中使用 ckeditor5。我将 next14 与 typescript 和 src 目录一起使用。我赢了...

next.js ckeditor5

回答 1 投票 0

无法使用vue js向ckeditor 5添加自定义图像上传适配器插件

我正在尝试使用 Vue js / Inertia / Vite Js / Laravel 为 ckrditor5 制作自定义图像上传插件，我阅读了文档并使其与指南完全相同，但我在 co...

laravel vue.js ckeditor inertiajs ckeditor5

回答 1 投票 0

Vue 中自定义 CKEditor5 错误：编译失败

我想在我的 vue 应用程序中实现自定义 CKEditor5，但收到编译失败错误。我使用 ckeditor 在线工具创建了自定义构建。之后我将文件放入...

javascript vue.js ckeditor5

回答 1 投票 0

Angular esbuild ckeditor。没有为“.svg”配置加载器

我使用ckEditor。如果我导入 ckEditor 插件，我会收到此错误没有为“.svg”文件配置加载程序：node_modules/@ckeditor/ckeditor5-core/theme/icons/table.svg 角度版本：17....

angular ckeditor5 esbuild

回答 1 投票 0

CKEditor 5 插件：带有输入、textara 和复选框的弹出窗口

我已经创建了一个 CKEditor 4 插件（在 TYPO3 CMS 中），编辑者可以使用它向 A 标签添加数据属性。我现在想将此插件迁移到版本 5，看起来几乎

javascript ckeditor typo3 ckeditor5

回答 1 投票 0

CKEditor5 从数据库加载内容时不会转义 HTML

我的 ejs 模板中有以下内容： // 经典编辑器 </desc> <question vote="0"> <p>我的 ejs 模板中有以下内容：</p> <pre><code><script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script> <script> // Classic Editor ClassicEditor .create( document.querySelector( '#editor' ), { ckfinder: { uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' } } ) .catch( error => { console.error( error ); } ); </script> </code></pre> <p>HTML 元素如下所示：</p> <pre><code><div class="mb-3"> <label for="content" class="form-label">Content</label> <textarea class="form-control" id="editor" rows="4" cols="50" name="content" value="<% if(editMode) { %><%= event.content %><%}%>"></textarea> </div> </code></pre> <p>当我查看表单时，我可以看到并使用 CKEditor。</p> <p>但是，当我在编辑模式下加载表单时，CKEditor 也会在前端渲染 HTML 标签。</p> <p>数据库中保存的内容如下：</p> <p><a href="https://i.stack.imgur.com/wJ79H.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3dKNzlILnBuZw==" alt=""/></a></p> <p>见附图</p> <p>如何在不显示HTML的情况下正确显示内容？例如，如果文本为粗体，则它应该以粗体显示，而不是强标签本身。</p> <p><a href="https://i.stack.imgur.com/OuelR.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL091ZWxSLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>这一切都是 HTML 问题。</p> <p>文本区域定义不正确。相反，它应该看起来像这样：</p> <pre><code><textarea class="form-control" id="editor" rows="4" cols="50" name="content"> <% if(editMode) { %><%- event.content %><%}%> </textarea> </code></pre> </answer> </body></html>

node.js express ejs ckeditor5

回答 0 投票 0

如何从 CKEditor-->uploads()-->_initRequest() 传递 <div> 元素（以获取其 id）？

我在视图中有 2 个 CKEditor 字段 ()。 @Html.Raw(@Model.Description_1) @Html.Raw(@Model.Description... 我在视图中有 2 个 CKEditor 字段 ()。 <div id="editor_1"> @Html.Raw(@Model.Description_1) </div> <div id="editor_2"> @Html.Raw(@Model.Description_2) </div> 有一段代码将上传的图像传输到控制器： <script> class MyUploadAdapter { upload() { return this.loader.file .then( file => new Promise( ( resolve, reject ) => { this._initRequest(); this._initListeners( resolve, reject, file ); this._sendRequest( file ); } ) ); } _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); } } </script> 如何在 _initRequest() 中传递元素的链接并了解用户将图像上传到哪个字段（我需要获取字段 id）？我试图在接收上传图像的控制器（在 Request 类中）中找出答案，但我做不到。 foreach（Request.Form.Files 中的 IFormFile 照片）谢谢！您可以创建自定义上传适配器，将文件作为请求的一部分发送到后端。创建适配器实例时，可以通过editor.sourceElement.getAttribute('id')获取当前元素的id。然后，新建一个XMLHttpRequest，并将元素id添加到请求头中，最后通过HTTP请求头发送到后端。后端通过一个方法从请求头中获取对应的id。以下是您可以用作参考的示例： @model Mymodel <div class="tab-panels"> <div id="editor_1"></div> @Html.Raw(Model?.Description_1) <div id="editor_2"></div> @Html.Raw(Model?.Description_2) </div> <script src=https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js></script> <script> class MyUploadAdapter { constructor(loader, fieldId) { this.loader = loader; this.url = '/Upload/DocUploadImage'; this.fieldId = fieldId; } // Starts the upload process. upload() { return this.loader.file .then(file => new Promise((resolve, reject) => { this._initRequest(); this._initListeners(resolve, reject, file); this._sendRequest(file); })); } // Aborts the upload process. abort() { if (this.xhr) { this.xhr.abort(); } } _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); xhr.open('POST', this.url, true); xhr.setRequestHeader('X-FieldId', this.fieldId); xhr.responseType = 'json'; } _initListeners(resolve, reject, file) { const xhr = this.xhr; const loader = this.loader; const genericErrorText = `Couldn't upload file: ${file.name}.`; xhr.addEventListener('error', () => reject(genericErrorText)); xhr.addEventListener('abort', () => reject()); xhr.addEventListener('load', () => { const response = xhr.response; if (!response || response.error) { return reject(response && response.error ? response.error.message : genericErrorText); } resolve({ default: response.url }); }); if (xhr.upload) { xhr.upload.addEventListener('progress', evt => { if (evt.lengthComputable) { loader.uploadTotal = evt.total; loader.uploaded = evt.loaded; } }); } } // Prepares the data and sends the request. _sendRequest(file) { const data = new FormData(); data.append('upload', file); this.xhr.send(data); } } function MyCustomUploadAdapterPlugin(editor) { editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { const fieldId = editor.sourceElement.getAttribute('id'); return new MyUploadAdapter(loader, fieldId); }; } ClassicEditor.create(document.querySelector('#editor_1'), { extraPlugins: [MyCustomUploadAdapterPlugin] }) .catch(error => { console.error(error); }); ClassicEditor.create(document.querySelector('#editor_2'), { extraPlugins: [MyCustomUploadAdapterPlugin] }) .catch(error => { console.error(error); }); </script> 接受方式： public async Task<JsonResult> DocUploadImage() { var fieldId = HttpContext.Request.Headers["X-FieldId"].ToString(); return Json("OK"); } 当我发送图像时：我可以在请求头中获取对应的元素id：

javascript asp.net-core ckeditor ckeditor5

回答 1 投票 0

错误：找不到模块“@ckeditor/ckeditor5-build-classic”角度9的声明文件

我想在 Angular 9 中使用 ckeditor，我按照 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html 中的说明进行操作但它在我导入“@

angular angular9 ckeditor5

回答 7 投票 0

如何使用ckeditor5默认设置粗体和居中文本

我正在使用ckeditor5，我试图将编辑器默认设置为粗体和居中。当用户开始书写时，文本将加粗并居中。我看到有人问类似的问题，但没有一个...

javascript html css ckeditor5

回答 1 投票 0

ckeditor5 - 如何默认设置粗体和居中文本

我正在使用ckeditor5，我试图将编辑器默认设置为粗体和居中。当用户开始书写时，文本将加粗并居中。我看到有人问类似的问题，但没有一个...