I need to get the headline and the text separately out of a text content element. The reason is, to give the editor a simple way to add a content for a complicated section in my html theme.
I am new to TYPO3 an we run V11.5.16! I read and watched some tutorials and I got most of my site already working! Contents are dynamic and multilinguale so far.
To get contents from backend, I use Backend Layouts and copy the content from styles.content.get inside my setup.typoscript. I think this is the common way to do it, and as I said, it works. I output them using {contentXY->f:transform.html()} or {contentXY->f:format.raw()}.
For a text content element, I get something like:
<div id="c270" class="frame frame-default frame-type-text frame-layout-0">
<header>
<h2 class="">Headline</h2>
</header>
<p>Some Text</p>
</div>
Is it possible to get only "Headline"? And if so, it hopefully works also for getting out separately "Some Text"
Something like: {contentXY->f:transform.html(filterBy('h2'))}
Thanks in Advance!
EDIT:
According to Peter Krause's answer: I know, there is an extra content element for headers. But I need the text content element, because for the places in the html, I need header AND text. And the editors are technically not savy enough to fill in different content elements. Please don't ask in more detail. ):
You can handle header and body of an CE seperately, but not in a page context.
In page context you get the result from rendering the CEs, which is a string (with HTML).
For each CE there is a rendering information, which nowadays is also FLUID.
Depending on your installation it probably is FSC (ext:fluid_styled_content) or a Bootstrap extension.
This means: there are FLUID templates which can be overriden and modified.
In these templates you have access to each field of a CE separately.
Look for the templates stored in the defined paths (in TSOB) and add your own path for overides:
lib.contentElement {
templateRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
partialRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
layoutRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
}
Thanks for all hints! I think, for my requirement, there is no solution out of the box. So i made a custom CE with Mask and edited the template html. For non-technical editors, it is the best solution in terms of data input. I hope this stands for future upgrades...
Related
How do I render a strikethrough (or line-through) in an adoc file?
Let's presume I want to write "That technology is -c-r-a-p- not perfect."
That technology is [line-through]#crap# not perfect.
As per Ascii Doc manual, [line-through] is deprecated. You can test here.
Comment from Dan Allen
It's important to understand that line-through is just a CSS role. Therefore, it needs support from the stylesheet in order to appear as though it is working.
If I run the following through Asciidoctor (or Asciidoctor.js):
[.line-through]#strike#
I get:
<span class="line-through">strike</span>
The default stylesheet has a rule for this:
.line-through{text-decoration:line-through}
You would need to do the same.
It is possible to customize the HTML that is generated using custom templates (Asciidoctor.js supports Jade templates). In that case, you'd override the template for inline_quoted, check for the line-through role and produce either an <s> or, preferably, a <del> instead of the span.
If you're only targeting the HTML backend, you can insert HTML code verbatim via a passthrough context. This can be done inline by wrapping the parts in +++:
That technology is +++<del>+++crap+++</del>+++ not perfect.
This won't help you for PDF, DocBook XML, or other output formats, though.
If the output is intended for HTML you can pass HTML.
The <s> HTML element renders text with a strikethrough, or a line
through it. Use the element to represent things that are no longer
relevant or no longer accurate.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
To render as:
Example text.
use:
1. Pass inline:
Example +++<s>text</s>+++.
2. Pass-through macro:
Example pass:[<s>text</s>].
3. Pass block:
++++
Example <s>text</s>.
++++
How can I programmatically add script or stylesheet tag to a page specified in page's YAML front matter (meta)?
Assuming there is src/documents/posts/a.html.eco with following contents:
---
layout: default
scripts: ['a.js']
---
Blog post that requires a special javascript
and layout src/layouts/default.html.eco with following contents:
...
#getBlock('scripts').toHTML()
</body>
...
The final result for posts/a.html should be:
...
<!-- some extra stuff that was added when processing script tag -->
<script scr="/scripts/a.js"></script>
</body>
...
..while other pages shouldn't have a reference to /scripts/a.js
The comment above tag is just to show that there may be some processing envolved before injecting the tag.
I tried many approaches using different events in docpad.coffee file (including approach taken from docpad-plugin-livereload plugin) but every time I was facing the same problem - script tag was applied to all pages instead of being applied to a.html only. Here is one of my tries:
renderDocument: (opts) ->
{extension,templateData,file,content} = opts
if extension == 'html' and scripts = file.get('scripts')
if typeof scripts != 'undefined'
scripts.forEach (scriptName) ->
#docpad.getBlock('scripts').add('<!-- custom script tag here -->')
I've also tried render event, populateCollections (which is not documented however I found it in docpad-plugin-livereload plugin) and even extendTemplateData events and no luck so far.
I know there is a method of doing this right inside a layout:
#getBlock('scripts').add(#document.scripts or [])
..which is totally fine and it really works as expected however it doesn't seem to provide enough freedom for me to manipulate the content before it's injected to a page.. And even if it's possible I won't like the idea of having some heavy logic inside layout template, I want it to be in a plugin/docpad.coffee
Hopefully that makes sense
Try templateData.getBlock('scripts').add instead of docpad.getBlock('scripts').add
I hava an editor template for, let's say, date:
#model DateTime
#section AdditionalJavaScript2
{
/* some js code */
}
#Html.TextBox("", Model.ToString("d.M.yyyy"), new { #class = "date" })
Now, I would like to put some js code into the HEAD section, but this doesn't work.
Of course, I have a this section in my layout.cshtml:
<head>
...
#RenderSection("AdditionalJavaScript2", required: false)
</head>
It works from the plain view, but not from partial view (editor template).
Why?
And, is there a workaround?
Thanks,
Igor
A partial-view does not use a template, it returns "raw" html to be included in your page (by Javascript). It does not have access to anything but the stream it returns itself.
Think of it like this: You typically call a partial view from Javascript/AJAX to get some new html. You get the return, and replace some DIV-tag. How can the system (FireFox, Chrome, ...) know, that there is some extra section of data that needs to replace something in the HEAD tag.
There are some workarounds:
Don't put the script in the HEAD
Add a parameter switch betweed the html and the script. You need to client-side calls, one to get the html, and one for the script. You include the calls to the partial-view on two locations on your page.
Separate the script and the html using some pre-defined tag like <!-- SEPERATOR -->, and let the calling code split the result, and put it in the correct position.
I am using ckeditor on my website to make it easier for users to input HTML.
However, the data I get back from ckeditor is wrapped in <p></p> blocks. (Which I don't want.)
Is there some configuration setting that forces the editor to not wrap the text in anything?
Add the following to your config.js file for CKEditor:
config.enterMode = CKEDITOR.ENTER_BR;
Example:
...
CKEDITOR.editorConfig = function (config)
{
config.enterMode = CKEDITOR.ENTER_BR;
...
};
Details
The configuration setting that controls this behavior is based on what you want to happen when the user presses Enter.
Just in case someone who's new to working with HTML reads this, I'm including some basic explanation of the concepts involved and why a tag will need to be inserted when the Enter key is pressed.
We know that if we enter some text into an HTML document and then put additional text on a new line, the browser won't display the text as two lines, it will ignore any carriage returns and will condense multiple spaces between characters to a single space.
The following HTML:
qwer
tyui
Will be rendered as:
qwer tyui
So the editor needs to insert an HTML tag to tell the browser that it should display the second group of text on a new line.
The configuration setting that controls this is config.enterMode and it offers three options:
1 - Insert paragraph
The default setting creates a paragraph element each time Enter is pressed:
config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`
2 - Insert 'div'
You can choose to create a div element instead of a paragraph:
config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`
3 - Insert break (the setting you're looking for)
If you prefer to not wrap the text in anything, you can choose to insert a line break tag:
config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`
The CKEditor documentation indicates that using the ENTER_BR setting is not recommended:
Note: It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.
Another related setting 'autoParagraph'
There is a second setting that controls a similar situation –config.autoParagraph. How it functions depends on the config.enterMode setting discussed above.
autoParagraph determines whether inline elements such as span are wrapped in the block element (p or div) specified by the enterMode setting. The default is to wrap inline elements, so if you enter a span like this (as HTML):
<span>asdfg</span>
It will be wrapped in a p or div element like this:
<p><span>asdfg</span></p>
or this:
<div><span>asdfg</span></div>
The inline element won't be wrapped if you set this to false or if you set enterMode to CKEDITOR.ENTER_BR.
The CKEditor documentation includes this note about config.autoParagraph:
Note: Changing the default value might introduce unpredictable usability issues.
Even more settings
There are three more settings that are somewhat related to this subject:
config.fillEmptyBlocks
config.forceEnterMode
config.ignoreEmptyParagraph
Reference
A complete list of the available configuration options can be found here:
CKEDITOR.config - CKEditor 3 JavaScript API Documentation
CKEDITOR.config - CKEditor 4 Documentation
I know I'm a little late to the game, but I think the option the OP is looking for is:
config.autoParagraph = false;
This is answered perfectly well above, however as mentioned you should not really be changing this in the main config.
The correct way to do this is per .replace really.
i.e.
<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
<textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
CKEDITOR.replace( 'editor2', {
enterMode: CKEDITOR.ENTER_BR,
on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize'); }},
});
</script>
A very simple solution without any configuration change is to use
shift+enter for a line break <br>, and
just enter would cause a new paragraph.
Advantage is that you don't have to do any configuration changes. Plus, you have both.
If you want to exclude <p> tag and want only basic editing tool like Bold Italic superscript Subscript etc in Ckeditor then follow these steps:
I am 100% sure about this as I researched 36 Hours continuously :)
Step 1: Add this script in your PHP webpage
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
enterMode: CKEDITOR.ENTER_BR,
on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
});
</script>
Step 2: add id="editor2" and onfocus="this.value='';" in your textarea like this
<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">
Step 3: Be sure that remove Class="ckeditor" from Textarea.
Step 4: Reload your webpage if not happened Delete Cache/History and Restart PC/laptop.
Step 5: Its Done :)
For Django-ckeditor add this config in your settings.py file:
ENTER_P = 1 # default
ENTER_BR = 2
ENTER_DIV = 3
CKEDITOR_CONFIGS = {
'default': {
'enterMode': ENTER_BR,
},
}
If anyone comes here with ckeditor 5, don't look for this option. They have removed it, I've spent days tyring to figure this out.
I'm afraid you're not going to like it, but enter mode BR is the root
of all evil. If we were able we'd removed it from CKEditor 4 long time
ago and we're definitely not going to implement it in CKEditor 5.
Related GitHub issue
I'm trying to change the style of a blog post (for instance change the title color), based on the labels associated to the post.
I'm a bit new to the templating, so I though I would be going to add a class with the label in the title <h3> element, and then add my CSS rules.
So I found this which would generate a proper list of labels separated by a space:
<b:loop values='data:post.labels' var='label'><data:label.name/> </b:loop>
However, it seems the validator does not let me add this inside the class attribute as follow:
<h3 class='post-title entry-title <b:loop values="data:post.labels" var="label"><data:label.name/> </b:loop>'>
From there, I found half the solution. Apparently, I should use expr:class instead of class as follow:
<h3 expr:class='"post-title entry-title " + data:list_of_labels'>
So now:
- How can I build this variable data:list_of_labels? (basically how to set a variable)
- Is there a full description of the template syntax somewhere?
- Is there another way to go around this?
Thanks,
JB
This should do it. Using XML entities allows you bypass the XML validation and move the Blogger functions to where you need them. Longer explanation here: http://www.karlhorky.com/2012/06/add-blogger-labels-to-post-as-css.html
<div class="post<b:if cond="data:post.labels"><b:loop values="data:post.labels" var="label"> <data:label.name></data:label.name></b:loop></b:if>">
<data:post.body>
</div>
There is no way to set variables in the blogger data xml, however you can set variables using javascript.
There are many pages on the blogger data xml. Google is your friend. For example this one.
You are on the right track: do a loop, use javascript to check for the combinations you want, change the style properties or load a css file dynamically.