How can I configure TinyMCE 6 to insert a <br> by pressing only Enter (rather than Shift+Enter)?
For example, when I run the following, I cannot create a new line simply by clicking [Enter]. Pressing [Enter] does nothing. Is there a setting that allows me to click [Enter] rather than having to know about [Shift+Enter]?
<p contenteditable="true" id="myeditor">
Line1
<br>
Line2
</p>
<script type="text/javascript">
tinymce.init({
selector: "#myeditor",
inline: true,
menubar: false,
statusbar: false,
toolbar: "undo redo | bold italic underline strikethrough"
});
</script>
Live example: https://fiddle.tiny.cloud/zciaab/2
One method to fix this implementation could be to configure the editor.addShortcut API to add a <br> element whenever the enter keydown event happens.
I believe the syntax is to use (mceSetAttribute, true, '<br>') method (docs are here) with the addShortcut method.
I've updated the fiddle to show how it could work:https://fiddle.tiny.cloud/Kciaab/4
EDIT: it is the execCommand('InsertLineBreak') core command method not setAttribute. Docs Link for core commands.
Related
I'm trying to create an ACF that has image, title, excerpt, and content.
I'd like to have it function like this page http://ashmitar.sg-host.com/our-team/
I'd like to pull data from ACF so my client can update. The text excerpt should be 50 words and the click the 'read more'(hide show less) and show full content (appended to excerpt)and show a less button to close back to just the excerpt with a link 'show less'(hide show more).
I can do it with javascript but it's not something that can be updated easily because the button ID has to be different for each team member, etc.
Using ACF, I'd have:
Image field
Title field
excerpt field
'show more' link to open all content
full content field appended to excerpt
'show less' link to close content
excerpt field - 'show less' hidden
Anybody ever try doing anything like this?
After lots of research, I came up with this solution. Hope it can help others:
<h2 class="team-member-name"><?php the_field('team_member_name'); ?> </h2>
<div class="post">
<div class="excerpt"><?php echo wp_trim_words( get_field('bio_excerpt'), 50 ); ?></div>
<div class="whole-post"><?php echo wp_trim_words( get_field('bio_full'), 250 ); ?></div>
Read More
</div>
Here's the jQuery
$('a.read').click(function () {
$(this).siblings('.whole-post').is(':visible') ? $(this).html('Read More') : $(this).html('Read Less');
$(this).siblings('.excerpt').slideToggle(200);
$(this).siblings('.whole-post').slideToggle(200);
});
I am using Confluence 5.10.8. On some pages I have several text snippets to be copied to the clipboard by the reader. For each of those text snippets I would like to be able to add a non-editable text field and a button to copy the text to the clipboard when clicking it, maybe like this:
I also need some visual feedback to indicate the text was copied.
I think a user macro is the right thing to do this, right? Something like (does not copy yet):
## #param Text:title=Text|type=string|required=true|desc=The text to be displayed and copied
<!-- font-awesome contains the clipboard icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span style="white-space: nowrap">
<input type="text" value="$paramText" size="$paramText.length()" readonly>
<button class="fa fa-clipboard" title="click to copy">
</span>
I was able to solve this using clipboard.js. I am not sure why, but it did not work when adding the <script> tag directly to the macro. So instead I have added it to:
Confluence administration → Custom HTML → Edit ( /admin/editcustomhtml.action ) → At the end of the BODY
<!-- used by copy-text user macro to copy stuff to the clipboard -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>
Confluence administration → User Macros ( /admin/usermacros.action ) → Create a User Macro
## Macro title: text to copy
## Macro has a body: Y
## Body processing: Rendered
##
## Developed by: https://stackoverflow.com/users/1948252/
## Date created: 2018-06-28
## #param AllowLineWrap:type=boolean|default=false
## strip tags (in case they were pasted) to remove any formatting
#set ($body = $body.replaceAll("<.*?>",""))
#if ($paramAllowLineWrap == true)
#set ($whitespace = "normal")
#else
#set ($whitespace = "nowrap")
#end
<!-- for the clipboard icon etc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
window.onload=function()
{
var clipboard = new ClipboardJS('.copy-text-button');
clipboard.on("success", function(e)
{
console.log(e);
var button = $(e.trigger);
var title = button.prop("title");
button.addClass("fa-check-square");
button.html(" copied to clipboard");
function reset()
{
button.removeClass("fa-check-square")
button.html("");
}
window.setTimeout(reset, 5000);
});
clipboard.on('error', function(e) { console.log(e); });
}
</script>
<span class="panel" style="white-space: $whitespace;font-family:monospace;font-size:1em">
<span class="panelContent">$body</span>
<button class="copy-text-button fa fa-clipboard" data-clipboard-text="$body" title="click to copy">
</span>
Remarks:
In my first attempt I used a parameter and no body. But as it turned
out, template variables cannot be used in macro parameters. So the
usage of the macro was very limited. Therefore I removed the
parameter and enabled the body.
Body Processing has to be set to Rendered. I also tried the other options (Escaped and Unrendered), but those did not work together with template variables.
I replaced the initial text field by a simple span to be able to enable line wrap. This also solved issues with " characters in the body.
I use that font-awesome <link> to have some icons (clipboard and
check-square). At the first attempt I added the <link> to that
field on the Custom HTML page (because there is also the clipboard
<script>), but then the macro preview had no icon and thus looked
broken. So I decided to add it directly to the macro.
On editing a confluence page you can use it with
Ctrl+Shift+A and then enter the
macro name. Seems to work well with multiple usage on the same page.
Also works with template parameters.
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'm having a hard time trying to connect SUI modal with SilverStripe to generate them dynamically.
I want to achieve something like this:
I have button (attach events) to trigger modal with some content. I wanted to loop that elements (GridField) to generate everything dynamically. But the only thing I can achieve is multiple modals with the same "trigger class" and it doesn't matter which button I have clicked (first, last or whatever). I only have one modal (the last in hierarchy). Without SUI the solution is easy - put "this" to fetch the closest element and I can have as many different modals as I want, but SUI seems to complicate things.
I think the best solution will be to generate a class/id with SilverStripe and pass it to the JavaScript to use with modal or use one class for every modal and to "somehow inform" that this button triggers this modal.
Basically I need one code snippet to handle many modals, not many snippets to handle many modals. I hope it's clear enough what the the problem is.
Here is my code:
HTML/SS
(without specific SilverStripe tags)
<% loop SomeName %>
<div class="job-offers">
<a class="ui right floated button job-application">Click here</a>
</div>
<div class="ui basic modal job-application">
<div class="job-application-sheet">
(...)
<div class="job-application-sheet-content">
<div class="ui grid">
(...)
<div class="ui center aligned container job-application-action">
<p>Lorem ipsum</p>
<button class="ui primary button">Click here</button>
</div>
</div>
</div>
</div>
</div>
<% end_loop %>
JavaScript
$('.ui.basic.modal.job-application')
.modal({
autofocus : false,
observeChanges: true
})
.modal('attach events', '.job-application', 'show');
As you can see "job-application" class is a trigger for modal, so is this possible to change it to "(this)" so I don't have to write "specific" class for each button/modal. Or maybe there is a different/easier solution?
first i generated a data-type attribute for each of my elements that are going to display a modal when they are clicked, and in send as a local the same index to the modal this way:
<% #relateds_array.each.with_index do |related,i| %>
<div class="card custom" data-id="<%=i%>">
<%= render partial: 'my_modal', locals: {index: i} %>
</div>
<% end %>
the i put the modal in the partial that i called my_modal for this example and used the index that i sent as a local to create an unique id for each my modals, like this:
<div class="ui modal" id="modal-<%=index%>">
<p>blabla things inside this modal.</p>
</div>
and then with javascript, simply get the data-id of the element clicked and select the element that contain the id for that data-id, like this:
$('.element_that_you_want_to_open_moda_on_click').click(function(event){
var card_clicked = $(this).attr('data-id');
$('#modal-' + card_clicked).modal('show');
});
Hope this was useful for you.
Note that i used Ruby on Rails for this example, but the behaviour that you should use should be something similar to this, no matter what framework you use.
Answer based on Sebastian's solution. I did some minor tweaks to meet my needs, like I've used ID variable to automatically get DataObject ID which is generated dynamically.
Basically to dynamically add Semantic UI (SUI) modal in SilverStripe, first you should add "data-id" in a modal trigger, for example:
Template.ss
<a class="ui button custom-trigger" data-id="my-item-$ID">Click here</a>
then inside modal container add an "id" tag, for example:
<div id="modal-my-item-$ID" class="ui basic modal">
(...)
</div>
Finally in JavaScript file:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('#modal-' + triggerItem).modal('show');
});
I meet problem with SUI autofocus, so after a modal opens, screen went to the bottom and button placed there was highlighted.
I tweaked original snippet adding SUI settings:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('.ui.modal')
.modal({
autofocus: false,
observeChanges: true
})
$('#modal-' + triggerItem).modal('show');
});
If someone wants to write "data-id trigger" manually using fields in CMS, then change $ID to $SomeField variable. Then normally add that field in .php file and in Page Controller add something like this:
public function init() {
parent::init();
Requirements::javascriptTemplate($this->ThemeDir().'/js/script.js', array(
'SomeField' => $this->SomeField
));
}
Hope this helps someone.
Did anyone successfully put 2 editors in different languages on the same page?
When I tried adding one editor in English and another in French, the first editor's top level menu items remained in English, but the drop down menus, tooltips and dialogue buttons all changed to French.
It seems that the last call to .init translates not only the ID provided in selector, but the other editor except the top level menus as follows:
This is the config I am using:
<textarea id="emailBody" rows="7" name="emailBody"></textarea><br />
<textarea id="emailBodyFrench" name="emailBodyFrench"></textarea><br />
<script type="text/javascript">
var oInitBodyEng = {
selector: "#emailBody",
language: "en_CA"
};
tinymce.init(oInitBodyEng);
var oInitBodyFr = {
selector: "#emailBodyFrench",
language: "fr_FR"
};
tinymce.init(oInitBodyFr);
</script>
Is there anything wrong with the way I am initializing the 2nd editor that might cause partial translation of the editor already initialized? Does any initialization have to be performed asynchronously?