Does anyone know how to integrate this wordcount plugin with the existing django-ckeditor apps? Either https://github.com/dwaiter/django-ckeditor or https://github.com/shaunsephton/django-ckeditor/.
Specifically, I'm stuck at Step 4
For your CKEditor instance, use the following HTML markup (content can be any element name you wish, so long as the hidden field has its element name in the format elementWordCount)
<label for="content">Content</label>
<textarea class="ckeditor" name="content"></textarea>
<input name="contentWordCount" type="hidden" value="250" />
Where do I insert that Input element?
I'm using the widget btw.
Alternative solutions to having a wordcount plugin are welcome.
I'm the author of https://github.com/shaunsephton/django-ckeditor/.
I've just updated the repo to support widget template customization.
You should now be able to integrate the wordcount plugin by specifying it as part of the CKEDITOR_CONFIGS setting:
CKEDITOR_CONFIGS = {
'default': {
'extraPlugins': 'wordcount',
}
}
and then overriding the ckeditor/widget.html template to look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<input name="contentWordCount" type="hidden" value="250" />
<textarea{{ final_attrs|safe }}>{{ value }}</textarea>
<script type="text/javascript">
CKEDITOR.replace("{{ id }}", {{ config|safe }});
</script>
I've loaded jQuery here through Google APIs just as an example.
Related
Lets say I have a model with 2 fields. With one field being a choice field of radio button Choice1, Choice2 and Other, the next being Other which is a textfield I want the "other" textbox to appar / enabled only when "Other" is selected in the radio button.
This question is not from the django-forms category. This applies more to the front-end category. Everything that is sent from the django server is static. Sure, you can write a form class and override the template for it. Also, you can connect the js script directly to the form class. It is convenient, but not canonical. Just, write the JS script or using JQuery, which will activate the field when you select a particular option.
I wrote for you a small example of how this can be do it.
I hope this helps you.
$('input[type=radio][name=choices]').change(function() {
$('input[type=text][name=other]').prop(
'disabled',
function(i, v) {
return !v;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p><input name="choices" type="radio" value="choice1">Choice 1</p>
<p><input name="choices" type="radio" value="choice2">Choice 2</p>
<p><input name="other" type="text" disabled></p>
</form>
I'm stuck using django-markdownx to automatically update page and to submit changes.
I followed this question and answer and managed to get django-markdownx working in admin, and within my view. However in my view editing the textarea does not automatically update the page.
The admin page with django-markdownx is exactly what I want, updating the textarea updates the page, but not the underlying database field until you hit save.
So I then tried to rip out the admin code into my own view.
In my view/template I have a form, textarea similar to admin one. I also included "/static/markdownx/js/markdownx.js" and set my form to mostly be similar to the admin page:
<form method="POST" action="">{% csrf_token %}
<div class="markdownx">
<textarea name="myfield" rows="10" cols="40" required="" data-markdownx-upload-urls-path="/markdownx/upload/" data-markdownx-editor-resizable="" class="markdownx-editor" id="id_myfield" data-markdownx-urls-path="/markdownx/markdownify/" data-markdownx-latency="500" data-markdownx-init="" style="transition: opacity 1s ease;">
{{ note.myfield }}
</textarea>
</div>
<div class="markdownx-preview">
{{ note.formatted_markdown|safe }}
</div>
</form>
This didn't work.
I see periodically there is requests to /markdownx/markdownify/ when you edit in admin, but not mine. I'm not sure if I should aim to do the same or just do some timed javascript page refresh and pass all the data from within my form back to my view to then re-render the page again.
I can't quite get my head around the django-markdownx documentation.
UPDATE:
The Documentation seems to suggest that a call to MarkdownX() should do the initialisation.
<script src="/static/markdownx/js/markdownx.js"></script>
...
<script type="text/javascript">
let parent = document.getElementsByClassName('markdownx');
let md = new MarkdownX( element, element.querySelector('.markdownx-editor'), element.querySelector('.markdownx-preview'));
</script>
But when I try this I get.
Uncaught ReferenceError: MarkdownX is not defined
Also I don't see any initialisation like this within the admin page.
Is there an example of using the django-markdownx in your own views similar to the usage within admin?
Thanks
LB
The following is a broken solution.
The correct method would be to use the MarkdownX's built-in Javascript, but I just can't get it to work, yet. So, I wrote my own. It may be of use to others.
In template html, include js.cookie.min.js in order to get the django csrftoken. Then a callback function which will be called when a change is made to the textarea. We then update the preview div with HTML code we received back from MarkdownX's markdownify call.
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
...
<script type="text/javascript">
function myMDFunc( elem ) {
input = elem.value;
var csrftoken = Cookies.get('csrftoken');
$.ajax(
{
type: "POST",
url: "/markdownx/markdownify/",
data: { CSRF: csrftoken, csrfmiddlewaretoken: csrftoken, content: input}
})
.done(function(data, status){
document.getElementById("markdownx-preview").innerHTML = data;
});
}
</script>
Still in the template html, in the form, call this function both for onchange and onkeyup.
<form method="POST" action=""> {% csrf_token %}
{{ note.title }}
<div class="markdownx">
<textarea onchange="myMDFunc(this)" onkeyup="myMDFunc(this)" cols="60" rows="5" name="text" >
{{ note.myfield }}
</textarea>
</div>
<div class="markdownx-preview" id="markdownx-preview">
{{ note.formatted_markdown|safe }}
</div>
<input type="submit" id="submit" name="submit">
</form>
In summary, a change to the textarea means we invoke the 'onchange' or 'onkeyup', which calls myMDFunc. Then myMDFunc does an ajax call with data which is the raw MarkDown code, the response to this call is the pretty HTML data. The callback within myMDFunc updates the preview with that pretty HTML.
It kinda works. I'm sure the real MarkdownX code will handle drag'n'drop of images and pacing the ajax calls to be nice to the server.
I am looking to use Django to create a form with a password field that can be toggled to be hidden or shown. This functionality can be seen on MailChimp at https://login.mailchimp.com/signup. Does anyone know how such a field could be created?
it's just purely javascript :
<script type="text/javascript">
function reveal()
{
if(document.getElementById('box').checked)
{document.getElementById("pw").type='text';}
else
document.getElementById("pw").type='password';
}
</script>
<input type="checkbox" id="box" onclick ="reveal()">
<input type="password" id="pw">
I have a simple ember.js text field and I'm trying to add autofocus
{{view PersonApp.SearchField placeholder="search..." valueBinding="searchText"}}
PersonApp.SearchField = Ember.TextField.extend({
});
Can I add this in the javascript or is at as simple as a attribute in the template itself?
Update:
More recent versions of Ember now have support for this built in, so you no longer need to reopen TextField to add an attributeBinding. As of January 2014 (commit fdfe8495), you can simply use the HTML5 autofocus attribute in your template:
{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}
Here is a simple jsfiddle demonstration.
Previous Solution:
You can also reopen TextField to allow you to bind the autofocus attribute:
Ember.TextField.reopen({
attributeBindings: ['autofocus']
});
And then in your template:
{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}
There is also the option to use the HTML5 autofocus attribute on the TextField.
PersonApp.SearchField = Ember.TextField.extend({
attributeBindings: ['autofocus'],
autofocus: 'autofocus'
});
See also documentation on Mozilla Developer Network for further information about the autofocus field:
Autofocus meaning that we start focusing on the text box right away? You want didInsertElement for that.
didInsertElement: function() {
this.$().focus();
}
http://jsfiddle.net/qKXJt/139/
I wrapped this method in a little 1kb package to solve this even a bit more elegantly, directly in the template, without any further coding:
<body>
<!-- all the libraries -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script>
<!-- your template -->
<script type="text/x-handlebars">
Hello, world! {{ input }}
:
: more elements here
:
{{ autofocus }}
</script>
<!-- your app -->
<script>
Ember.Application.create();
</script>
</body>
The package is at https://github.com/AndreasPizsa/ember-autofocus
(or on bower install ember-autofocus). Enjoy!
I am having some issues getting Ember.js to pick up and render a handlebars template file. I get the following error in my browser's debug console:
Error: <(subclass of Welcome.LoginView):ember166> - Unable to find template "login_view".
I have the following code in emberjs code in my app.js file:
Welcome = Ember.Application.create();
Welcome.LoginView = Ember.View.extend({
templateName: 'login_view'
});
I also have the following snippet in my index.html file:
<script type="text/x-handlebars">
{{view Welcome.LoginView}}
</script>
Finally, relative to the app.js file I have the file templates/login_view.handlebars, which contains the template contents to render:
<form class="form-inline">
<fieldset>
<input type="text" name="email" placeholder="email address">
<input type="password" name="password" placeholder="password">
<button class="btn btn-primary" type="submit">Sign In</button>
<!-- ... -->
</fieldset>
</form>
The error seems to indicate that it can't locate the handlebars template. When I look at the generated HTML I don't see the above form on the page.
Can anyone shed some light on what I am doing wrong?
From your question I assume that you are NOT using some tools which precompile a handlebars template for you. Ember looks for templates in the Ember.TEMPLATES array–it does not automatically look for templates located at templates/ and ending with .handlebars. Without a build step that compiles the templates for you, you have to do this on your own.
This may sound complicated but it's as easy as the following:
Ember.TEMPLATES["login_view"] = Ember.Handlebars.compile('TEMPLATE CODE');
You have to make sure that this template definition occurs before you want to use it.
Another solution would be to inline your template into your index.html and add a data-template-name="login_view" attribute to the script tag:
<script type="text/x-handlebars" data-template-name="login_view">
<form class="form-inline">
<!-- ... -->
</form>
</script>
However, if your project has numerous templates then I would suggest you adopt a build tool that does the first option for you.
Related question: Is it possible to load a Handlebars template via Ajax?