Acutally I have two questions:
Is there any way to configure tinymce to allow only one element in the content with a specific class/attribute? For example, I need only one <div class="title"></div> element in the content, so when you edit this element and press Enter, it creates another <div class="title"/>. Rather, I want just a div with a different class (i.e. <div class="text">). Is that possible?
Is there any way to define allowed elements inside a div? For example, the only valid elements inside <div class="text"> are <br> and inline text. If you try to put a div/p/whatever inside, it will clean it out?
Thanks!
1. forced_root_block : 'div',
forced_root_block_attrs: { "class": "title"},
need to add a valid_element, valid_children and valid_class settings
https://www.tinymce.com/docs/configure/content-filtering/#valid_elements
https://www.tinymce.com/docs/configure/content-filtering/#valid_children
https://www.tinymce.com/docs/configure/content-filtering/#valid_class
Related
I've recently begun as an Ops dev on an AEM project, and we have a component (a table, that has a title, some copy and a field where the author can author some HTML to represent the contents of a table, with and elements. This, for whatever reason, has to sit within a component, called ArticleContainer. The title should have an H1 tag if the table is at the top of the page, and an H2 tag if it's anywhere lower down. I've tried using data-sly-test thus:
<sly data-sly-test.topOfPage="${table.firstPosition==true}">
<h1 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
</sly>
<sly data-sly-test="${!topOfPage}">
<h2 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h2>
</sly>
Now, this kind of processing has worked elsewhere where the component doesn't sit within a container, but it seems that if it's in a container it always picks up the non-topOfPage condition. I assume there might be a way to maybe do the test within the container component & pass it down into the table component? How would one go about this, or if it's not possible, is there another method by which one might achieve this?
There are two things here:
What does table.firstPosition return? You should be able to debug this in your Sling Model or POJO and probably need to adjust the logic to account for intermediary containers.
HTL/Sightly has a data-sly-element that allows you to change the HTML element based on an expression, you could make your code shorter (and easier to maintain):
<h1 data-sly-test="${table.headerCopy}" data-sly-element="${table.firstPosition ? 'h1' : 'h2'}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
Am having a AEM6 html component, am getting the values from dialog and using it inside the component via the .js file and using the return properties.
I could able to get the authored values but it is getting null or empty when am using it inside the onclick method. Please find below the code snippet below.
<div data-sly-unwrap data-sly-use.test="test.js"></div>
<a href="#" class="${test.testId}" id="${test.testId}" onClick="toggleDraw('${test.testId}')" >
The content I authored is getting displayed in class and Id, but it is not displaying in the onClick method.
Below is the Output am getting after authoring.
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('')" >
Output I needed is :
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('get-a-quote')" >
This should do the trick:
<a data-sly-test.variable123="toggleDraw('${test.testId}')" href="#" class="${test.testId}" id="${test.testId}" onclick="${variable123 # context='attribute'}" >
You need to put the function call in a variable because of the nested single quotes. And you need to manually set the context in this case. If "attribute" does some escaping you do not like, you could use "unsafe" - this will end in all escaping mechanisms being disabled. That might or might not be a security issue for your application.
HTH
I want to change button text which is generated by "Send to Messenger" plugin using javascript facebook SDK.
Fortunately, you can change the button texts! Unfortunately, you can't use arbitrary text. You can only choose from the pre-defined button texts by facebook.
Here's the list of button texts that you can use
GET_THIS_IN_MESSENGER
RECEIVE_THIS_IN_MESSENGER
SEND_THIS_TO_ME
GET_CUSTOMER_ASSISTANCE
GET_CUSTOMER_SERVICE
GET_SUPPORT
LET_US_CHAT
SEND_ME_MESSAGES
ALERT_ME_IN_MESSENGER
SEND_ME_UPDATES
MESSAGE_ME
LET_ME_KNOW
KEEP_ME_UPDATED
TELL_ME_MORE
SUBSCRIBE_IN_MESSENGER
SUBSCRIBE_TO_UPDATES
GET_MESSAGES
SUBSCRIBE
GET_STARTED_IN_MESSENGER
LEARN_MORE_IN_MESSENGER
GET_STARTED
You can change the text by setting cta_text attribute to one of the preceding
options. In this example, I used KEEP_ME_UPDATED option:
<div class="fb-send-to-messenger"
cta_text="KEEP_ME_UPDATED"
messenger_app_id="<APP_ID>"
page_id="PAGE_ID"
data-ref="<PASS_THROUGH_PARAM>"
color="<blue | white>"
size="<standard | large | xlarge>">
</div>
The easiest way I know to do it is by placing the send-to-messenger div inside another div & formatting the parent div & a sibling div.
The trick is to pass the click event through an element.
This requires position first div as absolute.
Here's my code
<div style='height: 32px;width: 148px;display: inline-block;overflow: hidden;color: #fff;'>
<div style='background-color: #5ac7ec;pointer-events:none;position:absolute;width:148px;z-index:2;line-height:36px;>
CONNECT
</div>
<div class="fb-send-to-messenger"
messenger_app_id="123456789"
page_id="987654321"
data-ref="some_data"
color="blue"
size="large">
</div>
You can use the cta_text option but you cannot write anything there, only couple of predefined texts.
Read more here
I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.
I have a problem to add and delete html div dynamically. Below is the simplified code that I am working on:
<input type="button" value="+ Add More Division" name="add_div" id="add_div">
<div id="div_1">
<input type="button" value="+ Delete Div A" name="del_a" id="del_a">
</div>
<div id="div_2">
<input type="button" value="+ Delete Div B" name="del_b" id="del_b">
</div>
<div id="div_3">
<input type="button" value="+ Delete Div C" name="del_c" id="del_c">
</div>
This is the situation, div_1, div_2 and div_3 can be added and removed dynamically. div_1 will always be associated with button id del_a, div_2 with del_b and div_3 with del_c. It is only 3 divs maximum can be added.
I need jquery that can add and remove the div and reuse div_1, div_2 and div_3 along with the associated button ids.
For example, if the user delete the div_2, and the user want to add more division (which is only 1 more can be added), the jquery will try to find the existing divs, and somehow remember it. Since div_2 is not exist, div_2 will be added, does not matter the order. div_3 can go first before or after the other divs.
I just want to give freedom for the user to edit the form, since this massive form. I do not know how to do this in jQuery using .each().
Thanks for your help.
Edited:
By default, only div_1 is exist on the form. The user can have the freedom to add another 2 divs to add more divs. The user is also have the capability to delete div_1 when either div_2 or div_3 exist. One div must be exist.
you can use detach() function....it will simply remove the div and if you want to add it again have, a reference of that div and add it again..something like this
suppose, user deleted the first div like this...
var div
$('#del_a').click(function(){
div= $('#div_1').detach();
});
...
and when user click on add button you can do something like this...
$('#add_div').click(function(){
$(div).appendTo('where you want to append')
});
i think this might help you..
If you want to delete div dynamically den use it:
$('#mydiv').empty();
Add /Remove dynamically HTML element with jQuery plz see below
Add /Remove dynamically HTML element with jQuery
You can have three variables acting as flags for the divs present. When the add div button is clicked, check for the first flag which is not set, add that div and set the flag for that particular div. If all three flags are set, then disable the add more divs button. Hope this helps.
Its working fine (Plz optimized this code) :)
<script type="text/javascript" >
$(document).ready(function(){
$('#add_div').click(function(){
if(($('#del_a').is(":hidden"))){$("#del_a").show(); return; }
if(($('#del_b').is(":hidden"))){$("#del_b").show(); return; }
if(($('#del_c').is(":hidden"))){$("#del_c").show(); return; }
});
$('#del_a').click(function(){
if($('#del_b').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_a').hide();
});
$('#del_b').click(function(){
if($('#del_a').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_b').hide();
});
$('#del_c').click(function(){
if($('#del_a').is(":hidden") && $('#del_b').is(":hidden") )
return;
$('#del_c').hide();
});
});