I have CKeditor4.3.1 and have buttons for superscript and subscript
You can see them and they work on edit area, but it doesn't on site's page
Code on a page have this tags
<m:omath>
<m:ssub>
<m:ssubpr>
<m:ctrlpr></m:ctrlpr>
</m:ssubpr>
<m:sub>
<m:r>
<m:rpr>
<m:scr m:val="roman">
<m:sty m:val="b"></m:sty>
</m:scr>
</m:rpr>
<span style="font-size:14px;"><sub>t</sub></span></m:r>
<m:r>
<m:rpr>
<m:scr m:val="roman">
<m:sty m:val="b"></m:sty>
</m:scr>
</m:rpr>
<span style="font-size:14px;"><sub>+</sub></span></m:r>
<m:r>
<m:rpr>
<m:scr m:val="roman">
<m:sty m:val="b"></m:sty>
</m:scr>
</m:rpr>
<span style="font-size:14px;"><sub>1</sub></span></m:r>
</m:sub>
</m:ssub>
</m:omath>
May be I miss some styles or plugins?
Okey, sorry. It was reset.css, who re-styled sup and sub styles. Just removed them from css file and it works now.
Related
I'm working on my first TYPO3 project and I'm done with the template, I just can't figure out how to make this work:
My page content is one column with header, text and title in every field.
I don't have any problems showing header and text on my website, but the image just won't work.
My image-path is fileadmin/user_upload/ and I can show it by setting the filename in my code, but thats obviously not what I want.
This is my Content Object Array, the code for the image is one of the versions I found when searching, but none of them worked:
page.20 = CONTENT
page.20.table = tt_content
page.20.wrap = <div id="content">|</div>
page.20.renderObj = COA
page.20.renderObj.wrap = <div id="news">|</div>
page.20.renderObj {
10 = TEXT
10.stdWrap.field = header
10.stdWrap.wrap = <div id="newstitle"><span>|</span></div>
20 = IMAGE
20.stdWrap.field = image
20.stdWrap.wrap = <div id="newsimage><img src="fileadmin/user_upload/|"</img></div>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <div id="newstext"><p>|</p></div>
}
Hope someone could help me out, so I can finally finish this project!
Maybe I don't understood correctly, but... you don't need to write it yourself, just in your main TS template include CSS Styled Content from extension, so you can render whole column like:
page.20 < styles.content.get
If you need to change some wrappings (i.e.: to add your news CSS classes) you can also override them in setup field.
edit: Go to Templates > Template analyzer and check the EXT:css_styled_content/static/ code to find declaration you'd like to change (prepare for looong reading ;)) when you finally find it, just you can overwrite it in your TS, ie: to wrap text section of Text w/ image CE you can use:
tt_content.textpic.20.text.wrap = <div class="myNewsClass"> | </div>
Finally I'd suggest not to replace original classes but add your own so the above sample would be like:
tt_content.textpic.20.text.wrap = <div class="csc-textpic-text myNewsClass"> | </div>
de facto all these classes csc- has some CSS default styling therefore you can choose to align the image to the left or right (etc) out of the box. If you'll remove it you'll need to handle these things yourself.
When I use an empty span, let's say
<span class="anchor" id="jumptome"></span>
ckeditor removes it.
To the config.js of ckeditor I added
CKEDITOR.editorConfig = function( config ) {
config.IgnoreEmptyParagraphValue = true;
};
CKEDITOR.dtd.$removeEmpty.span = 0;
Now ckeditor does not remove the spans, but they are wrapped in p's like
<p><span class="anchor" id="jumptome"></span></p>
Is there any configuration to remove the p's (I need the paragraphs for other elements, just want to avoid them for the spans).
Thanks in advance!
Why would you need the spans? If you need an anchor, why not use for example a DIV which can be styled to be a visible block in the Editor but an invisible ... anchor in the output content? I do this in my CKE app. Although I use widgets for anchors but same princible anyway.
I'm guessing the reason is because of caret positioning and user targeting - how would the user target that anchor? If it can't be targeted - why do you need it in the contents? Why not something targetable?
Im trying to build a simple page, where the user clicks on some 'buttons' which load a corresponding iframe. (url: gnosi.gr/games)
All is working well on Chrome & surprisnlgy enough on IE as well, however Firefox doesn't seem to load any iframe.
Right now, what I'm doing is having several elements conatining the 'buttons' users have to click on :
<ul>
<li class="gamelink hangman-game" data-id="1418235" data-game="hangman"></li>
<li class="gamelink crossword-game" data-id="1418235" data-game="crossword"></li>
<li class="gamelink bugmatch-game" data-id="1418235" data-game="bugmatch"></li>
<li class="gamelink hungrybug-game" data-id="1418235" data-game="hungrybug"></li>
</ul>
my JS:
$(document).ready(function(){
window.gamesinfo={'crossword': ['Crossword','Fill in the words blah blah'],'hangman': ['Hangman','Try to guess the word 1 letter at a time'],'bugmatch': ['Bug Matc','Eat the bug that corresponds to the answer'],'hungrybug': ['Hungry Bug','blah blah'],'wordscramble': ['Word Scramble','ajoidoas'],'studyslide': ['Study Slide','study the words '],'studymatch': ['Match','do the matching']};
window.gamesdimensions={'crossword': [950,540],'hangman': [520,540],'bugmatch': [800,500],'hungrybug': [890,600],'wordscramble': [720,400],'studyslide': [1040,800],'studymatch': [752,670]};
$('.gamelink').click(function(){
$('#game').html('<iframe src="https://www.studystack.com/i'+$(this).attr('data-game')+'-'+$(this).attr('data-id')+'" width="'+window.gamesdimensions[$(this).attr('data-game')][0]+'" height="'+window.gamesdimensions[$(this).attr('data-game')][1]+'" frameborder="0" scrolling="no" style="overflow:hidden;"><style>#highScoreFrame{display: none!important;</style></iframe>');
gameloaded($(this).attr('data-game'),$(this).attr('data-id'));
})
$('#togglehelp').click(function(){
$('#instructions').toggle();
});
})
function gameloaded(game,id){
$('#instructions').html(window.gamesinfo[game][1]);
$('#game').width($('#game iframe').first().width())
$('#moregames').show();
$('#instructions').hide();
$('#moregames .gamelink').each(function(){
$(this).attr('data-id',id);
})
}
WIERD BEHAVIOUR:
Works fine on localhost
If i try to invoke the click event on an element that loads an iframe, typing
$('.gamelink').eq(4).click()
in the console, I get nothing, however if i invoke it on one of the first 4 elements, the iframe loads (missing a parameter it will display an error message, but thats fine since the first 4 buttons have that parameter missing on purpose, it is filled in by JS after the first iframe is loaded)
I tried some suggestions i found in similar questions, such as placing an empty iframe with display:none; before the one i want to load, replacing '&' with '&' etc, nothing seemed to work.
Any help would be highly appreciated, thanks in advance !
I've revised my original question because I'm new and can't reply to my own just yet... but here is my issues re-written, with more coding:
I'm using this as part of NetSuite, which is an accounting/ordering/CRM tool our company uses. We are allowed to customize our own estimates by using their form creation tool, which takes a combination of freemarker, html and xml to create our estimates.
I've designed a nice looking estimate and within this estimate I can call variables from the database. Basically shipping/billing info, items on the estimate and today I was able to add PAGE NUMBERS (Page 1 of 5 or Page 3 of 5) and place them at the bottom utilizing a FOOTER. However I wanted to also do this so that if my estimates ran multiple pages, I could print a header at the top so you'd see "Quantity, description, price" as I explained.
Now... I'm not exactly sure what the macros are for, this was how I wrote my page numbers and put them on the footer, which i'll show the code for in a bit.
I wanted to do something similar so that I could say "If we're not looking at page 1, print THIS header, but IF we're looking at Page 1, DONT print a header" so I figured i could do that page = page + 1 so it kept increasing. This idea WORKS in other parts of my estimate (for example, every item listed is on a seperate line on the estimate, and i actually print a line number, using that method, but that runs within its own routine later in the system via the LIST function)....
so any help getting this to work for my HEADER would be appreciated. I was hoping I could just do something simple such as "page = PAGENUMBER" but i can't utilize the built-in pagenumber variable for some reason, it doesnt quite work that way... here is what I have, in a simplified manor:
<!--?xml version="1.0"?-->
<pdf>
<head>
<style type="text/css">
STYLES HERE
</style>
<macrolist>
<macro id="footer">
<hr></hr>
<table border="0" width="100%">
<tr>
<#setting time_zone="America/New_York">
<td align="left">${.now}</td>
<td align="right">Page <pagenumber/> of <totalpages/></td>
</tr>
</table>
<hr></hr>
</macro>
</macrolist>
</head>
<body footer="footer" footer-height="12mm">
REGULAR HTML HERE FOR OUR COMPANY
<#if (record.item?size > 0)>
<table class="border" width="100%" cellpadding="2">
<#assign line = 0>
<#list record.item as item>
<#if item_index==0>
<tr>
<td width="5%" class="border4" valign="center"><b>Ln #</b></td>
<td width="5%" class="border4" valign="center"><b>Qty</b></td>
<td width="66%" class="border4" valign="center"><b>Description</b></td>
<td width="12%" class="border4" valign="center" align="right"><b>Unit Price</b></td>
<td width="12%" class="border5" valign="center" align="right"><b>Ext. Price</b></td>
</tr>
</table>
<table width="100%" cellpadding="7">
</#if>
<tr>
<#assign line = line + 1>
<td width="5%" valign="top">${line}</td>
<td width="5%" valign="top">${item.quantity}</td>
<td width="71%" valign="top">${item.description?html}<br /><i>Manuf. Part #: ${item.item.text}</i></td>
<td width="12%" valign="top" align="right">$${item.rate}</td>
<td width="12%" valign="top" align="right">$${item.amount}</td>
</#if>
</tr>
</#list>
</table>
</#if>
MORE HTML FOR OUR COMPANY HERE
</body>
</pdf>
So with all that said, any thoughts as to how I can utilize that "LN #, QTY, DESCRIPTION, UNIT PRICE, EXT. PRICE" as headers on pages 2 and on? (Page 1 has our letterhead at the top and some other html coding for our company)
As Yvan noted, this is not a freemaker question, but actually a bfo question. And as Shaun noted you can use the CSS id selector of #pagen to set header/footer for a given page. The problem with this is that all the existing documentation I've seen shows that if you use the #pagen CSS selector, then you have to define the CSS for every other page as well. So for example ...
/* If */
#page1 {
header: empty-header;
header-height: 0px;
}
/* Then */
#page2, #page3, #page4, ... #pagen {
header: default-header;
header-height: 10mm;
}
You basically have to guess what the maximum page size will be and add a CSS selector for each and every one of page. It might be safe enough to go up to 10 or something, because honestly whose going make an 11 page order, right?
Well if this doesn't sit right with you or you just don't like hard-coded limitations like this, then I believe I have an alternative. If one defines the default header on the <body> tag. Then define the #pagen CSS selector for just the page (or pages) you need (i.e. page 1 in your case,) but use the !important CSS property you'll get the desired results. For example this should do the trick...
<!--?xml version="1.0"?-->
<pdf>
<head>
<style type="text/css">
#page1 {
header: empty-header !important;
header-height: 0px !important;
}
</style>
<macrolist>
<macro id="empty-header">
<!-- Nothing to look at here -->
</macro>
<macro id="default-header">
<!-- Header HTML for all but first page -->
</macro>
</macrolist>
</head>
<body header="default-header" header-height="12mm">
<!-- Page body HTML -->
</body>
</pdf>
I don't know what macro and macrolist are (that's not FreeMarker), but I guess you simily shouldn't initialize count to 0 unless it's yet undefined. That is, instead of that two #assign-s you could write <#assign count = (count!0) + 1>. Of course it matters what the life-cycle of the FreeMarker Environment looks like, as the value of count will be lost if you start a new Environment (like call Template.process).
I'm using NetSuite too and ran into a somewhat similar problem. I don't think your problem is linked to Freemarker, but to Big Faceless Organization (BFO). Freemarker prepares the xml and BFO converts it into a PDF.
More information on BFO can be found here: http://bfo.com/products/report/. That's where you have the concept of header / footer / macros.
Read section "Pagination with tables - headers and footers" from page 35 of the User Guide which describes how to reprint a standard header or footer row in the table.
The table has to be top-level to work (i.e. not within another table.)
I don't yet know the answer to your question, but I can tell you that it may be found in the Big Faceless PDF Library user guide, not Freemarker...
http://bfo.com/products/report/docs/userguide.pdf
The answer relates to the application of special macros:
To display headers and footers on the page, the Report Generator introduces the concept of a “macro” - a block of XML which can be
repeated multiple times throughout the document.
There are three different types of macro attribute, which can be used either on the BODY or PBR elemnts to set a macro for every
page, or for a specific page by using a #pagen entry in a stylesheet.
header > to set the header of the page
footer > to set the footer of the page
background-macro > to set the background of the page
A macro is defined in the HEAD of the document inside a MACROLIST. Each macro must have an ID, which is how it’s referenced later in the document. Here’s an example which sets a standard footer on each page:
<pdf>
<head>
<macrolist>
<macro id="myfooter">
<p align="center">
Page <pagenumber/> of <totalpages/>
</p>
</macro>
</macrolist>
</head>
<body footer="myfooter" footer-height="20mm">
Document contents here
</body>
</pdf>
The “footer” attribute is the ID of the macro, and the “footer-height” attribute is the height required for the footer. If the document
contents require several pages, the footer will be placed on each one, unless there is a PBR element which changes the footer (or
removes it by setting footer="none"). The “header” attribute can be used the same way to set a header at the top of each page.
I know this answer is coming late for the question, but as I was trying to figure out the same thing I learned the answer from Russ's answer and the BFO documentation. Hopefully this will help anyone else out that is looking for the same information. Using the style attribute and the #pagen id you can set a header or footer to a specific page. nlfooter is the name of the footer macro. I am applying this footer to the first page only. Here is the code I used to apply a footer to the first page only.
<style type="text/css">
#page1 {
footer: nlfooter;
footer-height: 10%;
}
</style>
The comment from Russ with the quote from BFO's documentation helped me realize this. Here is the quote with emphasis added.
There are three different types of macro attribute, which can be used either on the BODY or PBR elemnts to set a macro for every page, or for a specific page by using a #pagen entry in a stylesheet.
In CKEDITOR 4 I'm using the inline mode
I have a BulletedList with <ul contenteditable="true">
and when I press ENTER I can't not create a new LI with a <P contentenditable="true"> children to have the toolbar for format text options.
Here the JSFIDDLE
And here the list plugin source
You cannot build your editor on <ul> element because CKEditor wasn't designed to work like that. You can find the list of editable elements by calling CKEDITOR.dtd.$editable in your console:
CKEDITOR.dtd.$editable
>>> Object {address: 1, article: 1, aside: 1, blockquote: 1, body: 1…}
You can wrap your list in div element, make it editable and strip out when retrieving data. There's a simple example of how to modify elements on editor output. You'll need to return false when your div is processed. This is it.
You can also do this with RegExp but I don't find it gentle ;)