Thursday, July 11, 2013

Basic CKEditor 4 Image Uploader with Express and NodeJS



I recently found an interesting article on a simple hack to get the existing image upload feature in CKEditor 3 enabled and functioning with a PHP server.  I took his idea and applied it to the latest version, which is currently 4 with a NodeJS and Express framework backend.

It basically requires editing two files inside the ckeditor sdk:  image.js and config.js.

Edit ckeditor/plugins/image/dialogs/image.js and look for "editor.config.filebrowserImageBrowseLinkUrl" around line 975.  A few lines below will be "hidden: true".  Change this to "hidden: false".  Further down is another "hidden: true" near "id: 'Upload'", which needs to be changed to "hidden: false".  Once you are done with the changes, image.js should look like this.

Next, we need to edit the config.js file to point to where the upload POST route is.  Edit ckeditor/config.js and add config.filebrowserUploadUrl = '/upload'



Next, we need to create our Express POST route to handle the upload.  I am taking the temp file name and prepending it to the actual file name and saving it under ./public/uploads.  Since public is a default static route in Express, any uploaded image will be immediately available in the CKEditor UI.  The important part here is to return a script block, instructing CKEditor to take the new image.






Finally, route it through express:

var fn = require("./upload.js");
app.post("/upload", fn);

62 comments:

  1. good news, but how to use it with expressjs + angularjs

    ReplyDelete
  2. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Python Online certification training
    python Training institute in Chennai
    Python training institute in Bangalore

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Attend The Python training in bangalore From ExcelR. Practical Python training in bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Python training in bangalore.
    python training in bangalore

    ReplyDelete
  5. Nice Blog… really worth following !!! Thanks for sharing it Social Beat .

    For more details Click Here- I Digital Academy

    ReplyDelete
  6. Hi! This is my first visit to your blog! We are a team of volunteers and new initiatives in the same niche. Blog gave us useful information to work. You have done an amazing job!
    360 digitmg course on big data analytics

    ReplyDelete
  7. Through this post, I know that your good knowledge in playing with all the pieces was very helpful. I notify that this is the first place where I find issues I've been searching for. You have a clever yet attractive way of writing.
    data scientist course
    data analytics courses
    business analytics courses
    360DigiTMG

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Really awesome blog!!! I finally found a great post here.I really enjoyed reading this article. It's really a nice experience to read your post. Thanks for sharing your innovative ideas. Excellent work! I will get back here.
    Data Science Course in Marathahalli
    Data Science Course in Marathahalli

    ReplyDelete
  10. It's a very attractive and useful blog .I has found the solution, Thanks for the share.
    Hadoop Training in Hyderabad

    ReplyDelete
  11. Hi buddies, it is great written piece entirely defined, continue the good work constantly.
    https://360digitmg6.blogspot.com/2020/03/all-you-need-for-data-science.html

    ReplyDelete
  12. Study ExcelR Digital Marketing Courses in Bangalore where you get a great experience and better knowledge.

    Digital Marketing Courses in Bangalore.

    We are located at :

    ExcelR
    #49, Ground Floor, 27th Main, Near IQRA International School, opposite to WIF Hospital, 1st Stage, BTM Layout, Bengaluru, Karnataka 560068
    Phone: 070224 51093
    Hours: Sunday – Saturday 7AM – 10PM
    Google Map link : Digital Marketing Courses in Bangalore

    ReplyDelete
  13. it only work on ejs
    if you use frontend Angular , or reactjs , veujs , Everything will fail

    ReplyDelete
  14. Expected to form you an almost no word to thank you once more with respect to the decent recommendations you've contributed here.
    Machine Learning Training In Hyderabad

    ReplyDelete
  15. Informative post, i love reading such posts. Read my posts here
    Teamvoodoo
    Unknownsource
    Laravel web development services

    ReplyDelete
  16. You have written a very informative article with great quality content and well laid out points. I agree with you on many of your views and you've got me thinking.
    Best Data Science training in Mumbai

    Data Science training in Mumbai

    ReplyDelete
  17. Not many writers can persuade me to their way of thinking. You've done a great job of doing that on many of your views here.
    SAP training in Mumbai
    Best SAP training in Mumbai
    SAP training institute Mumbai

    ReplyDelete
  18. This is an awesome post.Really very informative and creative contents,Keep Sharing

    Devops training in Hyderabad

    Best Devops training institutes in Hyderabad

    ReplyDelete
  19. It’s very informative and you are obviously very knowledgeable in this area. You have opened my eyes to varying views on this topic with interesting and solid content.
    data analytics courses

    ReplyDelete
  20. It is the intent to provide valuable information and best practices, including an understanding of the regulatory process.
    data scientist course

    ReplyDelete
  21. It's a great pleasure reading your post.Its full of information I am looking for and I love to post a comment that "The content of your post is awesome" Great work.
    data scientist course in hyderabad

    ReplyDelete
  22. Good information and informative content. Keep posting more blogs with us. Thank you.
    Data Science Training Institute in Hyderabad

    ReplyDelete
  23. Just pure brilliance from you here. I have never expected something less than this from you and you have not disappointed me at all. I suppose you will keep the quality work going on.
    data science classes in hyderabad

    ReplyDelete
  24. I see some amazingly important and kept up to length of your strength searching for in your on the site
    full stack web development course malaysia

    ReplyDelete
  25. Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work.
    <a href="https://360digitmg.com/course/certification-program-on-full-stack-web-developerfull stack web development course</a>

    ReplyDelete
  26. If it's not too much trouble, hold this awful do whatever it may take and I see take care of to more prominent of your fabulous blog entries. Bandicam Registered Free

    ReplyDelete
  27. The most beguiling sound I have ever heard in that framework is your voice. The most flawless spot I have ever been to is in your arms. https://wishesquotz.com/happy-birthday-wishes-for-my-love/

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. That's an amazing adaption! Thank you for sharing how you upgraded the CKEditor 4 hack with a NodeJS backend. Your suggestions for improving image.js and config.js are useful to other developers. Excellent work!
    Data Analytics Courses in India

    ReplyDelete
  30. This kind of practical information is immensely valuable to developers looking to enhance their applications with rich text editing capabilities. Thank you for sharing this knowledge and making it easier for others to integrate image uploading into CKEditor. Great job!
    Data Analytics Courses in Nashik

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. Thank you for sharing this insightful guide on enabling image uploads with CKEditor 4 using NodeJS and Express. Your step-by-step instructions make it easier for developers to implement this feature. Great contribution!
    Data Analytics Courses in Nashik

    ReplyDelete
  33. This article likely provides a basic tutorial on setting up an image uploader for CKEditor 4 using Express and Node.js, offering practical guidance for web developers looking to enhance their content management systems with image upload functionality.

    Data Analytics Courses In Kochi



    ReplyDelete
  34. Hello Blogger,
    Your article provides a clear and helpful guide for enabling image uploads in CKEditor 4 with a NodeJS and Express backend. The step-by-step instructions make implementation straightforward and easy. I appreciate the author's efforts.
    Is iim skills fake?

    ReplyDelete
  35. For both students and developers, it is excellent and helpful. Your post taught me a lot of new ideas. quality creation. Thank you for the useful information.
    Data Analytics Courses in Agra

    ReplyDelete
  36. "This blog's tutorial on creating a basic CKEditor 4 image uploader with Express and NodeJS is a helpful resource for developers looking to enhance their content management capabilities."
    Data Analytics Courses in Delhi

    ReplyDelete
  37. This information is very useful for the people who are showing interest in this field.
    Data Analytics Courses In Chennai

    ReplyDelete
  38. good blog
    Data Analytics Courses In Vadodara

    ReplyDelete
  39. nice blog
    Data Analytics Courses In Vadodara

    ReplyDelete
  40. Creating a basic CKEditor 4 image uploader with Express and NodeJS is a practical way to enhance content management systems, providing users with the ability to insert and manage images seamlessly. In the field of data analytics, Glasgow offers comprehensive Data Analytics courses that equip professionals with the skills to gather, process, and extract valuable insights from diverse data sources. Please also read Data Analytics courses in Glasgow.

    ReplyDelete
  41. This information proves highly beneficial for individuals expressing interest in this particular field.
    data Analytics courses in leeds

    ReplyDelete
  42. Well-articulated! Your tutorial on setting up a basic CKEditor 4 image uploader with Express and NodeJS is both informative and practical. It's great to have a clear guide for implementing this feature. Thanks for sharing this informative piece!"
    Digital marketing courses in woking

    ReplyDelete
  43. This comment has been removed by the author.

    ReplyDelete
  44. Excellent and informative tutorial on setting up a basic CKEditor 4 image uploader with Express.
    Digital Marketing Courses in Italy

    ReplyDelete
  45. Great insights! Your blog provides valuable information on the topic
    Data Analytics Courses in Nigeria

    ReplyDelete
  46. "Great tutorial on integrating CKEditor 4 with Express and Node.js for image uploading! I especially appreciated the step-by-step instructions and code snippets that made it easy to follow along. However, I have a question regarding handling image uploads with larger file sizes. How can we implement file size restrictions or optimize the upload process for larger images? Thanks in advance for any insights!"
    Best Data analytics courses in India

    ReplyDelete
  47. Thanks for sharing this CKEditor hack! Your clear guide with NodeJS and Express makes image uploading seamless. Great help!

    Investment Banking Industry

    ReplyDelete
  48. I appreciate your kindness in sharing your knowledge with millions of people. Thank you for sharing such an informative.
    Data analytics framework

    ReplyDelete
  49. Credit goes to author for explaining in a simplistic manner. Please accept my regards.
    Investment banking courses after 12th

    ReplyDelete