Ckeditor | Ckeditor with mvc | Ckeditor with mvc .net | easy way to add the ckeditor in the Asp.net mvc

-
As we know that blogging website is very easy to develop. But if you want to use text editor for blog post. It will be very tricky to work with this. Simply Blog post are written in plain text for storing on the database. If you want some dynamic type of Blog posts then you would make sure that you have a text editor like ckeditor. Editor helps to put the data into a format and then you can put it in a post as it is. So here you are able to use the given code for storing the ckeditor data into database. Keep in mind you will face many errors. So don't give up. try try again at last you will get achievement.
So let's start

Controller
  // POST: Blogs/Create

        [ValidateInput(false)]
        [HttpPost]
        public ActionResult Create(BlogTable blogTable)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    // TODO: Add insert logic here

                    db.BlogTables.Add(blogTable);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }

                catch
                {
                    return View();
                }
            }
            else
            {
                return View();
            }
        }



View for Creating Post or Insertion
 

@using (Html.BeginForm("Create", "Blogs", FormMethod.Post, new { @id = "CreateForm"})) { @Html.AntiForgeryToken() //

BlogTable

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.BlogTitle, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.BlogTitle, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.BlogTitle, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.BlogDescription, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextAreaFor(model => model.BlogDescription, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.BlogDescription, "", new { @class = "text-danger" })
}


Script :



 <script>
        $(document).ready(function () {
            CKEDITOR.replace('BlogDescription');
            $('#CreateForm').on('submit', function () {

                //get each instance of ckeditor
                for (instance in CKEDITOR.instances) {
                    //update element
                    CKEDITOR.instances[instance].updateElement();
                }

                //set updated value in textarea
                $('#BlogDescription').val(CKEDITOR.instances["BlogDescription"].getData());

            });
        });

        class MyUploadAdapter {
            constructor(loader) {
                // The file loader instance to use during the upload. It sounds scary but do not
                // worry — the loader will be passed into the adapter later on in this guide.
                this.loader = loader;
            }

            upload() {
                return this.loader.file
                    .then(file => new Promise((resolve, reject) => {
                        this._initRequest();
                        this._initListeners(resolve, reject, file);
                        this._sendRequest(file);
                    }));
            }

            // Aborts the upload process.
            abort() {
                if (this.xhr) {
                    this.xhr.abort();
                }
            }
            // Initializes the XMLHttpRequest object using the URL passed to the constructor.
            _initRequest() {
                const xhr = this.xhr = new XMLHttpRequest();

                // Note that your request may look different. It is up to you and your editor
                // integration to choose the right communication channel. This example uses
                // a POST request with JSON as a data structure but your configuration
                // could be different.
                xhr.open('POST', '@Url.Action("Uploadlmage", "Blogs",new { enctype = "multipart/form-data" })', true);
                xhr.responseType = 'json';
            }
            // Initializes XMLHttpRequest listeners.
            _initListeners(resolve, reject, file) {
                const xhr = this.xhr;
                const loader = this.loader;
                const genericErrorText = `Couldn't upload file: ${file.name}.`;

                xhr.addEventListener('error', () => reject(genericErrorText));
                xhr.addEventListener('abort', () => reject());
                xhr.addEventListener('load', () => {
                    const response = xhr.response;

                    // This example assumes the XHR server's "response" object will come with
                    // an "error" which has its own "message" that can be passed to reject()
                    // in the upload promise.
                    //
                    // Your integration may handle upload errors in a different way so make sure
                    // it is done properly. The reject() function must be called when the upload fails.
                    if (!response || response.error) {
                        return reject(response && response.error ? response.error.message : genericErrorText);
                    }

                    // If the upload is successful, resolve the upload promise with an object containing
                    // at least the "default" URL, pointing to the image on the server.
                    // This URL will be used to display the image in the content. Learn more in the
                    // UploadAdapter#upload documentation.
                    resolve({
                        default: response.url
                    });
                });

                // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
                // properties which are used e.g. to display the upload progress bar in the editor
                // user interface.
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', evt => {
                        if (evt.lengthComputable) {
                            loader.uploadTotal = evt.total;
                            loader.uploaded = evt.loaded;
                        }
                    });
                }
            }

            // Prepares the data and sends the request.
            _sendRequest(file) {
                // Prepare the form data.
                const data = new FormData();

                data.append('upload', file);

                // Important note: This is the right place to implement security mechanisms
                // like authentication and CSRF protection. For instance, you can use
                // XMLHttpRequest.setRequestHeader() to set the request headers containing
                // the CSRF token generated earlier by your application.

                // Send the request.
                this.xhr.send(data);
            }
        }
        function MyCustomUploadAdapterPlugin(editor) {
            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                // Configure the URL to the upload script in your back-end here!
                return new MyUploadAdapter(loader);
            };
        }
        ClassicEditor
            .create(document.querySelector('#BlogDescription'), {
                extraPlugins: [MyCustomUploadAdapterPlugin],
            })
            .then(editor => {
                window.editor = editor;
            })
            .catch(err => {
                console.error(err.stack);
            });


        @*class MyUploadAdapter {
            constructor(loader) {
                // The file loader instance to use during the upload.
                this.loader = loader;
            }

            // Starts the upload process.
            upload() {
                return this.loader.file
                    .then(file => new Promise((resolve, reject) => {
                        this._initRequest();
                        this._initListeners(resolve, reject, file);
                        console.log(file);
                        this._sendRequest(file);
                    }));
            }

            // Aborts the upload process.
            abort() {
                if (this.xhr) {
                    this.xhr.abort();
                }
            }

            // Initializes the XMLHttpRequest object using the URL passed to the constructor.
            _initRequest() {
                const xhr = this.xhr = new XMLHttpRequest();

                // Note that your request may look different. It is up to you and your editor
                // integration to choose the right communication channel. This example uses
                // a POST request with JSON as a data structure but your configuration
                // could be different.
                xhr.open('POST', '@Url.Action("Uploadlmage","Blogs")', true);
                xhr.responseType = 'json';
            }

            // Initializes XMLHttpRequest listeners.
            _initListeners(resolve, reject, file) {
                const xhr = this.xhr;
                const loader = this.loader;
                const genericErrorText = `Couldn't upload file: ${file.name}.`;

                xhr.addEventListener('error', () => reject(genericErrorText));
                xhr.addEventListener('abort', () => reject());
                xhr.addEventListener('load', () => {
                    const response = xhr.response;

                    // This example assumes the XHR server's "response" object will come with
                    // an "error" which has its own "message" that can be passed to reject()
                    // in the upload promise.
                    //
                    // Your integration may handle upload errors in a different way so make sure
                    // it is done properly. The reject() function must be called when the upload fails.
                    if (!response || response.error) {
                        return reject(response && response.error ? response.error.message : genericErrorText);
                    }

                    // If the upload is successful, resolve the upload promise with an object containing
                    // at least the "default" URL, pointing to the image on the server.
                    // This URL will be used to display the image in the content. Learn more in the
                    // UploadAdapter#upload documentation.
                    resolve({
                        default: response.url
                    });
                });

                // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
                // properties which are used e.g. to display the upload progress bar in the editor
                // user interface.
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', evt => {
                        if (evt.lengthComputable) {
                            loader.uploadTotal = evt.total;
                            loader.uploaded = evt.loaded;
                        }
                    });
                }
            }

            // Prepares the data and sends the request.
            _sendRequest(file) {
                // Prepare the form data.
                const data = new FormData();

                data.append('upload', file);

                // Important note: This is the right place to implement security mechanisms
                // like authentication and CSRF protection. For instance, you can use
                // XMLHttpRequest.setRequestHeader() to set the request headers containing
                // the CSRF token generated earlier by your application.

                // Send the request.
                this.xhr.send(data);
            }
        }

        // ...

        function MyCustomUploadAdapterPlugin(editor) {
            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                // Configure the URL to the upload script in your back-end here!
                return new MyUploadAdapter(loader);
            };
        }

        // ...

        ClassicEditor
            .create(document.querySelector('#BlogDescription'), {
                extraPlugins: [MyCustomUploadAdapterPlugin],

                // ...
            })
            .catch(error => {
                console.log(error);
            });*@



    </script>

Thanks for Reading and visiting my blog.

Comments

Post a Comment

Popular posts from this blog

How to Add the Urdu Fonts in Visual Studio in Window Forms c# | Styling Fonts | Visual Studio | Window Forms | C# | Add Local Fonts in the Visual Studio Window Forms |

-
#UrduFontStyle #VisualStudio #Winfoms How to write Urdu on C# Controls How to display Urdu Unicode characters on my Windows Forms UrduTextBox Control for C# Urdu Fonts in the Visual Studio can be written easily without any hurdle. You just need to install the Urdu Keyboard from Google. Now if you see the fonts style then you have no option to change the style of Urdu fonts in visual studio. By default, Urdu Font style is very ugly and it might be difficult for you to read it. So, if you want to give the good looking, dashing display then you have to go to do some extra effort for it. That’s why we brought here a way to achieve the Urdu font with beautiful and Good-Looking Font Style. //class  public static class MemoryFonts { [DllImport("gdi32.dll")] private static extern IntPtr AddFontMemResourceEx(IntPtr pbFont, uint cbFont, IntPtr pdv, [In] ref uint pcFonts); private static PrivateFontCollection pfc { get; set; } static MemoryF
Read more

Icons free download

-
  A question arise here that what is icon? Basically, icons are very important and necessary part for any graphical appearance. It illustrates the object, actions, ideas, nature and many more things in graphics. Every single object or stuff which is physically or ideally exists in our mind we can illustrate in the form of icons or graphics. Fundamentally, graphics are consisting of mainly following components; Lines, Shapes, Text, color, type, space etc. So, the if you want to create your own icons. We will recommend you to learn the Adobe Illustrator, Adobe Photoshop, Coral draw and many other tools to make the icons etc. I know If you are reading this article I damn sure that you want free readymade icons for your project or website whatever your use. Icons8 my favorite website for icons is Icons8   here is link to go to website & enjoy……                       https://icons8.com/icons/                                                                           
Read more