CKEditor 5是一组随时可用的富文本编辑器,使用强大的框架创建,使您能够创建任何类型的文本编辑解决方案,并在其中包含实时协作编辑。将此标记用于任何与CKEditor 5相关的问题。有关CKEditor 4的问题,请使用“ckeditor4.x”标签。
如何在POST请求中使用XMLHttpRequest正确传递附加参数?
阅读 https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html 文档 在 laravel 8 / jquery 3.6 / app 中,我在 ckeditor5 的内容中上传文件,我需要传递一个
我正在尝试让具有 html 支持的 ckeditor 在 svelte 中工作。 从 'svelte' 导入 { onMount }; 从 '@ckeditor/ckeditor5-build-classic' 导入 ClassicEditor; 重要...</desc> <question vote="0"> <ol> <li>我正在尝试让 ckeditor 支持 html,以便在 svelte 中工作。</li> </ol> <pre><code><script> import { onMount } from 'svelte'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import { FullPage } from '@ckeditor/ckeditor5-html-support'; export let text = ""; onMount( () => { ClassicEditor.create( document.querySelector( '#editor' ), {plugins : [FullPage]}) .then( editor => { console.log( editor ); editor.setData( text ); editor.model.document.on( 'change:data', () => { text = editor.getData(); } ); } ) .catch( error => { console.error( error ); } ); }); </script> <textarea id='editor'></textarea> </code></pre> <h3>✔️预期结果</h3> <p>我希望上面的代码能够生成一个支持 html 的 ckeditor 实例。</p> <h3>❌实际结果</h3> <p>我的 js 使用 rollup 构建时出现以下错误</p> <pre><code>(!) Circular dependencies node_modules/@ckeditor/ckeditor5-engine/src/view/position.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/treewalker.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/position.js node_modules/@ckeditor/ckeditor5-engine/src/view/documentselection.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/selection.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/documentselection.js node_modules/@ckeditor/ckeditor5-engine/src/model/position.js -> node_modules/@ckeditor/ckeditor5-engine/src/model/treewalker.js -> node_modules/@ckeditor/ckeditor5-engine/src/model/position.js ...and 4 more created static/js/bundle.js in 13.7s </code></pre> <h3>❓可能的解决方案</h3> <p>如果我从插件数组中删除该行以及 FullPage,那么我就没有问题了。</p> <pre><code>import { FullPage } from '@ckeditor/ckeditor5-html-support'; </code></pre> <p>编辑器将被实例化。 这可能是我的 rollup.config.js 的问题 --</p> <pre><code>import svelte from 'rollup-plugin-svelte'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import css from "rollup-plugin-css-only"; import autoPreprocess from 'svelte-preprocess'; import copy from 'rollup-plugin-copy'; import scss from 'rollup-plugin-scss'; import polyfillNode from 'rollup-plugin-polyfill-node'; import svg from 'rollup-plugin-svg'; const production = !process.env.ROLLUP_WATCH; export default { input: 'svelte-components/src/main.js', // (1) output: { sourcemap: true, format: 'iife', name: 'app', file: 'static/js/bundle.js' }, plugins: [ svg(), css({ output: "extra_bundle.css" }), scss({ fileName: "bootstrap.css", failOnError: true, runtime: require("sass"), }), svelte({ // enable run-time checks when not in production dev: !production, // we'll extract any component CSS out into // a separate file - better for performance css: css => { css.write('bundle.css'); // (3) } }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'] }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('svelte-components'), // (4) // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), copy({ targets: [ { src: 'node_modules/bootstrap/dist/js/bootstrap.min.js', dest: 'static/js' }, ], verbose: true, }), polyfillNode(), // Add this plugin terser() ], watch: { clearScreen: false } }; function serve() { let started = false; return { writeBundle() { if (!started) { started = true; require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true }); } } }; } </code></pre> <p>如果您想尽快看到此问题得到解决,请在这篇文章中添加👍反应。</p> </question> </body></html>
我使用 CKEditor 5 将编辑器添加到我的角度项目中。默认情况下,Enter+shift 创建新行。我只想使用 Enter 键。我尝试添加事件列表器并连接到内容编辑器。 新线路
我想为图像添加属性 这是例子 但现在我不知道我应该做什么文件? 如果 alt =“你好”,则标题 =“你好” 我想自动更改标题参考...
CKEditor5 块小部件。如何使用 elementToStructure 进行向下编辑?
我正在将一些 CKEditor4 小部件转换为 CKEditor5。这些是块小部件,我通常遵循 SimpleBox 示例。我基本上是成功的,但以下看似简单
CKEditor5 块小部件。如何避免同时需要容器和可编辑元素?
我正在将一些 CKEditor4 小部件转换为 CKEditor5。这些是块小部件,我通常遵循 SimpleBox 示例。我基本上是成功的,但以下看似简单
函数createLinkElement 在里面 这都是我编辑的,这就是结果 在此输入图像描述 我想从标签中获取孩子,将其添加到标题属性中,例如 在此输入图像描述 ...
我创建了一个 jquery 来使用 ckeditor 5 动态添加新的文本区域。编辑器工作正常但问题是将数据保存到数据库时。它显示空数据。只有第一个编辑器有数据和 o...
在 CKEditor 5 中,我没有在链接对话框中看到目标属性字段。 如何添加这样的字段?或者将 target=_blank 设置为默认值。 谢谢
在 CKEditor 5 中,我可以使用 writer.createElement 创建一个新的“restricted-editing-exception”span 元素吗?
我希望以编程方式获取一段文本,对其进行修改,然后使用自定义插件将其重新插入到编辑器中的“受限编辑异常”元素中。我能得到的最接近的是
CKEditor5 - 使用 javascript 在编辑器的光标位置附加内容
我用的是CKEditor5 classic和文档类型。 我有一份报告,我需要通过在文本中双击它来输入其中一个报告机构的参数。为此,我需要找到位置...
如何在 TYPO3 12 中激活 CKEditor 5 中的字体功能?
TYPO3 12随附CKEditor 5,与之前的版本4相比配置有所不同。 TYPO3 12 中的字体功能在CKEditor 5 中的使用方法是什么? 我想用这些
我正在尝试手动实现默认字体,因为没有直接的方法可以做到这一点。我无法将 p 标签 CSS 编辑为某种字体,因为我想保持以前的文本相同,只有新的 ...
如何在 ckeditor5 中更改 entermode br 而不是 p?
在 cdn 的 ckeditor5 中包含 ckeditor.js 我想更改 entermode 而不是 ?可能吗?
问题 我们正在努力为 CKEditor 5 获得最佳配置,以允许用户撰写响应式电子邮件、回复电子邮件以及将内容复制粘贴到其中。我们的软件还可以捕获 em...
如何在 ASP .net core mvc 中使用的 CK 经典编辑器 5 中添加自动完成等新插件?
在这里,我在 C# 文件视图中集成了经典的 CK-Editor。我正在尝试在经典编辑器中添加新的自动完成插件。 在这里,我在 C# 文件的视图中集成了经典的 CK-Editor。我正在尝试在经典编辑器中添加新的自动完成插件。 <div class="card-body areacls cardBox" contenteditable="true" id="@areaId" data-href="@item.Id" onclick="createEditor(@areaId)"> @Html.Raw(item.Description) </div> <script> var editors = new Map(); function createEditor(elementToReplace) { return ClassicEditor .create(elementToReplace) .then(editor => { editors.set(elementToReplace, editor); }) .catch(err => console.error(err.stack)); } </script> 尝试使用F12查看您的控制台中是否有任何错误消息。 我猜你错过了<script>,参考[ckeditor.com] :(https://cdn.ckeditor.com/) 要开始在您的网站上使用 CKEditor 5 构建,请添加一个 <script> 标记到您的 HTML 页面: 添加以下代码: <script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/classic/ckeditor.js"></script> 结果: Classic Editor 5版本有一些内置插件。你不能在 5 版本中添加新插件。如果你想使用像mention这样的新插件,你必须从这里创建你自己的自定义编辑器https://ckeditor.com/ckeditor-5/online-builder/或者您可以更改预定义构建,如 Classic、Inline、Balloon、Balloon-block、Document、Multi-root、Superbuild。
在 ckeditor5 中,如何更改 entermode br 而不是 p?
ckeditor5 通过 cdn 包含 ckeditor.js 我想改变进入模式而不是? 是否可以? 谢谢
我们正在研究一个涉及在 DataTables 编辑器中启用所见即所得编辑器的项目。 DTE 有用于 CKE、TinyMCE 和我认为是 Quill 的插件。 CKEditor5 在 DTE 中工作但是当你去编辑公司时......
如何在 React App 中使用 Codeblock 插件显示 CKEditor
我正在寻求帮助以解决 React 中 CKEditor5 的一个非常具体的问题。 我能够在我的 React 项目中实现基本的 CKEditor5,代码就在这里: (代码可能不干净,我很...
使用 mix('dist/js/ckeditor-classic.js') 时如何获取值 ckeditor }}
我通过添加这个脚本来使用 ckeditor5。我想获取该值,但出现错误 Uncaught ReferenceError: ClassicEditor is not defined。这就是我所做的,不知道哪里错了,ca...