I have a headless TYPO3 installation and i need to render all the content elements as json. So far so good. The only problem i have right now is to replace the t3:// links with the full URLs since i do not have the frontend to take care of it. So the question is:
How do i replace the intern TYPO3 links in a bodytext (RTE) to full URLs?
I have tried the following but it dint really help:
$cObj->stdWrap_HTMLparser($element['bodytext']
Best regards
So i examined the TYPO3\CMS\Fluid\ViewHelpers\Format\HtmlViewHelper to get some ideas. It is actually very easy to do it.
Note: I have only tested this with t3://page?uid= and it works. The moment i find other use cases as well, i will update this answer
This code happens on my Utility class under the my_ext/Classes/Utility/MyUtility.
I first inject the TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer with DI (Dependency Injection)
/**
* #var ContentObjectRenderer
*/
protected ContentObjectRenderer $cObj;
/**
* #param ContentObjectRenderer $cObj
*/
public function __construct(
ContentObjectRenderer $cObj
) {
$this->cObj = $cObj;
}
Now i can use the parseFunc function to replace the links, with full URls (without the base url). BUT we have to define what kind of reference this function will get, which in my case would be the lib.parseFunc. So this is how it looks like:
Sometimes you only need the first and second parameters and you can leave the reference empty. You have to experiment a bit and make it work according to your needs.
public function my_module(array $teaserHomepage): array
{
$parseFuncTSPath = 'lib.parseFunc';
$newConstructedArray = [];
foreach ($teaserHomepage['fields'] as $element) {
...
$newConstructedArray['fields']['bodytext'] = $this->cObj->parseFunc($element['bodytext'], [], '< ' . $parseFuncTSPath);
}
return $newConstructedArray;
}
The before text:
<p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</span><br /> <br /> </p>
The after text:
<p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</span><br> <br> </p>
Hopefully it helped someone
Best regards
Related
API :
{
"id": 1,
"text": "<p>\r\n \\u2022\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit: <br />\r\n sed do eiusmod <br />\r\n tempor incididunt ut <br />\r\n labore et dolore magna aliqua\r\n</p>\r\n<p>\r\n \\u2022\r\n </p>"
}
HTML :
<div [innerHTML]="agreementData.text"></div>
when I try to display like this Unicode characters like \u2022 display same as \u2022, it doesn't convert in anything, I cant change API I need to handle requests like this
found solution
pipe:
#Pipe({
name: 'unicodeStringFormat',
})
export class UnicodeFormatPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value.replace(/\\u[\dA-Fa-f]{4}/g, match => {
return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
});;
}
}
HTML:
<div [innerHTML]="agreementData.text | unicodeStringFormat"></div>
I have a group for one module example login. This group contains module.ts, html, spec.ts and page.ts.
I have to write one function in page.ts which will have parameter as a complete HTML page. So I have to write something like this.
func replacingHTMLPlaceHolde(<pass html page here>) <return same html page after replacing>:{}
How can I do this? I have to call this function from ionViewDidEnter() method.
One option I see you could go with is use the server-side html as a string, and use a pipe to replace as you need.
So something along this example (of course, replace what's needed for your own use case):
your-component.ts
export class YourComponent {
public serverHtml: string =
"<div><h2>Block 1</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><div><h2>Block 2</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>";
}
your-component.html
<div [innerHTML]="serverHtml | replacePlaceHolder"></div>
replace-placeholder.pipe.ts
import { Pipe } from "#angular/core";
#Pipe({ name: "replacePlaceHolder" })
export class ReplacePlaceHolderPipe {
transform(value: string): string {
return value.replaceAll("ipsum", "ipsos");
}
}
Problem Statement :
I am getting a JSON data with Paragraph and LinkLocation(location for hiperlink the characters in the paragraph using LinkLocation:(6,12)). It means, character 6 to character 12 in the paragraph we need to hyperlink and redirect that to another page. Please advice me how to do that.
link:{id: 3, index: "Law 1.1", name: "Number of Players ",…}
content:"Law 1.1 shall be replaced by the following."
description:"Law 1.1 shall be replaced by the following:"
id:3
index:"Law 1.1"
ischanged:false
iscollapsed:false
islinked:false
isread:false
linkid:0
linktype:0
name:"Number of Players "
linkposition:"1, 6"
This is my JSON data. from this data i want to hyperlink the "content" paragraph as per the "Linkposition". for example here the link position is "1,6". so i want to hyperlink the "Law 1.1" in the content Paragraph.
If you want to hyperlink a subset of characters in a string you can do it this way:
var data = {
paragraph: "hello world",
link: '1,5'
}
var limits = link.split(',');
//subtract one cos substring method is inclusive of bottom limit and exclusive of upper limit
var lowerLimit = limits[0]-1;
var upperLimit = limits[1];
var newParagraph = data.paragraph.substr(0, lowerLimit) + "<a href='otherpage.html'>" + data.paragraph.substr(lowerLimit, upperLimit) + "</a>" + data.paragraph.substr(upperLimit, data.parapgraph.length);
So that would produce the result
<a href='otherpage.html'>Hello</a> world
Hence 'Hello' is hyperlinked
Try this code... I have added a function addLinksToParagraph(paragraph, linkLocation, location) which might help you.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<script>
var jsonData = {
paragraph : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
linkLocation : '1,6',
}
$('p').html(addLinksToParagraph(jsonData.paragraph, jsonData.linkLocation, "/any_location.html"));
function addLinksToParagraph(paragraph, linkLocation, location) {
var splitArray = linkLocation.split(',');
var start = parseInt(splitArray[0]);
var end = parseInt(splitArray[1]);
var preLink = paragraph.substr(0, start); //part before the hyperlink part
var link = paragraph.substr(start, end); //the actual hyperlink part
var postLink = paragraph.substr(end + 1); //part after hyperlink part
console.log(preLink);
console.log(link);
console.log(postLink);
return preLink + '' + link + '' + postLink;
}
</script>
</body>
</html>
This will produce following output.
I'm working with Rails 4.1.4.
I have a series of links within a certain section of my main page that are rendering fine but are completely unresponsive, with no error message of any sort. The page:
main/index.html.haml:
.container.main
%h4 Featured Video
.featured
= render partial: 'main/video', locals: {video: #featured}
#featured is determined in main_controller.rb:
class MainController < ApplicationController
def index
#featured = Video.all.sample(1)[0]
end
end
And the video is rendered in _video.html.haml:
.video-head
= link_to "#{video.event.conference.name} #{video.event.name_suffix}", video.event
.video-show
- if video.youtube_code
.embed-container
= embed(video.youtube_code)
.video-stats
.video-title
= link_to video.title, video_path(video)
- if user_signed_in? && current_user.role == 'admin'
= link_to edit_admin_video_path(video) do
%i.fa.fa-pencil.small
%br
.video-presenters
= raw display_linked_presenters(video)
.small.video-license
= render "videos/license", video: video
.video-abstract
= raw video.abstract
.small-info
Rated:
= video.rating
%br
Views:
%strong
= count_views(video)
All of this renders fine. When I go to the page at localhost, all links within the class .video-stats are completely unresponsive. I can go to the inspect element in Chrome and find the rendered html:
<div class="video-stats">
<div class="video-title">
Lorem Ipsum
<i class="fa fa-pencil small"></i>
</div>
<br>
<div class="video-presenters">
Laura Fields
</div>
<div class="small video-license">
<div xmlns:cc="http://creativecommons.org/ns#">
This presentation, by
Laura Fields,
is licensed under a
Creative Commons Attribution ShareAlike 3.0
<br>
<a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="license">
<img alt="80x15" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png">
</a>
</div>
</div>
<div class="video-abstract">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="small-info">
Rated:
Everyone
<br>
Views:
<strong>
7
</strong>
</div>
</div>
And if I click the links within the inspect element html page, they work fine. I've managed to suss out that this may be some kind of JavaScript problem? But I'm not using any JavaScript on this page, and all of the links on the page OUTSIDE of that class work fine. So perhaps it has something to do with the iframe element. But I haven't been able to find anything about iframe elements disrupting links and don't know how to solve this.
The video is rendered with the following helper method:
def embed(youtube_code)
content_tag(:iframe, nil, src: "//www.youtube.com/embed/#{youtube_code}")
end
I believe that all my required JavaScript files are in the right order in application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require cocoon
//= require_tree .
I think it's worth noting that I use this same partial in the video show page as well, and it has the same problem. :/ I'm tagging this as CSS because I think it MAY have something to do with z-index (.embed-container takes up the space that .video-stats does when I highlight it with Chrome Dev Tools). Even still, I don't know how to go about fixing that.
I'm stumped.
I'm trying to find all words with a hash in front if they are placed after the end of the sentence.
(These ones: #Example #FOO #hello_world #foo-bar #2012 #special-äüöå #russia-Русский #arabic-العربية)
This is the RegExp:
var regex:RegExp = /#[\w\-]+?(?= #|$)/g;
This is the text:
Lorem ipsum dolor #sit_amet, consetetur sadipscing, sed #diamnonumy
eirmod tempor #invidunt ut.
#Example #FOO #hello_world #foo-bar #2012 #special-äüöå #russia-Русский #arabic-العربية
It works except if special characters are included such as in #special-äüöå #russia-Русский #arabic-العربية
How to extend the RegExp to recognize special characters and non latin languages?
Thanks. Uli
Instead of using the character class [\w\-], you should use [^#].