ckeditor5

问题 I'm implementing a plugin and have a use case need to detect when user select all content. I trying create a select all selection like this const selectAllSelection = editor.model.createSelection(editor.model.document.getRoot(), 'in') and compare with current model.document.selection but they are not the same. 回答1: Those selections are a bit different as the one created with createSelection() will start directly in <$root> . Real document selection will start inside the first <paragraph> .

问题 How do I Create a non editable block with text in CKEditor 5. I need something which in the final view generate a: <div>Non editable message here</div> I tried to use a UIElement and then set innerHTML but that still makes the element editable. Just for reference: Her is the plugin I ended up using. import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; import Essentials from '@ckeditor/ckeditor5

问题 I am currently trying to write a plugin for the CKEditor 5 to support automatic translations. I was able to find out how to write plugins and how to create dropdowns in the documentation. But in the documentation there is no mention (or I missed it) how to be informed about a click on the values: There is an Execute Handler for the button that opens the dropdown, but how do I register a listener for a click on one of the values? Can I assign an id or similar to my items to recognize the click

问题 I'd like to listen to the focus event in CKEditor 5. I thought something like this would work but the callback is never called: document.querySelector("#editable"); ClassicEditor.create(el).then(editor => { editor.on('focus', () => { console.log("Focused"); }); }); The editor is successfully created but the callback is not called. Any ideas? 回答1: The editor comes with a FocusTracker (and the observable #isFocused property) for that purpose: editor.ui.focusTracker.on( 'change:isFocused', ( evt

问题 I'd like to listen to the focus event in CKEditor 5. I thought something like this would work but the callback is never called: document.querySelector("#editable"); ClassicEditor.create(el).then(editor => { editor.on('focus', () => { console.log("Focused"); }); }); The editor is successfully created but the callback is not called. Any ideas? 回答1: The editor comes with a FocusTracker (and the observable #isFocused property) for that purpose: editor.ui.focusTracker.on( 'change:isFocused', ( evt

问题 I have a basic functionality I need to implement and can't find the information on how to do it: I simply want to replace all of CKEditor's content with custom markup and add an undo history entry so you can go back to the version before replacing. So the basic command for replacing the content is editor.setData but it won't add an undo history, entry wrapping the call in editor.model.change won't change the behavior too. Then there is somewhere deep in the documentationthe information on how

问题 I have my Inline CKeditor let globalEditor; InlineEditor.create(document.querySelector("#textarea"), { toolbar: { items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo'] } }).then(editor => { globalEditor = editor; }).catch(err => { console.error(err.stack); }); I also have a button that supposed to be getting the highlighted/selected text inside the ckeditor $("#btnAddTag").click(function (e) { e.preventDefault(); var

问题 I am wondering how to insert an image by it's URL only (a user gets it from some other website). I need to implement a simple img src="" in CKEditor 5. The problem is that by default, the editor requires me to upload an image while I need to insert an external url. I have read many related topics (1, 2, 3) but did not find a problem similar to mine. I even do not need the special button, maybe I can somehow just type img src="myurl" (directly typing it inside the editor did not work for me

问题 I am wondering how to insert an image by it's URL only (a user gets it from some other website). I need to implement a simple img src="" in CKEditor 5. The problem is that by default, the editor requires me to upload an image while I need to insert an external url. I have read many related topics (1, 2, 3) but did not find a problem similar to mine. I even do not need the special button, maybe I can somehow just type img src="myurl" (directly typing it inside the editor did not work for me

问题 I'm using CKEditor 5 in my angular 7 application. ClassicEditor by default shows the Insert Media button on the toolbar as highlighted in the below image. On researching online I found we can disable particular options by using the removePlugins option in the editorConfig like below. editor.component.ts editorConfig = { removePlugins: ['Image'], placeholder: 'Type the content here!' }; Above code is to not remove the Insert Media option but a different option to Insert Image . But it doesn't