The text editor is not loading, I don't know why. I have a coldfusion page and I have included it as follows (Please not I am working inside sessions)under
the section.
<cfoutput>
<script type="text/javascript" src="#rootUrl#/#myPath#/tests/user/tinymce_4.0.8/tinymce/js/tinymce/tinymce.min.js"></script>
</cfoutput>
Below this, I have defined styles for including CSS:
<cfoutput>
<style>
#import url('#rootUrl#/#myPath#/css/first.css');
#import url('#rootUrl#/#myPath#/css/second.css');
#import url('#rootUrl#/#myPath#/css/third.css');
</style>
</cfoutput>
And below this code, i have defined the code to initiate which can be found here (Under View Source):
http://www.tinymce.com/tryit/full.php
<script type="text/javascript">
tinymce.init({
selector: "textarea",
convert_urls: false,
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
I am getting following error, could you tell me why is it like that?
NetworkError: 404 Not Found - http://abc.xyz.com/Public/tests/user/tinymce_4.0.8/tinymce/js/tinymce/tinymce.min.js
ReferenceError: tinymce is not defined
tinymce.init({
Please let me know what's wrong.
P.S: I have tested the editor and it works fine if I simply create a simple HTML page or even cfm page and do the above mentioned stuff(Excluding rootURL defining steps)
try put "http://abc.xyz.com/Public/tests/user/tinymce_4.0.8/tinymce/js/tinymce/tinymce.min.js"(change abc.xyz.com with the actual domain) in your address bar and see if the scripts is printed in your browser
Related
I'm making a personal homepage with Django. I am using django-markdownx for the content of article model. In addition, Katex has been implemented to the project with lines of JS in the Django template HTML to render Latex.
What I'm having a hard time is applying this Katex JS code to the Django admin page. How can I implement the JS code below to specific elements of the Django admin page? I don't want the script to be applied to all elements of the admin page, because editing text boxes should show raw Latex code, but only the preview part should render Latex parts as equations.
Here are django-markdownx, and Katex references:
https://neutronx.github.io/django-markdownx/
https://katex.org/docs/api.html
This is a JS code block that I'm using for Latex rendering.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css"
integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
crossorigin="anonymous"
/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js"
integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
crossorigin="anonymous"
></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/contrib/auto-render.min.js"
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "\\[", right: "\\]", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false }
]
});
});
</script>
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 creating content in my pages with some javascript. I'm creating my divs and adding scripts. So, content is pulled into page via javascript.
I'm also using django-tinymce package in my admin site. I'm typing and saving my HTML code via HTML button on tinymce. Everything works fine in template. But, when i want to edit that content, my divs are replaced with an empty div in Tinymce HTML view.
Here is my original html code:
<div site-widget="bulletin">
<bulletin-navigator></bulletin-navigator>
<bulletin-filter-container></bulletin-filter-container>
<bulletin-event-list-container></bulletin-event-list-container>
</div>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/common.js"></script>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/bulletin.js"></script>
After saving this html code, when i press HTML button on tinymce again i see the following html code:
<div> </div>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/common.js"></script>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/bulletin.js"></script>
my tincmce config is like this in settings.py file:
TINYMCE_DEFAULT_CONFIG = {
'plugins': "table,paste,searchreplace",
'theme': "advanced",
'cleanup_on_startup': True,
'custom_undo_redo_levels': 10,
'skin' : "o2k7",
'width' : "100%",
'height' : "600px",
'extended_valid_elements': 'div|bulletin-navigator|bulletin-filter-container|bulletin-event-list-container'
}
It looks like TinyMCE is kindly filtering out any tags it does not recognize. It is being overly helpful...
You may need to define 'custom_elements' in TinyMCE - http://www.tinymce.com/wiki.php/Configuration:custom_elements
Spend some time Here and configure it to fit your specific needs.
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'm using the new sightly language in AEM6 to render my components using templates, in my component there is a video that uses the JWPlayer plugin which needs the following code to initalise the video:
<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=123456',
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
But I want to make the Youtube variable dynamic so the user can change the id within the author so have got the following template passing in the videoPath (youtube id):
<template data-sly-template.player="${# videoPath}">
Video Id: ${videoPath}
<script src="//jwpsrv.com/library/HjcD1BZoEeS7ByIAC0MJiQ.js"></script>
<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=' ${videoPath},
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
</template>
The problem I'm having is the ${videoPath} in the tags is not rendering the id where as the one at the top of the template is.
Is there a way in solving this using the sightly templates?
Sightly contains out-of-the-box XSS protection. It detects that you are trying to inject videoPath variable inside the <script> tag and requires to specify the context, so it can escape special characters. In this case it should be scriptString context:
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=${videoPath # context="scriptString"}',
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
More info can be found in the Adobe docs.