In a custom content type (employees) I have a body field.
In lib\modules\employees\index.js
addFields: [
{
name: 'body',
label: 'Beskrivelse',
type: 'area',
options: {
widgets: {
'apostrophe-rich-text': {
toolbar: ['Bold', 'Italic', 'Link', 'Unlink']
}
}
}
}
]
And in lib\modules\employees-widgets\views\widget.html
{{ apos.singleton(piece, 'body', 'apostrophe-rich-text', {
toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
})
}}
Editing directly on the page shows the rich text field with toolbar and preview. But in the admin view the toolbar shows, but the preview is not working at all. Look at the images linked bellow:
It looks like this when editing on the page
It looks like this in the admin view
Apostrophe's admin modal CSS is reset, so rich text areas in the modal do not reflect project level styles. This is in an attempt to keep project level styles from interfering with important Apostrophe UI.
You could always add those admin scopes to your project level CSS, just be aware of its reach.
If anyone should have the same question, Stuarts answer is correct (of course). Here is what I added in lib\modules\apostrophe-assets\public\css\site.less to make it work for me. You might want to add more options or adjust to taste :)
.apos-ui {
.apos-rich-text {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.3em;
}
h1,
h2,
h3 {
margin: 1em 0;
font-weight: bold;
}
p {
margin-bottom: 1em;
}
a {
color: darkblue;
}
strong,
b {
font-weight: bold;
}
i,
em {
font-style: italic;
}
}
}
Related
Fairly new to Logic Apps and not familiar with all the functions.
I created a simple Logic App that will check an RSS feed every so often, loops every item it finds, takes only certain data (title, summary and URL link), paste them in an HTML table and then send an email with the outcome.
Is it possible to inject an HTML tag in the HTML table?
I tried adding the <b></b> tag with some fixed text hoping that I will find some bold text in my email. Instead I just got regular text along with HTML tags.
Here's the code view of my current implementation. I pasted the Create_HTML_table part only.
"Create_HTML_table": {
"inputs": {
"columns": [
{
"header": "Title",
"value": "#item()['title']"
},
{
"header": "Description",
"value": "#item()?['summary']"
},
{
"header": "URL",
"value": "#item()?['primaryLink']"
},
{
"header": "Thumbnail",
"value": "#item()?['links'][1]"
},
{
"header": "Thumbnail Image",
"value": "<img src='#item()?['links'][1]' width='200' height='200'>"
},
{
"header": "Test",
"value": "<b>This text is bold</b>"
}
],
"format": "HTML",
"from": "#body('List_all_RSS_feed_items')"
},
"runAfter": {
"Initialize_variable": [
"Succeeded"
]
},
"type": "Table"
},
As you can see I tried with the <b> tag but my ultimate goal is to produce a thumbnail and the source of that would be a value from the same RSS feed. I'm getting the image URL (#item()?['links'][1]) but the output is plain text.
Thanks in advance
I had similar predicament with HTML table, and took guide from Alex's blog
Basically format the table using variables.
Define the style in varStyle as Object
{
"cellStyle": "style\"font-family: Calibri; padding: 5x; border: 1px solid
black;\"",
"headerStyle": "style\"font-family: Helvetica; padding: 5x; border: 1px solid black;\"",
"rowStyleHighValues": "style=\"font-size: 110%; background-color:#ff9c33\"",
"rowStyleLowValues": "style=\"background-color:#fcff33\"",
"tableStyle": "style\"border-collapse: collapse;\""
}
Initialize string variable with table header
<table style"border-collapse: collapse;">
<tr>
<th style"font-family: Helvetica; padding: 5x; border: 1px solid black;">Line#</th>
<th style"font-family: Helvetica; padding: 5x; border: 1px solid black;">Item</th>
<th style"font-family: Helvetica; padding: 5x; border: 1px solid black;">Description</th>
</tr>
And the apply to table as string, in my case by row
"For_each": {
"actions": {
"Append_to_string_variable": {
"inputs": {
"name": "varHTMLTable",
"value": "<tr #{if(equals(items('For_each')?['Order_x0020_Quantity'], items('For_each')?['Received_x0020_Quantity']), variables('varStyle').rowStyleLowValues, if(equals(coalesce(items('For_each')?['Received_x0020_Quantity'],'NULL'),'NULL'),'',variables('varStyle').rowStyleHighValues))}>\n <td #{variables('varStyle').cellStyle}>#{items('For_each')?['ASN_LineNumber']}</td>\n <td #{variables('varStyle').cellStyle}>#{items('For_each')?['Buyer_ItemID']}</td>\n <td #{variables('varStyle').cellStyle}>#{items('For_each')?['Buyer_ItemDescription']}</td>\n </tr>"
},
"runAfter": {},
"type": "AppendToStringVariable"
}
},
And close table parentheses.
My Logic Apps Flow :
with following output
I want to make my string clickable and add hyperlink to string. so wherever display my string is clickable. any suggestions
The Text component in React Native have a onPress as one of its props. You can use it to handle the clicking action.
<Text onPress={()=>{Linking.openURL('https://google.com')}>My Text</Text>
source: https://facebook.github.io/react-native/docs/text#onpress
You can use the react-native-parsed-text library.
Example:
import ParsedText from 'react-native-parsed-text';
class Example extends React.Component {
static displayName = 'Example';
handleUrlPress(url) {
Linking.openURL(url);
}
render() {
return (
<View style={styles.container}>
<ParsedText
style={styles.text}
parse={
[
{type: 'url', style: styles.url, onPress: this.handleUrlPress},
]
}
childrenProps={{allowFontScaling: false}}
>
My text with URL here
</ParsedText>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
url: {
color: 'red',
textDecorationLine: 'underline',
},
});
Here is a link of the library documentation: https://github.com/taskrabbit/react-native-parsed-text
how to get pageCount in background object, here is my code.
background: (currentPage, pageCount) => {
if (currentPage === 1) {
return [
{
image: img.coverbg,
height: 521,
width: 756
}
]
}
else if(currentPage == pageCount) {
return [
{
image: img.headbg,
width: 755,
height: 30,
},
]
}
},
i want pageCount in background, but i didnt get that,
i only get currentPage,
so how to get pageCount in background object.
You can use the header and footer functions to access the pageCount parameter.
These functions have three parameters - currentPage, pageCount and pageSize and you can apply any logic and return any valid pdfmake element from these functions.
So essentially, what you're doing in background can be done in either header or footer.
Access current page using currentPage and total page count using pageCount
docDefinition = {
pageMargins: [40, 150, 40, 40],
header: {
margin: 25.5,
columns: [
{
image: logo,
height: 106.4,
width: 540
// alignment: 'center'
}
]
},
footer: function (currentPage, pageCount) {
return [{ text: 'Page ' + currentPage.toString() + ' of ' + pageCount, alignment: 'center' }];
},
content: pdf, //pdf is all the data i use to generate pdf
defaultStyle: {
font: 'Times'
}
}
can't get pageCount in the background object,
we have to find another way for that.
I've added MathJax equation numbering to my xaringan slides, but the \eqref{} (or \ref{}) link takes me back to the first slide. I want to disable the link and remove the link colouring from the reference.
My .Rmd
---
title: "MathJax test"
output:
xaringan::moon_reader:
includes:
in_header: "mathjax-equation-numbers.html"
lib_dir: libs
---
\begin{align}
\bar{x} = \frac{1}{n}\sum_{i=1}^{10} x_i \label{my-eq}
\end{align}
An example of an equation is \eqref{my-eq}. Or \ref{my-eq}.
My attempt at a solution (not working) in the mathjax-equation-numbers.html file:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
"HTML-CSS": {
styles: {
".MathJax a": { color: "black",
"pointer-events": "none",
cursor: "default",
"text-decoration": "none"
},
".MathJax_Preview a": { color: "black",
"pointer-events": "none",
cursor: "default",
"text-decoration": "none"
},
}
}
});
</script>
Try replacing the content of mathjax-equation-numbers.html with below.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
});
</script>
<style>
.mjx-mrow a {
color: black;
pointer-events: none;
cursor: default;
}
</style>
I want to make a tabbed formPanel fitting user's screen.
here's my code:
var form2 = new Ext.FormPanel({
labelWidth: 75,
border:false,
items: {
// removing next line affects the layout %)
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[
{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name'
}
]
},
{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Home'
}
]
}
]
}
});
form2.render('container');
And later in my a have an , of course.
That makes a form with incredibly big width...
If I revome line with "xtype: 'tabpanel'" everything works fine (except there's no tabbed panel on screen)
Is it a bug or I forgot something. Help me figure it out, please=)
Thanks for your attention.
Set anchor and set layout : fit configs for formpanel.