According to the migration guide, the <pre> element ("format_pre") is no longer available in CKEditor 5.
However, I was still able to configure it as a formatting option for CKEditor 5 using the options for the heading:
{ model: 'formatted', view: 'pre', title: 'Formatted' }
Is this correct or should <pre> elements (markup created with CKEditor 4) be replaced by code blocks (<pre><code>...</code></pre>)?
I think this works because it is possible to define custom elements for the heading
Related
I currently have a working multipage report with repeating header / footer. I have implemented page count on footer successfully (eg: Page 1 of 20).
I need to change the header content on pages after the first page (adding "(Continued)" to title):
My Long list of Stuff
Item 1
Item 2
Page 1 of 20
My Long list of Stuff (continued)
Item 3
Item 4
Page 2 of 20
I can't seem to find any way to target only the pages after first. I have experimented with :nth-of-type. Using javascript after page loads to try and access counter.
let hiddenCounter = window.getComputedStyle(hiddenCounterEl, '::after').content;
I suspect getComputedStyle() not supported by PDF Reactor. Any thoughts on how to achieve this appreciated.
EDIT:
The repeating section described above is a part of a larger report so something like below wouldn't work because I wouldn't know the page to start from:
.showonsubqequent { display:none; }
#page :not(:first) {
.showonsubqequent { display:inline; }
}
You can use continuation markers to fulfill use-cases like this. We've introduced them with PDFreactor 11.
With the ::-ro-after-break pseudo-element, you can add generated content to elements after page breaks.
The respective style declarations could look like this:
ul::before {
content: "My Long list of Stuff";
}
ul::-ro-after-break {
content: "My Long list of Stuff (continued)";
}
Please refer to our manual for more information on continuation markers. https://www.pdfreactor.com/product/doc_html/index.html#ContinuationMarkers
While window.getComputedStyle() is supported by PDFreactor, the issue you were observing is a known issue (#8626) and has been fixed in PDFreactor 11.4.4. Prior to that version, only pseudo-element parameters without colons were supported.
Also, please note that nesting element selectors inside of page selectors is not supported by design. This is because applying styles to an element based on the page it is positioned on could change said position in the document.
Question: I would like add custom styles to the dropdown in ckeditor, e.g. to show a Button style adding an a tag with class btn. Is there a way to do so within Bolt CMS?
(source: jonathanschmid.de)
Attempt: I was hoping to be able to add styles via the general.wysiwyg.ck config key, but there doesn't seem to be a suitable option. I managed to achieve what I wanted by editing bolt-public/view/js/ckeditor/styles.js – but I guess it's not update-safe.
Does anyone know of a safe way to achieve this within Bolt CMS? If not, I'll try forking to suggest adding general.wysiwyg.ck.styles to config.
There's an official guide about styles.
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Button', element: 'a', attributes: { 'class': 'btn' } }
] );
and
config.stylesSet = 'my_styles';
Then if you put the selection into a link, you can apply the style.
However, if you'd like to create a link from scratch, use CKEDITOR.editor.insertHtml within a custom command and expose it as a button in the toolbar. Styles combo does not insert new elements.
I want to apply the ckeditor inline editing to all elements with a specific attribute.
The problem is that its only applying to the very first element with the attribute, and not the rest.
How can i apply the ckeditor inline text editing to all elements with a specific attribute?
$(".edit-element").ckeditor();
PS: im using ckeditor on elements that have contenteditable="true" and not textareas.
How about converting it to use .each? You can then also check the amount of elements you are targeting very easily (see comment);
$(".edit-element").each(function() {
// Log element with something like console.log(this);
$(this).ckeditor();
});
I tried this the first time and it didnt work. this time i noticed it was sending out this error
Uncaught Error: The specified element mode is not supported on element: "a".
and so I enabled the editor to work on "a" tags and span by adding this
CKEDITOR.dtd.$editable.span = 1
CKEDITOR.dtd.$editable.a = 1
I'm trying to insert a link into an instance of CKEditor using the following line: -
CKEDITOR.instances.CKInstance.insertHtml('My Text');
All that happens though is that 'MyText' is inserted without the link. Anyone know how to insert the link properly?
PS. I know that CKEditor comes with a plugin to insert links but I'm doing my own one
Thanks
Shazoo
I guess that you're using CKEditor 4.1 or newer. And since you don't use the official link plugin, your editor discards all <a> tags. You need to properly configure Allowed Content Filter so your editor accepts <a> tags back again.
You can do it when defining your command, like this:
// Assuming you want a dialog-driven command...
editor.addCommand( 'yourCommand', new CKEDITOR.dialogCommand( 'link', {
allowedContent: 'a[!href]', // Allow <a> in the editor with mandatory href attr.
requiredContent: 'a[href]' // This command requires <a> with href to be enabled.
} ) );
Or in editor's config with config.extraAllowedContent = 'a[!href]'. This is not recommended though as you develop a plugin (right?), which should bring a custom command.
I am trying to edit an entire html using fck editor. So that should contain tags like html, body ,DOCTYPE etc. But my problem is when I submit the data, fckeditor forcefully remove the above tags from the content. I want to avoid this. Is there any configuration issue there.
-Arun
look at this config option. CKEDITOR.config.fullPage. I believe it will permit you to edit the full page (and will preserve the contents) (i haven't used it.)
'ckEditor' (as it's now known) shouldn't allow html/script tags directly within the content. However if you have the latest version there is a 'source' view which allows all the source to be edited directly and may give you what you want.
Arun User this one .This is best solution for you.
var CKcontent = false ;
$(document).ready(function(){
// setup ckeditor and its configurtion
CKEDITOR.replace( 'content1',
{
//fullPage : true,
customConfig : 'config.js' ,
toolbar : 'BasicToolbar' ,
height : "300"
});
});
Set only fullpage : false if not show HTML content otherwise set true
Note: it implemented by me in our development