ckeditor5 相关问题

如何强制 CKEditor 使用表格标题？

我想在输出 GitHub 风格的 markdown 时使用 CKEditor 中的表格。要将表格输出为纯 Markdown，必须至少有一个标题行。添加新表时，很容易...

如何在react js中显示ckeditor内容与编辑器中显示的内容完全相同（包括所有嵌入的东西）？

我正在一个博客网站上工作，并努力寻找在react js中显示ckeditor的原始内容的方法，尝试了setInnerHtml <- (bad formating) ? How to display the content in the exact same

CkEditor5 insertContent 功能不起作用

我正在尝试使用 insertContent 方法，但出现一些错误。 这是我的实现 这是编辑内容。 我正在尝试使用 insertContent 方法，但出现一些错误。 这是我的实现 <div id="editor"> <p>This is the editor content.</p> </div> <button onclick="update()">update</button> <script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script> <script> var editorInstance; ClassicEditor .create(document.querySelector('#editor')) .then(editor => { editorInstance = editor; }) .catch(error => { console.error(error); }); function update() { editorInstance.model.insertContent("<p><b>Test</b> Content</p>") } </script> 更新方法应该使用给定的内容更新编辑器源，但我收到错误 控制台错误： 未捕获类型错误：e.is 不是函数 在 xc.Nm (converters.js:777) 在 xc.fire (emittermixin.js:209) 在 xc。 [作为 insertContent] (observablemixin.js:259) 更新时 (ck5.html:19) 在 HTMLButtonElement.onclick (ck5.html:4) 有人可以帮忙解决这个问题吗？ 此错误似乎是由于尝试使用 insertContent 方法插入 HTML 引起的 - 此方法似乎默认需要纯文本字符串，尽管我们可以通过一些额外的步骤使其接受 HTML。 首先，您需要获取 HTML 数据处理器： const htmlDP = editorInstance.data.processor; 接下来，您需要使用我们刚刚获得的 HTML 数据处理器将 HTML 字符串转换为 viewFragment： const viewFragment = htmlDP.toView("<p><b>Test</b> Content</p>"); 最后，我们需要将 viewFragment 转换为 modelFragment： const modelFragment = editorInstance.data.toModel( viewFragment ); 现在我们可以将 modelFragment 传递给 insertContent 方法： editorInstance.model.insertContent(modelFragment); 这应该消除错误并允许将标记字符串插入编辑器中 对于那些尝试在 React 项目中实现它的人， 使用“setData”可能是重要的选择之一。 const ChildComponent1 = ({ editorRef }) => ( <CKEditor {...other props} onReady={(editor) => { editorRef.current = editor; }} /> ) const ChildComponent2 = ({ editorRef }) => { const insertTest = () => { const editorInstance = editorRef.current; if (editorInstance && typeof editorInstance.setData === 'function') { const contentToInsert = '<p>test</p>'; const currentData = editorInstance.getData(); const newData = currentData + contentToInsert; editorInstance.setData(newData); } }; return ( <div css={{ padding: '4px 16px 6px' }} onClick={insertTest}> test </div> ); } Const ParentComponent = () => { const editorRef = useRef(null); return ( <div> <ChildComponent1 editorRef={editorRef} /> <ChildComponent2 editorRef={editorRef} /> </div> ) } 同样的事情发生在我身上，所以我决定使用 textarea 字段和 setData 函数。 因此，就我而言，我使用隐藏的文本区域字段，而不是直接在 CKEditor 中设置数据。 每当它发生变化时，我都会从中获取数据并在 CKEditor 中设置，如下所示： document.querySelector('#textareaField').addEventListener('change', () => { const textareaFieldContent = document.querySelector('#textareaField').value; editor.setData(textareaFieldContent); }); 为了在将数据放入文本区域后触发更改事件，我使用了以下代码： const changeEvent = new Event('change', { bubbles: true }); document.querySelector('#textareaField').dispatchEvent(changeEvent); 如果您已经解决了问题，希望它能对您或其他任何人有所帮助。

为什么ckeditor5中选择的youtube链接在前端看不到？

在 laravel 8 / jquery 3.6 / ckeditor5 中，在管理区域中，我单击“插入媒体”标准工具栏 按钮：https://prnt.sc/dpxoza8_CTlC 我复制粘贴 youtube url ckeditor5 显示了这个...

如何在POST请求中使用XMLHttpRequest正确传递附加参数？

阅读 https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html 文档 在 laravel 8 / jquery 3.6 / app 中，我在 ckeditor5 的内容中上传文件，我需要传递一个

ckeditor 5 插件无法与 svelte 一起使用

我正在尝试让具有 html 支持的 ckeditor 在 svelte 中工作。 从 'svelte' 导入 { onMount }； 从 '@ckeditor/ckeditor5-build-classic' 导入 ClassicEditor； 重要...</desc> <question vote="0"> <ol> <li>我正在尝试让 ckeditor 支持 html，以便在 svelte 中工作。</li> </ol> <pre><code>&lt;script&gt; import { onMount } from &#39;svelte&#39;; import ClassicEditor from &#39;@ckeditor/ckeditor5-build-classic&#39;; import { FullPage } from &#39;@ckeditor/ckeditor5-html-support&#39;; export let text = &#34;&#34;; onMount( () =&gt; { ClassicEditor.create( document.querySelector( &#39;#editor&#39; ), {plugins : [FullPage]}) .then( editor =&gt; { console.log( editor ); editor.setData( text ); editor.model.document.on( &#39;change:data&#39;, () =&gt; { text = editor.getData(); } ); } ) .catch( error =&gt; { console.error( error ); } ); }); &lt;/script&gt; &lt;textarea id=&#39;editor&#39;&gt;&lt;/textarea&gt; </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 -&gt; node_modules/@ckeditor/ckeditor5-engine/src/view/treewalker.js -&gt; node_modules/@ckeditor/ckeditor5-engine/src/view/position.js node_modules/@ckeditor/ckeditor5-engine/src/view/documentselection.js -&gt; node_modules/@ckeditor/ckeditor5-engine/src/view/selection.js -&gt; node_modules/@ckeditor/ckeditor5-engine/src/view/documentselection.js node_modules/@ckeditor/ckeditor5-engine/src/model/position.js -&gt; node_modules/@ckeditor/ckeditor5-engine/src/model/treewalker.js -&gt; 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 &#39;@ckeditor/ckeditor5-html-support&#39;; </code></pre> <p>编辑器将被实例化。 这可能是我的 rollup.config.js 的问题 --</p> <pre><code>import svelte from &#39;rollup-plugin-svelte&#39;; import resolve from &#39;@rollup/plugin-node-resolve&#39;; import commonjs from &#39;@rollup/plugin-commonjs&#39;; import livereload from &#39;rollup-plugin-livereload&#39;; import { terser } from &#39;rollup-plugin-terser&#39;; import css from &#34;rollup-plugin-css-only&#34;; import autoPreprocess from &#39;svelte-preprocess&#39;; import copy from &#39;rollup-plugin-copy&#39;; import scss from &#39;rollup-plugin-scss&#39;; import polyfillNode from &#39;rollup-plugin-polyfill-node&#39;; import svg from &#39;rollup-plugin-svg&#39;; const production = !process.env.ROLLUP_WATCH; export default { input: &#39;svelte-components/src/main.js&#39;, // (1) output: { sourcemap: true, format: &#39;iife&#39;, name: &#39;app&#39;, file: &#39;static/js/bundle.js&#39; }, plugins: [ svg(), css({ output: &#34;extra_bundle.css&#34; }), scss({ fileName: &#34;bootstrap.css&#34;, failOnError: true, runtime: require(&#34;sass&#34;), }), svelte({ // enable run-time checks when not in production dev: !production, // we&#39;ll extract any component CSS out into // a separate file - better for performance css: css =&gt; { css.write(&#39;bundle.css&#39;); // (3) } }), // If you have external dependencies installed from // npm, you&#39;ll most likely need these plugins. In // some cases you&#39;ll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: [&#39;svelte&#39;] }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production &amp;&amp; serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production &amp;&amp; livereload(&#39;svelte-components&#39;), // (4) // If we&#39;re building for production (npm run build // instead of npm run dev), minify production &amp;&amp; terser(), copy({ targets: [ { src: &#39;node_modules/bootstrap/dist/js/bootstrap.min.js&#39;, dest: &#39;static/js&#39; }, ], verbose: true, }), polyfillNode(), // Add this plugin terser() ], watch: { clearScreen: false } }; function serve() { let started = false; return { writeBundle() { if (!started) { started = true; require(&#39;child_process&#39;).spawn(&#39;npm&#39;, [&#39;run&#39;, &#39;start&#39;, &#39;--&#39;, &#39;--dev&#39;], { stdio: [&#39;ignore&#39;, &#39;inherit&#39;, &#39;inherit&#39;], shell: true }); } } }; } </code></pre> <p>如果您想尽快看到此问题得到解决，请在这篇文章中添加👍反应。</p> </question> </body></html>

CKEditor 5下Enter键如何新建行？

我使用 CKEditor 5 将编辑器添加到我的角度项目中。默认情况下，Enter+shift 创建新行。我只想使用 Enter 键。我尝试添加事件列表器并连接到内容编辑器。 新线路

如何给图片添加属性

我想为图像添加属性 这是例子 但现在我不知道我应该做什么文件？ 如果 alt =“你好”，则标题 =“你好” 我想自动更改标题参考...

CKEditor5 块小部件。如何使用 elementToStructure 进行向下编辑？

我正在将一些 CKEditor4 小部件转换为 CKEditor5。这些是块小部件，我通常遵循 SimpleBox 示例。我基本上是成功的，但以下看似简单

CKEditor5 块小部件。如何避免同时需要容器和可编辑元素？

我正在将一些 CKEditor4 小部件转换为 CKEditor5。这些是块小部件，我通常遵循 SimpleBox 示例。我基本上是成功的，但以下看似简单

如何让子元素进入<a>以将数据附加到标题属性

函数createLinkElement 在里面 这都是我编辑的，这就是结果 在此输入图像描述 我想从标签中获取孩子，将其添加到标题属性中，例如 在此输入图像描述 ...

使用 ckeditor 5 动态添加 Textarea

我创建了一个 jquery 来使用 ckeditor 5 动态添加新的文本区域。编辑器工作正常但问题是将数据保存到数据库时。它显示空数据。只有第一个编辑器有数据和 o...

CKEditor 5 链接：设置链接的默认目标或编辑目标

在 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 中的使用方法是什么？ 我想用这些

手动实现默认字体不会更新 getData()

我正在尝试手动实现默认字体，因为没有直接的方法可以做到这一点。我无法将 p 标签 CSS 编辑为某种字体，因为我想保持以前的文本相同，只有新的 ...

如何在 ckeditor5 中更改 entermode br 而不是 p？

在 cdn 的 ckeditor5 中包含 ckeditor.js 我想更改 entermode 而不是 ？可能吗？

任何使用 CKEditor 5 的成功电子邮件编辑器实现？

问题 我们正在努力为 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。