ckeditor 相关问题

使用 Ckeditor 上传 Django 图像失败未定义

我正在尝试使用 Django 创建一个博客页面。我正在使用 CKEditor 添加文本。当我在本地上传图片时没有任何问题，但是当我将项目部署到服务器时遇到问题。

CKEditor 5 与 Nuxt 3 - “组件缺少模板或渲染功能”

我已经安装了依赖项： npm 我@ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-vue 然后，在组件中实现它： 我已经安装了依赖项： npm i @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-vue 然后在组件中实现： <template> <div class="w-full h-[400px]"> <CKEditor v-model="text" :editor="ClassicEditor" :config="config"/> </div> </template> 组件设置： import ClassicEditor from '@ckeditor/ckeditor5-build-classic' import CKEditor from "@ckeditor/ckeditor5-vue"; const config = { toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ], heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' }, { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' } ] } } const text = ref('') 组件包含它的根组件： <client-only> <InputWysiwyg/> </client-only> 当我使用所见即所得打开页面时，我收到警告：组件缺少模板或渲染功能。在 CKEditor 元素中。我做错了什么？ 好吧，如果有人要搜索这个，我建议您自己创建 CKEditor 实例： const editor = ref(null) const ck = ref(null) const init = () => { ck.value = ClassicEditor.create(editor.value) } onMounted(() => { init() }) <template> <div class="w-full h-[400px]"> <div class="w-full h-full" ref="editor"></div> </div> </template>

CK Editor 5 无法在编辑器之外添加评论？

每当我尝试在 ck-editor 5 中的编辑器外部添加注释时。 出现以下错误： 错误类型错误：无法读取 null 的属性（读取“名称”） 虽然我正在关注“ck编辑器

有没有办法构建未缩小的 CKEditor 发行版

我已经从这里克隆了源存储库，我想将所有内容构建到一个文件中，但不希望该文件被丑化。我需要在构建文件中调整任何设置来防止

如何获得 HTML 输出而不是 Markdown？

我目前正在使用 CKEditor 5 在我的应用程序中拥有一个文本编辑器（用 nextjs 制作）。问题是，我希望我的编辑器输出是 HTML 而不是 Markdown。 当前编辑器代码 我目前正在使用 CKEditor 5 在我的应用程序中拥有一个文本编辑器（用 nextjs 制作）。问题是，我希望我的编辑器输出是 HTML，而不是 markdown。 当前编辑器代码 <CKEditor // @ts-ignore editor={CKEditorCustomBuild} onChange={(event: any, editor: any) => { const data = editor.getData(); onChange(data); }} /> data函数内部onChange的输出类似于： Hello there, my _name_ is **John Doe**. 我想要以下格式： Hello there, my <u>name</u> is <strong>John Doe</strong>. 我怎样才能实现这一目标？ 与@endbermudas 的评论中的每个讨论： CKEditor 5 默认以 HTML 格式输出内容。如果您将 Markdown 作为输出，则您可能正在使用 Markdown 插件或配置为输出 Markdown 的自定义构建。

无法通过ajax使用CKEDITOR插入php数据

我已经包含了CKEDITOR（html编辑器）来操作文本区域中的文本。我只尝试使用 php （没有 ajax）并且数据已成功插入到数据库中。问题是...

从 CKEditor 中删除页脚标签

我在我的网站中使用CKEditor，在这里我想删除页脚标签。我该怎么做？我正在使用 CKEditor 添加一些有用的内容。它工作正常，但我不想显示页脚标签......

如何通过单击外部元素将内容添加到 CKeditor5 中

我的页面上有几个位于 Ckeditor 之外的按钮，我想单击它们并向 Ckeditor5 添加内容。 通过单击按钮，我进行 ajax 调用以从

CKEditor 5 / Laravel Livewire 即使有内容也会返回“null”

我使用 CKEditor 5 作为我的所见即所得编辑器。它加载良好，看起来很完美 - 但是当我提交表单并尝试获取编辑器的内容时，它返回 null。 我的 HTML 代码： 我使用 CKEditor 5 作为我的所见即所得编辑器。它加载良好，看起来很完美 - 但是当我提交表单并尝试获取编辑器的内容时，它返回 null。 我的 HTML 代码： <form wire:submit.prevent="sendBulkEmail"> <div> <textarea wire:model="message" class="form-control" id="ckeditor"></textarea> </div> <div class="mb-4"> <button type="submit" class="btn btn-alt-primary"> Send Bulk Email </button> </div> </form> <script> ClassicEditor .create( document.querySelector( '#ckeditor' ) ) .catch( error => { console.error( error ); } ); </script> 控制器： public $message; dd($this->message); 有什么想法可以让 Livewire 发挥价值吗？ 查看了google、CKEditor Docs 和其他步骤。 CKEditor 将创建一个单独的 DOM 元素作为您所选元素的同级元素，在本例中为#ckeditor（在浏览器检查器中检查）。您的 Livewire 模型绑定适用于原始 textarea 元素，它实际上从未改变。 您需要做的是挂钩编辑器数据更改事件，然后使用（例如）事件将该数据发送到 Livewire。 editor.model.document.on( 'change:data', () => { console.log( 'The data has changed!' ); Livewire.emit('ckeditorChanged', editor.getData()) });

React js：图片上传在 CKEditor 中不起作用

CKEditor 图片上传不起作用，下面是代码 CKEditor 图片上传不起作用，下面是代码 <CKEditor editor={ ClassicEditor } data={this.state.miscNotesData.miscnote} onInit={ editor => { // You can store the "editor" and use when it is needed. console.log( 'Editor is ready to use!', editor ); } } onChange={ ( event, editor ) => { const data = editor.getData(); this.handleChange(data); console.log( { event, editor, data } ); } } /> 错误： backend.js:6 filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter 如文档中提供的https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html 在 CKEDitor 中上传图像有 4 个选项：Easy Image（专有）、CKFinder（需要 PHP 或 ASP.net 上的连接器）、简单适配器、Base64 适配器 我在 Node js 服务器上使用简单适配器来实现此目的： 首先，我在ClassicEditor中安装了SimpleUploadAdapter，然后在CKEditor中设置了配置： <CKEditor data={input.value} editor={ ClassicEditor } config={{ simpleUpload: { uploadUrl: 'https://myserver.herokuapp.com/image-upload' }, toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo'] }} /> 并在我的服务器上创建 url /image-upload 您可以使用额外的插件选项.. 要使用它，您可以修改他们的文档。 在配置中，您将设置 extraPlugins 。 你可以让 uploadPlugin 函数来工作。 <CKEditor editor={ ClassicEditor } config = {{ placeholder : "please your question, here", extraPlugins: [uploadPlugin] }}

CKedit 图片上传不起作用

这是我的 urls.py 从 django.conf.urls 导入 include, url 从 django.contrib 导入 admin 从 django.contrib.auth 导入视图 从 django.conf 导入设置 url 模式 = [ url(r'^admin/',

使用 Rails 7 为 CKEDITOR 配置新工具栏

我正在使用 ckeditor gem，如下所示： # 宝石文件 gem 'ckeditor', '~> 4.3' 然后在我的 activeadmin 表单中显示它： # 管理/starts.rb f.input :expertpro, as: :ckeditor, 标签: "预测器&q...

如何响应式Django ckeditor

我已经为我的博客网络应用程序下载了ckeditor。 但是当我通过移动设备访问这个网站时，它看起来非常糟糕，因为它没有响应式，我怎样才能将其转换为响应式设计...... 我是...

如何覆盖 ckeditor 中按钮的处理程序？

我想要一个用于保存按钮的自定义处理程序。 如何覆盖默认命令？

如何强制 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); 如果您已经解决了问题，希望它能对您或其他任何人有所帮助。

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 中的字符计数

我正在使用下面的代码来计算 ckEditor 的字符数。 var editorConfig = { 高度：'400px'， 文件浏览器上传方法：“表单”， filebrowserUploadUrl：“main_blog_uploa...

如何给图片添加属性

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