Hi All,
With the “Add a Paragraph” button gone with the new CKEditor version on RT6, I created a custom “Add a Paragraph” button. After successfully adding it with the help of AI I ended up modifying the logic of CKEditor to automatically add a paragraph at the beginning of the quoted text.
Here are the steps to follow (steps for Ubuntu Server):
Identify RT’s Core util.js
: The file containing the CKEditor initialization is /opt/rt6/share/static/js/util.js
.
Create Local Override Directory Structure:
sudo mkdir -p /opt/rt6/local/static/js/
Copy util.js
to Your Local Override Path:** This creates a local version that you can safely modify:
sudo cp /opt/rt6/share/static/js/util.js /opt/rt6/local/static/js/util.js
Open the Local Override File for Editing:
sudo nano /opt/rt6/local/static/js/util.js
Now look for this line inside the file: " CKEDITOR.ClassicEditor"
It should look like this:
CKEDITOR.ClassicEditor
.create( textArea, initArgs )
.then(editor => {
RT.CKEditor.instances[editor.sourceElement.name] = editor;
// the height of element(.ck-editor__editable_inline) is reset on focus,
// here we set height of its parent(.ck-editor__main) instead.
editor.ui.view.editable.element.parentNode.style.height = height;
AddAttachmentWarning(editor);
Paste the following code after " AddAttachmentWarning(editor);":
// === START: Automatically Add Paragraph Before Quoted Text ===
try {
console.log(‘RT Custom AutoPara: Trying to add paragraph.’);
const model = editor.model;
const root = model.document.getRoot();
console.log('RT Custom AutoPara: Root childCount:', root.childCount);
// We want to add an empty paragraph at the very top if the editor is not empty
// OR if it's empty, ensure it starts with one.
// The main goal is to have a typing space above any existing content (like a quote).
if (root.childCount > 0) {
// Editor has content. We want to insert a paragraph at the very beginning.
// We don't need to check if the first child is a blockQuote anymore with this new approach.
// We'll just insert our new paragraph at position 0, which will push everything else down.
console.log('RT Custom AutoPara: Editor has content. Inserting new paragraph at the top.');
model.change(writer => {
const paragraph = writer.createElement('paragraph');
writer.insert(paragraph, root, 0); // Insert at the very beginning of the root
writer.setSelection(writer.createPositionAt(paragraph, 0)); // Set selection in the new paragraph
console.log('RT Custom AutoPara: Paragraph inserted at the top of existing content.');
});
// editor.editing.view.focus(); // Optional
} else {
// Editor is empty. Ensure it has an initial paragraph.
console.log('RT Custom AutoPara: Editor is empty (root.childCount is 0). Ensuring initial paragraph.');
model.change(writer => {
if (root.childCount === 0) { // Double check just in case
const paragraph = writer.createElement('paragraph');
writer.insert(paragraph, root, 0);
writer.setSelection(writer.createPositionAt(paragraph, 0));
console.log('RT Custom AutoPara: Paragraph inserted into empty editor.');
}
});
// editor.editing.view.focus(); // Optional
}
} catch (e) {
console.error(‘RT Custom AutoPara: Error auto-adding paragraph:’, e);
}
// === END: Automatically Add Paragraph Before Quoted Text ===
Save the file, clear the mason cache and restart your web server (apache in my case):
sudo rm -rf /opt/rt6/var/mason_data/obj/*
sudo systemctl restart apache2