Add search filter in Django admin with a tinymce text editor
Imagine that you have a large number of objects stored in your DB, and you want to make some changes on a specific object, so you have to search in all the lines in your Django-admin to find this object. It’s requires a big energy and searching isn’t ? -_-
So, adding a search filter is the best solution that reduces effort, but how we can add a search filter in Django admin ?!
Don’t worry, actually It’s easy to do that using TinyMCE
Step 1 :
- In your project folder create a HTML file and name it ‘test.html’
- Copy this code and paste It in the file created :
<!DOCTYPE html>
<html>
<head>
<script
type=”text/javascript”
src=’https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'
referrerpolicy=”origin”>
</script>
<script type=”text/javascript”>
tinymce.init({
selector: ‘#myTextarea’,
width: 600,
height: 300,
plugins: [
‘advlist autolink link image lists charmap print preview hr anchor pagebreak’,
‘searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking’,
‘table emoticons template paste help’
],
toolbar: ‘undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ‘ +
‘bullist numlist outdent indent | link image | print preview media fullpage | ‘ +
‘forecolor backcolor emoticons | help’,
menu: {
favs: {title: ‘My Favorites’, items: ‘code visualaid | searchreplace | emoticons’}
},
menubar: ‘favs file edit view insert format tools table help’,
content_css: ‘css/content.css’
});
</script>
</head><body>
<textarea id=”myTextarea”></textarea>
</body>
</html>
When you open the file with your browser you should see this :
Step 2 :
Now we will work with a .js file so in the ‘settings.py’ we have to set the STATICFILES_DIRS, check your settings. file if It’s don’t exist in copy this line
STATICFILES_DIRS=[ os.path.join(BASE_DIR, ‘static/’), ]
And scroll down in your settings. py file, then paste It.
For example, I want to add the search filter here in this list of document :
And I want to add the text editor to this element ‘body’ :
Step 3 :
Let’s start with adding the search filter :)
we have to open the admin.py file in our application folder in the project folder and add :
search_fields=[‘the name of the entytie we want to find the object with’]
in my case It’s :
Now if we run the server we have to find the search filter in our admin page :
congrate the search filter is added.
Step 4 :
Now, let’s add the text editor :
Firstly we have to create a class Meta in our admin.py file into the class of the object we want to add the editor into :
Now create the static folder in your project folder, and into It create a .js file named ‘tiny.js’
In the js file paste this code :
var tiny=document.createElement(‘script’);
tiny.type=’text/javascript’;
tiny.src=’https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'
document.head.appendChild(tiny);
tiny.onload=function() {
tinymce.init({
selector: ‘#id_body’,
width: 600,
height: 300,
plugins: [
‘advlist autolink link image lists charmap print preview hr anchor pagebreak’,
‘searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking’,
‘table emoticons template paste help’
],
toolbar: ‘undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ‘ +
‘bullist numlist outdent indent | link image | print preview media fullpage | ‘ +
‘forecolor backcolor emoticons | help’,
menu: {
favs: {title: ‘My Favorites’, items: ‘code visualaid | searchreplace | emoticons’}
},
menubar: ‘favs file edit view insert format tools table help’,
content_css: ‘css/content.css’
});
}
but in the selector make sure to put the element right id !! in my case It’s : ‘id_body’
And congratulations !! enjoy your admin search filter & text editor
!! For the text editor you can have an API code by registring in tiny.cloud !!