Atm I'm playing around with Neos CMS and React.js a little bit. I was wondering if it is possible to get the content of a Neos NodeType as Json, so that i can use it as data for my React Components. I found some tutorials on special data for Neos but they all use a page as the basis. The problems I got now: If I use a content element, lets say an accordion, and put some data in there in Neos, I need a template for the container (so that React knows where to put stuff) but i dont want a template for the Accordion Items (These should go in the JSon File). So Question Number 1: How can I edit the content of an Accordion Item without haviing a template or telling the Accordion Container where to put the content of the children? And, Question number 2: How do I get the JSon-Object from the content (right now i use the TYPO3.TypoScript:Http.Message) and where do i find it (what is the url of this file)?
Here's is a detailed post on exactly this subject: http://dimaip.github.io/2015/11/15/react-neos/
To answer your questions directly:
How can I edit the content of an Accordion Item without haviing a template or telling the Accordion Container where to put the content of the children?
You can either create some dummy templates just for editing, or try to use raw content editing mode possible with some tuning to display all properties as inline fields.
This situation will greatly improve with introduction of structured editing, but for now creating dummy templates shouldn't be too hard.
How do I get the JSon-Object from the content (right now i use the TYPO3.TypoScript:Http.Message) and where do i find it (what is the url of this file)?
You can take an example from this solution: https://github.com/sfi-ru/EncultDistr/blob/master/Packages/Sites/Sfi.Encult/Resources/Private/TypoScript/Json.ts2
In essence yes, use TYPO3.TypoScript:Http.Message with Json.stringify EEL helper to build up the JSON itself. The url would be the same as the url to your node, but only with .json format suffix instead of .html.
Related
Currently I am working in a project in which Admin is saving the html code as a whole as a string which will later be used in the front end. It is saved so that user can put their own custom css like placing of whole div, size etc. It was working for some time, but now they want the saving part as it is, but when viewing it should look little differently. Like placement of images(it's just a part of whole div), grid system.
Following is a part of html admin saves:
<img src="http://localhost:3001/api/v1/images/image_454812039.jpeg" style="float:none;height:170.17142857142858px;width:301px;" /><p><span style="color:rgb(0,0,0);background-color:rgb(237,237,237);">Other names of Marshall Bruce Matters</span></p>
as you can see, that's what I get from backend. Now in the front when user is viewing, the span should be at the top, and image should be at bottom of it in a grid.
First of all to answer your question I will propose you to go and look at this loader react-jsx-parser -> https://github.com/TroyAlford/react-jsx-parser
But I would like to warn you that this method is not really recommended. It is better to have the structure in the code. Then call the source to the backend and then integrate it into your DOM.
This will make your frontend and backend easier to understand and therefore maintain
The only problem there is that the styles are not like jsx styles. They should be like:
style={{float:'none', height: '170.17142857142858px', width:'301px'}}
or
style={{float:'none', height: 170.17142857142858, width:301}}
But there is a npm package which helps getting the job done. react-html-parser
Hope it helps!
I want to extract data from a website, but it seems that the elements that I want to extract are not "accessible".I also discovered they seem to be pseudo-elements. I can se that their tags are marked with a # before in my web-inspector.
Moreover, while using XPath I can't extract the text I want to access. Their is a point in the CSS "cascade tree" when I can't extract the content of a tag, you can see it below.
Here I can extract information up to the tag 'content fond'. But when I ask for the tag "fos_comment_thread" which is the tag just below, the return is empty. And it is especially this tag which is a pseudo-element, and the following behind. However the text I want to access is even more deeper in this part of the CSS tree...
Input
reponse.xpath=('//div[class#='row']/div[#class='span9 forum']/div[class#='content fond'].extract()
Output
['<div id="foc_comment_thread"<div>']
Input
reponse.xpath=('//div[class#='row']/div[#class='span9 forum']/div[class#='content fond']/div[id#='fos_comment_thread'].extract()
Output
[]
I don't understand why I can't extract, I think it is due to the fact that the rest of my tags are pseudo-elements,but I haven't found a solution to solve the problem...
The first thing you need to do is to not using your web-inspector tool and look at the raw HTML of the website.
Web inspectors take into account the transformations made by Javascript and may show you an update HTML after Javascript execution, that scrapy obviously can't see.
I'd like to achieve the following and I'm looking for ideas. I have a document and I want to represent/transform this content in/to a nice SAPUI5 framework. My idea is the following: a split app with having the paragraph titles in the master view (plus a search function on top) and the respective content in the detail view.
I'd like to know from you if
a) you might want to share your ideas and hints on alternatives.
b) this can be achieved within one single file (i.e. all the code for the split app and document content in one html) and maybe using pure html code (xml also feasible) - against the background of easily handing a large amount of text available in html.
c) if you happen to have/know a reusable template.
Thanks in advance!
An interesting question. I went through a similar exercise once, re-presenting my site with UI5.
To your questions:
(a) I would think that the approach you suggest is a good one
(b) You can indeed include all the app in a single file, I do that often by using script templates, even with XML Views. You can see some examples in my sapui5bin repository, in particular in the SinglePageExamples folder. Have a look at this html file for example: https://github.com/qmacro/sapui5bin/blob/master/SinglePageExamples/SAP-Inside-Track-Sheffield-2014/end.html
What I would suggest is, rather than intermingle the document content and the app & view definitions, maintain the content of your document separately, for example, in XML or JSON, and use a client side model to load it in and bind the parts to the right places.
I just want to automate a web application, where that application parses the HTML page and pulls all the HTML Tags inner text based on some condition like if we have a tag called Span Example has given whose class="spanclass_1"
This is span tag...
which has particular class id. so that app parses and pulls that span into it.
And here the main pain area is, I should not use the developer code to automate that same parsing the HTML.
I want to automate that parsing done correctly, simply by using the parsed data which is shown in UI.
Any help, would be great.
Appreciating your time reading this.
(Note span tag is not shown)
Thanks buddies.
not enough details.
is this html page just a file in local filesystem on it is internet webpage?
do u have access to pages? can u modify it ? if answer yes, that just add javascript to page which will extract data and post to server.
if answer not, than it depends on language u use to programm.
Find good framework to parse html. load page parse it and extract data. Several situation can be there.
Worse scenario - page generated on client side using js.
Best scenario - page is in xhtml mode( u are lucky. any xml parser will help to build dom and extract data)
So so - page is simple html format (try several html parser to find most suitable for u)
I have a number of templates that create headings based on a formula. I am wondering if there is anyway to create an "edit" link that will take you directly to that section? The way that it currently works, the edit link takes you to editing the template itself. Could I possibly create a customized link that would keep you on the page and take you to right part?
Here is some sample code to help clear things up...
Template:Head:
==={{{1}}}===
This is a heading titled "{{{1}}}"
Test Page:
=Section 1=
{{head|1.1}}
{{head|1.2}}
{{head|1.3}}
=Section 2=
{{head|2.1}}
{{head|2.2}}
{{head|2.3}}
At the moment, if I want to edit the information for template "2.3", I have to edit all of section 2. (Note that for this example, that isn't a big deal. For the actual templates I am working with on my site, the templates have dozens of parameters and there are sometimes 10 or more in a section.)
Bottom line, is there way to create a custom edit link inside of the {{head}} template that would take you directly to editing the templates call on the page "Test Page"? Hope that makes sense.
Edit: Is there perhaps a way to make use of "anchor" tags? Can anchors be passed in to the URL?
To restate your problem, when you transclude a section heading the header isn't treated as being part of the destination page, so the edit link takes you back to the source. So you need a separate container for the template in order to edit it individually, and a complete section is the smallest editable container.
The only way I can think of doing this is using subpages (or virtual subpages if you don't have that ennabled in this namespace, doesn't change anything). So instead of placing {{head|1.1}} on MyPage, put it on MyPage/Subpage1 and then transclude that into MyPage in the usual way ({{:MyPage/Subpage1}}).
{{head}} can then include a custom edit link to the template input by using HTML heading tags (<h2> is equal to ==, etc.) to suppress the standard edit link and then use one of these templates (probably {{ed right}}) to create a custom edit link pointing to MyPage/Subpage1.
The way to create anchors in Mediawiki, by the way, is to use a <span id="name"/> tag, but that doesn't create a container that can be edited (or at least, not that I've been able to work out through URL tinkering).
I'm pretty sure there's no way to do that. As far as MediaWiki's section editing feature is concerned, the only thing that begins a new section is a line of the form:
=== Some text here ===
with the number of = signs determining the level of the heading. There's no way to get MediaWiki to let you edit any segment of the document that doesn't begin and end with such a line (or the beginning or end of the page).
Well, OK, I'm sure you technically could do it with an extension, in the sense that you can do anything with a MediaWiki extension. All you'd need to do is provide some way (e.g. a special parameter in an edit URL) for to user to indicate "I want to edit this template", then extract the template from the wikitext, present it to the user for editing, and write the result back into the page text over the original.
The tricky part will be extracting the template from the page source. (Finding and replacing templates on a page is a fairly common task for MediaWiki bot writers, so you might want to look for ideas there.) Whatever method you end up using for that, there will probably be edge cases where you need to give up and tell the user "Sorry, but I can't figure out how that template is transcluded here."