CKEditor是一个开源富文本编辑器生态系统,支持实时协作。将此标记与[ckeditor4]和[ckeditor5]标记一起使用以指示编辑器版本。
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()) });
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] }}
这是我的 urls.py 从 django.conf.urls 导入 include, url 从 django.contrib 导入 admin 从 django.contrib.auth 导入视图 从 django.conf 导入设置 url 模式 = [ url(r'^admin/',
我正在使用 ckeditor gem,如下所示: # 宝石文件 gem 'ckeditor', '~> 4.3' 然后在我的 activeadmin 表单中显示它: # 管理/starts.rb f.input :expertpro, as: :ckeditor, 标签: "预测器&q...
我已经为我的博客网络应用程序下载了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); 如果您已经解决了问题,希望它能对您或其他任何人有所帮助。
我正在尝试让具有 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 的字符数。 var editorConfig = { 高度:'400px', 文件浏览器上传方法:“表单”, filebrowserUploadUrl:“main_blog_uploa...
我想为图像添加属性 这是例子 但现在我不知道我应该做什么文件? 如果 alt =“你好”,则标题 =“你好” 我想自动更改标题参考...
CKEditor5 块小部件。如何使用 elementToStructure 进行向下编辑?
我正在将一些 CKEditor4 小部件转换为 CKEditor5。这些是块小部件,我通常遵循 SimpleBox 示例。我基本上是成功的,但以下看似简单
CKEditor5 块小部件。如何避免同时需要容器和可编辑元素?
我正在将一些 CKEditor4 小部件转换为 CKEditor5。这些是块小部件,我通常遵循 SimpleBox 示例。我基本上是成功的,但以下看似简单
我有一个包含几个字段的 HTML 表单。其中之一是由 CKEditor 管理的文本区域。 当用户想要提交表单时,我想检查他是否在所有字段中输入了值。 我知道...
函数createLinkElement 在里面 这都是我编辑的,这就是结果 在此输入图像描述 我想从标签中获取孩子,将其添加到标题属性中,例如 在此输入图像描述 ...
在 CKEditor 5 中,我没有在链接对话框中看到目标属性字段。 如何添加这样的字段?或者将 target=_blank 设置为默认值。 谢谢
在 CKEditor 5 中,我可以使用 writer.createElement 创建一个新的“restricted-editing-exception”span 元素吗?
我希望以编程方式获取一段文本,对其进行修改,然后使用自定义插件将其重新插入到编辑器中的“受限编辑异常”元素中。我能得到的最接近的是
当我尝试在 ckeditor4 中使用 youtube 插件添加视频时,预览是可见的,但是当我尝试编辑内容时,视频的预览在 ckeditor 中不可见,只有
任何人都知道我如何在 nuxt3 应用程序中正确配置 CKEditor-5。我正面临您可以在下面看到的问题。我还将提供代码实现。 这是我目前的实施 任何人都知道我如何在 nuxt3 应用程序中正确配置 CKEditor-5。我正面临您可以在下面看到的问题。我也会提供代码实现。 这是我目前的实现 <template> <div class="field" :class="{ 'form-group--error': props.error, active: text.length !== 0 }" > <CKEditor v-model="text" dir="rtl" :editor="ClassicEditor" :config="config" :tag-name="props.tagName" :disabled="props.disabled" @input="$emit('input', text)" /> <label class="required" :placeholder="props.label">{{ props.label }}</label> </div> </template> <script setup> import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import CKEditor from "@ckeditor/ckeditor5-vue"; import "@ckeditor/ckeditor5-build-classic/build/translations/ar"; const props = defineProps({ value: { type: String, required: false, default: "" }, tagName: { type: String, required: false, default: "div" }, disabled: { type: Boolean, required: false }, uploadUrl: { type: String, required: false, default: "" }, label: { type: String, required: false, default: "" }, error: { type: Boolean, default: false }, }); const config = ref({ language: "ar", }); const text = ref(""); watch(props.value, () => { text.value = props.value; }); </script> 它会给出这个错误。如果是的话,我是否需要为此创建一个 nuxt3 插件,请告诉我怎么做。 尝试将您的 CKEditor 组件包装在 <client-only> 标签内。这对我有用。 作为参考,这个问题:How to use CKEditor with Nuxt.js - window is not defined error