How do I allow a specific attribute on any element?
For example, I would like to configure CKEditor 5 to allow/preserve a 'data-lref' attribute as follows:
<p><span data-lref="a">Text is </span><strong data-lref="b">bold</strong><span data-lref="c">.</span></p>
I think this the documentation:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-preserving-custom-content.html#loading-content-with-all-attributes
But how can I check/allow for only 'data-lref, instead of allowing every attribute?
Related
Everyone
I am making blogging site using quill.js. To view post in frontside I am using highlite.js.
In following image first 2 block are displayed with default side just <pre> tag.
and last one with <pre><code class="dart">{code}</code></pre>
My question is
I don't want to add manually html with <code class="dart">
I want automatic set styling by using just tag
I read all document but not found any specific answer how to set?
please any one?
I found answer. Using custom selector.
document.querySelectorAll('pre').forEach((block) => {
hljs.highlightBlock(block);
});
I would like to apply a class to my title component in Magnolia only if the content editors have chosen to add the subtitle component to a page. Example of what I am trying to do below:
[#assign subtitle = "somehow get a reference to the subtitle component"]
[#assign subtitleExists = subtitle?has_content]
<div class="title ${subtitleExists?then('removePadding','')}">
${model.render('titleCopy')!}
</div>
Is this possible? I am happy to add more information to help clarify what I am trying to do here if needed. Thanks!
Components are atomic, hence they normally don't see each other and can't influence each other. That would be job of the area grouping the components or parent component or the page itself.
That said, if the structure of the page and of your templates doesn't allow you any other solution, you might set some flag via request attribute in subtitle component and then check for the existence of said flag in your component.
Something along the lines of ctx.setAttribute("subtitleExists", true, 1) on one side and ctx.getAttribute("subtitleExists") on the other side. 1 stands for the local (request) scope for the attribute.
I need to create a custom field type in WFFM to accept rich text, and provide Sitecore's WYSIWYG editor for the user on the front-end. The form will be used to create a content item, and the rich text field will map to a field on that item's template. Has anyone done this? Can the Telerik editor be leveraged for this?
If you need a simple WYSISYG editor on the front-end, then you can use any of the numerous open source editors available on the web. I would be wary of using the Telerik editor included in Sitecore unless you have the relevant licenses.
If you use a Multi-Line Text field on the form, Sitecore outputs a regular <textarea> on the front-end. I suggest you add a custom css class under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes and select that from the CSS Class drop on the left when you select your field in the form designer, in order to allow you to target specific fields to be WYSIYG'd.
Add a reference to the javascript file and then instantiate your editor, passing in the css class defined above to only target those specific textareas.
If you are using ASP.Net MVC and CKEditor (for example):
Add reference to javascript in /Views/Form/Index.cshtml. You may need to add this to your Visual Studio from the WFFM module package.
Or add the reference in <head>:
<script src="/path-to/ckeditor/ckeditor.js"></script>
Add the bottom of Index.cshtml (or just before your closing </body> tag), instantiate your editor, targeting only those <textarea> with specific css classes
e.g.
<!-- markup generated by WFFM -->
<textarea class="wffm-rte" data-val="true" data-val-length="..." data-val-required="..." id="wffm-generated" name="wffm-generated"></textarea>
<script>
// Replace all <textarea class="wffm-rte"> elements with CKEditor instances.
CKEDITOR.replaceAll('wffm-rte');
</script>
Be sure you sanitize your incoming data, you don't want a case of bobby tables.
Spring 3.0 (form:select, form:option(s) ) tag library supports rendering HTML 5 data-* attributes using a bean's property? If yes , an example would help.
Background : I am developing a Spring MVC app and using Bootstarp css and JS and spring provided tags. Need to use HTML 5 data-* attributes to keep additional data with dropdowns options. Based upon the user selection in one of the dropdown , I want update further dropdowns and I want to avoid AJAX calls to fetch options for next dropdown since I have the data during page load.
I understand JQuery has attribute support but that would require javascript code execution on page load, so looking for HTML 5 support. Any other suggestions to handle this are welcome.
Data-* attributes are supported on Spring 3.0 form tags (along with any validly-named custom attribute you specify, I believe). You can also use the value of a bean's property as the attribute value, e.g.
<form:input data-test="${myBean.propertyName}" path="propertyName" />
To answer the second part of your question, where you ask if there's a way to get the Spring form tag library to populate the data-* attributes with the contents of the bean's property that you specify, this does not happen automatically: you would need to write a custom tag that does this.
I'm using modelforms to generate forms.
wiek = models.PositiveIntegerField(verbose_name="Wiek")
Is there a way to assign CSS style to it? I don't want to create html for forms because it is too much work (complex forms). I want to generate them from models, but I want to style it too. How to create seperate CSS for each form?
Thanks for answer in advance
Well,
option 1:
probably you have code like this:
<form action=.......
{{form.as_something}}
</form>
If so, you can assign some special class to each <form> tag and than style it as you want.
option2:
if you need to style each field independently you can use fact that Django by default uses id_name_of_field conevention to name fields ids. So you can use #id_name_of_field in your css to style particular field.
option3:
in model form you can assign some attributes to each field's widget like:
self.fields['wiek'].widget.attrs['class'] = 'some-class'