ckeditor 相关问题

CKEditor是一个开源富文本编辑器生态系统，支持实时协作。将此标记与[ckeditor4]和[ckeditor5]标记一起使用以指示编辑器版本。

然后在另一个JS函数中，我可以通过

ckeditor ckeditor5

回答 3 投票 0

如何使自定义图像上传适配器在php laravel for CK编辑器5Ckeditor5 - 经典编辑

Ckeditor5 - 经典编辑 <pre><code><html lang="en"> <head> <meta charset="utf-8"> <title>CKEditor 5 – Classic editor</title> <script src="{{adminAssets('plugins/ckeditor5-build-classic/ckeditor.js')}}"></script> </head> <body> <h1>Classic editor</h1> <textarea id="editor" rows="4"> </textarea> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> </body> </html> </code></pre> <p>这是我初始化CK编辑器5的方式，这不是上传图像，因此我尝试了从Stack中尝试一些摘要以获取自定义图像上传适配器。 <strong>在这里是</strong></p> <pre><code><html lang="en"> <head> <meta charset="utf-8"> <title>CKEditor 5 – Classic editor</title> <script src="{{adminAssets('plugins/jquery/jquery.min.js')}}"></script> <script src="{{adminAssets('plugins/parsley/parsley.min.js')}}"></script> <script src="{{adminAssets('plugins/ckeditor5-build-classic/ckeditor.js')}}"></script> </head> <body> <h1>Classic editor</h1> <textarea id="editor" rows="4"> </textarea> <input type="hidden" value="{{url('/')}}" id="url" name="url"> <script> var base_path = $('#url').val(); var uploadPath = "/storage/app/public"; var uploadUrl = base_path + uploadPath; console.log(uploadUrl); class MyUploadAdapter { constructor(loader) { // CKEditor 5's FileLoader instance. this.loader = loader; // URL where to send files. this.url = uploadUrl } // Starts the upload process. upload() { return new Promise((resolve, reject) => { this._initRequest(); this._initListeners(resolve, reject); this._sendRequest(); }); } // Aborts the upload process. abort() { if (this.xhr) { this.xhr.abort(); } } // Example implementation using XMLHttpRequest. _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); xhr.open('POST', this.url, true); xhr.responseType = 'json'; } // Initializes XMLHttpRequest listeners. _initListeners(resolve, reject) { const xhr = this.xhr; const loader = this.loader; const genericErrorText = 'Couldn\'t upload file:' + ` ${ loader.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); } // If the upload is successful, resolve the upload promise with an object containing // at least the "default" URL, pointing to the image on the server. 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() { const data = new FormData(); data.append('upload', this.loader.file); this.xhr.send(data); } } function MyCustomUploadAdapterPlugin(editor) { editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { return new MyUploadAdapter(loader); }; } ClassicEditor .create(document.querySelector('#editor'), { extraPlugins: [MyCustomUploadAdapterPlugin], // ... }) .catch(error => { console.log(error); }); </script> </body> </html> </code></pre> <p>它给了我一秒钟的图像预览，但否认上传。我自己没有自己做这个适配器。我从Stack复制了。请建议我如何使用php<strong>进行CK Editor</strong>进行图像适配器的任何好方法 </p> </question> <answer tick="false" vote="0">尝试这个解决方案。您也可以遵循本教程，对我有帮助：<p>https：//www.youtube.com/watch？v =hufhhf2mshu<a href="https://www.youtube.com/watch?v=hufhhf2MSHU" rel="nofollow noreferrer"></a> </p><p></p> <div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="false" data-babel="false" data-babel-preset-react="false"> <div><code>class MyUploadAdapter { constructor(loader) { // The file loader instance to use during the upload. this.loader = loader; } // 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(); } } // Initializes the XMLHttpRequest object using the URL passed to the constructor. _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); xhr.open('POST', '{{route("image-upload")}}', true); xhr.setRequestHeader('x-csrf-token', '{{ csrf_token() }}'); xhr.responseType = 'json'; } // Initializes XMLHttpRequest listeners. _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) { // Prepare the form data. const data = new FormData(); data.append('upload', file); // Send the request. this.xhr.send(data); } } function SimpleUploadAdapterPlugin(editor) { editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { // Configure the URL to the upload script in your backend here! return new MyUploadAdapter(loader); }; } ClassicEditor.create(document.querySelector('#description_editor'), { extraPlugins: [SimpleUploadAdapterPlugin] }) .then(editor => { editor.setData(document.querySelector('#description').value); editor.model.document.on('change:data', () => { document.querySelector('#description').value = editor.getData(); }) }).catch(error => { console.error(error); });</code><pre> </pre><code><div class="mb-3"> <label for="description" class="form-label">{{__('strings.description')}} <span class="text-danger">*</span></label> <div class="ck-editor" id="description_editor"></div> <textarea name="description" class="form-control @error('description') border-red-500 @enderror mt-1 rounded-md ms-2" id="description" aria-describedby="descriptionHelp" placeholder="" required hidden></textarea> @error('description') <div id="descriptionHelp" class="form-text">{{ $message }}</div> @enderror </div></code><pre> </pre> </div> </div><p> </p> </answer></body>

javascript php laravel ckeditor image-upload

回答 0 投票 0

我一直在研究Angular 5项目。在这个项目中，需要使用CKEditor。我已经成功地集成了ckeditor。现在我需要使用@Mentions插件。

this.myckeditor.valueaccessor.instance.config.extraplugins =“ tedions”;

angular ckeditor

回答 1 投票 0

用JavaScript学习CKEditor Textarea的Textarea值我是JS的学习者，尽管我花了几个小时阅读教程，但我仍然遇到了很多问题，但是我仍然在确切地找出如何找到什么用时遇到了问题。

我想做的就是拥有它，以便当某人键入textarea时，无论他们输入什么，它们都会出现在页面不同部分中的div中。我有一个简单的文本输入可以做到这一点，但是由于文本区域是一个ckeditor，因此类似的代码不起作用。

javascript ckeditor

回答 6 投票 0

您的浏览器不支持使用工具栏按钮或上下文菜单选项效

html bootstrap-4 ckeditor textarea rich-text-editor

回答 1 投票 0

如何使用 @ckeditor/strapi-plugin-ckeditor定制ckeditor 5调色板0.0.10

javascript node.js ckeditor strapi ckeditor5

回答 1 投票 0

Django CKEditor 允许的内容

有谁知道如何让advancedContentFilter在django-ckeditor配置设置中工作？我试图过滤粘贴在 p 标签中以删除样式属性。我在设置中使用以下内容...

django ckeditor

回答 5 投票 0

如何在 CkEditor5 Angular 中使用拖放功能

我根据此链接使用CkEditor5 在联系人列表中，我想应用拖放，但它无法正常工作，看来这个链接没有正确解释如何调用拖动和...

javascript html angular typescript ckeditor

回答 1 投票 0

CKEditor 4.5拖放图片上传-如何在json响应中返回新尺寸？

我可以使用 CKEditor 4.5.1 进行拖放图像上传。非常好的功能！在服务器端，我正在调整大图像的大小。我的 JSON 响应返回调整大小的图像 url（由

ckeditor

回答 3 投票 0

使用 Craft CMS 中的 CKEditor 配置选项将服装类添加到列表中

我在 Craft CMS 中使用 CKEditor，想要将自定义类添加到（无序列表）和（有序列表）。虽然我已经能够成功地将自定义类添加到其他 elem... 我在 Craft CMS 中使用 CKEditor，想要将自定义类添加到 <ul>（无序列表）和 <ol>（有序列表）。虽然我已经能够成功地将自定义类添加到 CKEditor 中的其他元素，但我很难将相同的逻辑应用于列表元素。尽管知道可以自定义 CKEditor 的行为，但我无法弄清楚将自定义类动态附加到编辑器以及编辑器中的元素的确切实现。我的目标是确保每当在 CKEditor 中创建或编辑列表时，它都会自动接收其各自的自定义类。最后我希望我的 HTML 代码看起来像这样： <ul class="class-ul"> <li>entry 1</li> <li>entry 2</li> <li>entry 3</li> </ul> 我已经尝试过这样的事情： "list":{ "options":[ { "model": "bulleted", "title": "Bulleted List", "view": { "attributes": { "id": "list-bulleted-0" }, "classes": [ "list-bulleted" ], "name": "ul" } } ]} 我知道这段代码行不通，但我尝试了任何围绕它的方法也没有成功。也许其他人也有和我一样的问题。我可以通过使用 Twig 的替换过滤器简单地重写输出来实现此目的，如下所示： {% if richText %} {{ richText|replace({ '<dl>': '<ul class="my-dl-styles">', '<ol>': '<ol class="my-ol-styles">', '<ul>': '<ul class="my-ul-styles">' }) }} {% endif %}

class plugins ckeditor ckeditor5 craftcms

回答 1 投票 0

更改 CKEditor 版本 4 以包含上传图像

flask 中的 CKEDITOR 库仅更新到版本 4。我相信这对我的目的来说很好。期望的结果是将 image2 选项添加到 CKEDITOR。以下是我当前的 Javascri...

javascript flask ckeditor ckeditor4.x

回答 1 投票 0

CKEditor 5工具栏固定位置

当您在 CKEditor 5 classic 中添加长内容时，滚动时工具栏会固定在浏览器窗口的顶部。但我有一个固定位置的白色徽标区域，其下方有一个菜单栏...

javascript ckeditor css-position ckeditor5

回答 2 投票 0

删除元素时发生CKEditor事件？

JavaScript（或 CKEditor）中是否有一种方法可以检测图像何时从 CKEditor 中删除。我需要它作为与图像一起插入的标题元素，但是一旦我删除图像，...