Is there a way to add a css class name to empty paragraphs in ckeditor so I can target them with css?
Empty paragraphs in ckeditor are not really empty because they contain a br tag so I can not use :empty to target them.
From what I can see, the good thing is that those <br> inside empty paragraphs have an attribute which makes them easy to target.
In the future, you might use a pure CSS solution like this one.
p:has(> br[data-cke-filler="true"]) {
/* styles here */
}
For now, you either have to style the directly.
Depending on what you're trying to accomplish, maybe applying css to the <br> would suffice.
br[data-cke-filler="true"] {
/* styles here */
}
And if you are able to run javascript in ckeditor. This can easely be done today.
Examples : with jQuery
$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );
or
$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );
Example : with Native Javascript
var brs = Document.querySelectorAll("br[data-cke-filler="true"]");
brs.forEach(function(br) {
br.classList.add("MyEmptyParagraphsClass");
});
In CKEditor 4, you can have a configuration file.
And you can add the custom config with the options here.
In your case, you might need these options :
config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.
Meanwhile in CKEditor 5, you can try these documentations about Block Widget :
Adding a css class to block elements
Inline and block content
Related
Im embeding a word document saved as html in my site, but there are conflicts between the generated css and my site’s. What could really help me is having a “scoped” element, which is not effecting or being effected by the site itself. Is there any solution to this problem? Thanks
I personally use classes as wrappers for scoping. Below all of the styles from the word document will be "scoped" to the beginning and ending of the span tag.
/*some css wrapper class*/
.word-document-wrapper
{
}
<span class="word-document-wrapper>
<!--word document here-->
</span>
You can use HtmlSaveOptions class to specify additional options when saving a Word document into the Html, Mhtml or Epub format. For example:
Document doc = new Document("D:\\Temp\\input.docx");
HtmlSaveOptions opts = new HtmlSaveOptions(SaveFormat.Html);
opts.CssStyleSheetType = CssStyleSheetType.Embedded;
opts.ExportImagesAsBase64 = true;
opts.ExportFontsAsBase64 = true;
opts.PrettyFormat = true;
doc.Save("D:\\temp\\18.8.html", opts);
I work with Aspose as Developer Evangelist.
I created a custom css snippet for nth-of-type keyword in css. But it doesn't seem to work. All other snippets work perfectly.
<snippet>
<content><![CDATA[
nth-of-type(${1})
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>noty</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css</scope>
</snippet>
But when I enter the tab trigger and press tab it just puts a colon ahead. Also I have installed Emmet and I think it might be conflicting with something here.
Also I've saved the snippet in the correct directory.
As Philipp Sander says 'noty' is not an element. it's a content of the <tabTrigger>. CSS won't work for content.
You can use tag/an element name or you can use class/id property in an element, and use that class/id value to select that element.
Id property :
<tabTrigger id="noty_element">noty</tabTrigger>
styles for Id:
#noty_element {
//your styles
}
class property :
<tabTrigger class="noty_element">noty</tabTrigger>
styles for Id:
.noty_element {
//your styles
}
How would i use css to style this array? my css that I am using right now is not working, I am using a separate style sheet.
enter image description here
I'm assuming, you want to stylize not the array but the html list of items, which you are creating using the array.
You can do it (stylisation) just adding to your css file next rule
li {
// your css properties go here
}
If you have more than one list on the page and you want add some styles only for this list, you can add some class name to the list you are creating by this php code. To do so you can change the code inside foreach statment:
foreach () {
print "<li class='my-list'>";
...
}
Then you might add to css next rule wich will apply only to this specific list
li.my-list {
// your css properties go here
}
For example, you can change the ink colour in paper-tabs by changing --paper-tab-ink: var(--accent-color);. Is it possible to change the value of the CSS custom properties dynamically similar to how you can toggle a class or change the style in JS?
There are different ways to do this, but a simple answer is to use the Polymer.updateStyles() method after making your class changes.
For example, let's say your styles are:
<style>
.yellow x-example {
--light-primary-color: #fdd85f;
}
.red x-example {
--light-primary-color: red;
}
</style>
and you want to make the component use the styles in the .red class. You simply add it as you normally would in javascript, then be sure to also use this function to actually update it on the page.
<div class="yellow" onclick="this.className='red'; Polymer.updateStyles()">
<x-example></x-example>
</div>
Yes, first get the object of your custom element. Then get the customStyle object. Add a style to that object. And then run element.updateStyles();
t.clickListener= function(e) {
var t = Polymer.dom(e).localTarget; //retarget if needed
t.customStyle['--the-color-etc'] = 'pink';
t.updateStyles(); // mandatory for the CSS variables shim
};
See the docs
Google Closure Library editor: demo, documentation.
The editable area is an iframe. How can I set the default font of the editable area? Now it is the default font of the browser. I prefer not to put a font tag around the content in the editable area**. That way, I can change the font of my website in the future, without the need to modify every HTML-content written in the editor.
** What I mean by that is something like this:
<font size="2" face="georgia, serif"><b>content</b></font>
I would prefer just this:
<b>content</b>
... and then style the editable area of the editor with the georgia font using CSS. That way, the HTML-content (produced by the editor) in my database wouldn't contain a hard-coded font, so I could change the font in the future.
Edit: maybe I should use a SeamlessField instead of a Field for the editable area?
Once you call makeEditable() on the goog.editor.Field, which creates the iFrame you referenced, the Field fires an event of type goog.editor.Field.EventType.LOAD. If you listen to that event, you can pull out the iFrame and toss in a link element to a CSS stylesheet so you can easily modify the content in your editor.
Here's the equivalent of one of my listeners that should get you on the right track. (I didn't check if the goog.editor.Field was the target of the event, but I assume it is).
some.namespace.Page.prototype.onEditorLoad_ = function(event) {
var editor = /** #type {goog.editor.Field} */ (event.target);
var iFrame = editor.getEditableIframe();
if (iFrame) {
var fieldDomHelper = editor.getEditableDomHelper();
var documentNode =
fieldDomHelper.getFrameContentDocument(iFrame).documentElement;
var head = documentNode.getElementsByTagName(goog.dom.TagName.HEAD)[0];
if (!head) {
head = fieldDomHelper.createDom(goog.dom.TagName.HEAD);
goog.dom.insertChildAt(documentNode, head, 0);
}
fieldDomHelper.appendChild(
head,
fieldDomHelper.createDom(
goog.dom.TagName.LINK,
{ 'href': '/css/myCSS.css', 'rel': 'stylesheet', 'type': 'text/css' }
)
);
}
}
Finally, in that CSS file, you can add whatever styling you want. Such as your font change.