I have a textarea :
<textarea id="id_description" >...</textarea>
when I use tinymce,instead of this textarea I have a span (id=id_description_parent) ,a table (id=id_description_tbl) and an iframe into It (id='id_description_ifr'),I tryed many things to make it RTL:
$(document).ready(function()
{
$('#id_description_parent').addClass('text-align','right');
$('#id_description_tbl').addClass('text-align','right');
$('#id_description_ifr').addClass('text-align','right');
});
It didn't work,and I tryed this:
tinyMCE.init({
directionality : "rtl"
});
and It didn't work.
tinyMCE.init({
theme : "advanced",
plugins : "directionality",
theme_advanced_buttons3_add : "ltr,rtl"
});
and It didn't work,too.
any other suggestion?
tinyMCE.init({
mode: 'textareas',
directionality : "rtl"
});
should be the correct one.
Can you show us your full html code generated on your page?
Related
I´m trying to use a date picker widget from a model form in the template. I´ve seen several posts but couldn´t get it working correctly.
The one I´m trying now is: Answered question
Form.py
My form code looks like
class FormularioTareas(forms.ModelForm):
class Meta:
model = Tareas
widgets = {'fecha_limite': forms.DateInput(attrs={'class': 'datepicker'})}
fields = ["destinatario", "titulo", "tarea", "resuelto", "fecha_limite"]
Template
In the template I add this script:
/* Include the jquery Ui here */
<script>
$(function() {
$( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1900:2012",
});
});
</script>
And have this form call in the html
<div style="background: white;">{{ tareas_form.fecha_limite }}</div>
Jquery
I load Jquery as follows and have no problems detected in the browsers console.
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
What I get
I found out that the picker is working, but the main text box diplays options down when focused so I didn´t see it. The text box is still behaving as a date picker and as a text box. How can I prevent this?
Any clues welcome. Thanks!
I used autocomplete="off" on the form so the usual text input dropdown options don´t show.
I'm currently working on a rendering in Sitecore 7.2 (MVC) that will show a jwPlayer given a link to a video (either in the Media Library or from an external source, like YouTube). When I add the rendering (with a valid data source) through Presentation Details in the Content Editor everything looks fine, and works perfectly. The trouble that I'm running into right now, though, is that when I try to do the same thing from the Page Editor (with the exact same rendering and data source), nothing is showing up in that placeholder at all.
The part of the rendering that deals with the video is as follows:
#if (Model.VideoLink != null && Model.Image != null)
{
var vidid = Guid.NewGuid().ToString();
<div class="article-video-module">
<p class="video-placeholder-text">#Html.Raw(Model.Heading)</p>
<div id="#vidid">Loading the player...</div>
<script type="text/javascript">
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
</script>
</div>
#Editable(a => Model.Description)
}
Other things that might help:
When I comment out everything in the <script> tag above the rendering shows up perfectly.
A reference to jwplayer.js is found on the page (that was my first thought)
Console errors in Javascript:
No suitable players found and fallback enabled on jwplayer.js
Uncaught TypeError: undefined is not a function on jwplayer("#vidid").setup({ and on jwplayer('videodiv-#vidid').onPlay(function () { from above.
How can I get jwPlayer and Page Editor to work nicely with each other?
The issue is that when you add a component through Page Editor, the script is fired before the div <div id="#vidid"> element is added to DOM. Don't ask me why...
The solution is really simple: wrap your javascript code with if condition, checking if the div is already there:
<script type="text/javascript">
if (document.getElementById("#vidid")) {
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
}
</script>
There is also another issue with your code - Guid can start with number, and this is not a valid id for html elements. You should change your code to:
var vidid = "jwp-" + Guid.NewGuid().ToString();
I wouldn't rule out a conflict with the version of JQuery that the Page Editor uses - this usually messes stuff up. There's a good post here on to overcome the issues.
http://jrodsmitty.github.io/blog/2014/11/12/resolving-jquery-conflicts-in-page-editor/
I have a basic tinymce editor on the site, I want to be able to add any image from my local drive and upload to the server. I am using coldfusion, below is my current code. This only has option to insert the image url and not adding image from the local drive. I have not worked with plugins before so can anyone please give me what options can be used here. thanks
<script type="text/javascript" src="/include/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
selector : "textarea#testone",
width : 500,
height: 200,
theme : "advanced",
skin : "o2k7",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path : false,
theme_advanced_resizing : true
});
</script>
Have read the documentation of the TinyMCE and they told like we cannot upload any images in a FAQ. Please look at the question Here. We have an option called Insert/Edit images to insert images in the text content.
I am attempting to render the HTML in a tooltip, but unfortunately its not working at all.
This is how it has been programmed:
<div class="someField"></div>
<script>
$(function () {
$('.someField').append('(Example)');
$("body").tooltip({html:true,selector: '[data-toggle=tooltip]'});
});
</script>
I have set data-html="true" in the link and furthermore enabled html in the tooltip parameter.
Whats wrong with my code?
UPDATE:
Bootstrap v2.3.1 is used for this project (old framework).
Try this:
$("body").tooltip({ html: true, selector: '[data-toggle="tooltip"]' });
WORKING DEMO
I had been through most of the conflict-resolving codes online [jquery.noConflict()] etc. And had tried using joomla plugin : jquery easy to try and do resolve it. None of it works for me. Here is the problem:
The top menu of the joomla website uses jquery to display the content, while the sidebar is just joomla's positioning of the menu elements.
With jquery.noConflict():
The top menu would work. The sidebar menu will not be clickable. [Only right-click and open in new tab then it will display the content]
If I had jQuery codes removed all together:
The top menu will, of course, fail to work. The sidebar menu will then be clickable.
So it is either top menu or the sidebar that would work, exclusively. Any suggestion?
My jQuery codes are as follows, in case I did something wrong. >< - currently using jquery easy plugin to :
<script type="text/javascript">
//<![CDATA[
jQuery(window).load(function(){
jQuery('#link1').click(function(e){
jQuery('#exposeMask, #csmf1').fadeIn('slow');
});
jQuery('#link2').click(function(e){
jQuery('#exposeMask, #csmf2').fadeIn('slow');
});
jQuery('#link3').click(function(e){
jQuery('#exposeMask, #csmf3').fadeIn('slow');
});
jQuery('#link4').click(function(e){
jQuery('#exposeMask, #csmf4').fadeIn('slow');
});
jQuery('#closebtn1').click(function(e){
jQuery('#exposeMask, #csmf1').fadeOut('slow');
});
jQuery('#closebtn2').click(function(e){
jQuery('#exposeMask, #csmf2').fadeOut('slow');
});
jQuery('#closebtn3').click(function(e){
jQuery('#exposeMask, #csmf3').fadeOut('slow');
});
jQuery('#closebtn4').click(function(e){
jQuery('#exposeMask, #csmf4').fadeOut('slow');
});
checkTab();
});//]]>
function switchContent(obj) {
obj = (!obj) ? 'tab1' : obj;
var contentDivs = document.getElementsByTagName('div');
for (i=0; i<contentDivs.length; i++) {
if (contentDivs[i].id && contentDivs[i].id.indexOf('tab') !== -1) {
contentDivs[i].className = 'hide';
}
}
document.getElementById(obj).className = '';
jQuery(".current").removeClass("active");
jQuery(".current").removeClass("current");
}
function checkTab() {
jQuery('a').each(function() {
jQuery(this).click(function() {
tab = jQuery(this).attr('href').split('#');
switchContent(tab[1]);
jQuery(this).parent('li').addClass('active');
jQuery(this).parent('li').addClass('current');
return false;
});
});
}
</script>
Thanks in advance!
Check the checkTab() function.
It is applied to each link and may interfere with other links in the sidebar. Maybe make this function less generic so it only applies to links in your top menu.