ASP.NET and VB.NET do not support the CKEditor value

I recently transitioned from using bootstrap-wysihtml5 to integrating ckeditor in my asp.net and vb.net web application at the request of clients. To accomplish this, I followed these steps:

Utilizing ckeditor_4.4.1, I placed the ckeditor folder in the root directory and linked it in the master page as shown below.

   <%@ Master Language="VB" CodeFile="E4.master.vb" Inherits="_resx_E4" %>
   <!doctype html>
   <html lang="en">
   <head runat="server">
       <title></title>
       <meta name="robots" content="noindex, nofollow">
       <meta name="googlebot" content="noindex, nofollow">
       <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
       <script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
   </head>

The header of the content page remained unchanged, similar to the example provided.

<%@ Page Page Title="" Language="VB" MasterPageFile="~/_resx/E4.master" AutoEventWireup="false" CodeFile="new.aspx.vb" Inherits="E4_Jobs_new" ValidateRequest="false" %>
<%@ Page    <%@ Register Src="~/_controls/ucApplicationQuestions.ascx" TagPrefix="Application"
TagName="Questions" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

Lastly, on the content page, the text area code was added as follows:

<div><label>Description (required)</label>
  <div>
    <textarea runat="server" id="txtDescription" name="txtDescription" class="ckeditor" style="width: 98%; height: 250px;"  ></textarea>
  </div>
</div>

Although the ckeditor toolbar appears in the textarea, the website does not recognize or save any value entered in the field, making it impossible to submit the form as required. Despite attempting to input text directly or by copying from a Word file, the textarea remains blank. Any assistance with resolving this coding issue would be greatly appreciated.

Answer №1

After successfully finding the solution, I realized it would be helpful to share my process in case others encounter the same issue.

Here is a breakdown of the steps I took:

  1. First, I downloaded the ckeditor from this link:

  2. Next, I copied the entire folder into the project directory.

  3. In the master page, I added the following lines to reference ckeditor:

    <script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="/ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <script src="/ckeditor/ckeditor_custom.js" type="text/javascript"></script>
    
  4. I then changed the class for the specific textarea:

    <textarea runat="server" id="txtDescription" name="txtDescription" class="ckeditor" style="width: 98%; height: 250px;"   ></textarea>
    
  5. Lastly, I added the following JavaScript function at the bottom of the content page:

    $('#' + '<%= btnSave.ClientID%>').mousedown(function () {
     for (var i in CKEDITOR.instances) {
         CKEDITOR.instances[i].updateElement();
     }
    });
    

That's all there is to it!

The btn.save button is used to submit the data.

Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: $this.text is throwing a TypeError and is not working as a function

Upon examining the code below: var $this = $(this).children('div.submenu1').children('a.subtile')[0], title = $this.text(), name = $this.attr('node').val; An error is encountered: Uncaught TypeError: $this.text is not a fun ...

Leveraging Vuex stores in a modular WebPack setup

I am currently working on a web application where each page of the site has 2 JS files: a global "bootstrap.js" file that is consistent across every page and a custom JS file specific to each page. I've run into an issue where I want these files to sh ...

Instead of returning a single array of data from a form as expected, Jquery is returning two arrays

Having a bit of trouble with my code involving radio buttons and arrays using Jquery. I'm trying to record the selected values into one array, but it's creating separate arrays for each fieldset. Here's what I have: <script> $(doc ...

Is it possible to determine the size of an array using the eval() function?

How come this is not functioning as expected? var issue_0 = ["a","b","c","d"]; arrayname = "issue_0"; arraylength = eval([arrayname]).length; for (i = 0; i < arraylength; i++) { I'm attempting to access different arrays based on user input, so I ...

Exploring reoccurring elements in ASP.NET

My experience with ASP.NET is limited, but I have a specific requirement in my application. Users need to input their education information and be able to add multiple degrees if needed. How can I achieve this efficiently using Web forms? I was considerin ...

A guide on Using Angular to Filter Data by Date Input

Trying to filter out specific notes created on a selected date. The date format in the db.json files is '2023-08-14' and should match the input format...values are compared in the filter function. The issue arises as nothing is added to the filt ...

Steps to establish a connection with a remote MYSQL database using the actual IP address in Node.js

In my Nodejs file, I have set up the connection as follows. The issue arises when attempting to connect to the remote database on a server. module.exports = { host: '234.32432.32432',//this is an example IP address and not a real one. use ...

The final thumbnail fails to appear in the visible display (react-responsive-carousel)

I am currently facing an issue with displaying a series of images using react-responsive-carousel. When the images exceed a certain size causing the thumbnail section to become scrollable, the last thumbnail is always out of view. Although I have impleme ...

I am encountering an issue while trying to update SQL data from within a Node.js

Using a for-loop to update SQL command is common practice. Here's an example: for(var i=count1; i < count2;i++){ Book.TimeStart = Times[I] console.log(Book.TimeStart) sql = sql + `UPDATE projectroom.Details SET BookingId = `+Book.Bo ...

Mastering the fundamentals of integrating/augmenting a fresh template in Umbraco

Let me be completely honest. Umbraco is unlike any other CMS I have worked with before. I am currently struggling to grasp the proper method of creating a Template and integrating it into Umbraco. How exactly can I add a template? I am making changes to t ...

Executing a method in an Angular 2 component through its template

I've been diving deep into Angular2 lately, but I've hit a snag. Here's the template code where I'm stuck: <div class="container" *ngFor="let group of groupList"> <div class="row"> <di ...

What could be causing my NextAuthJS discord login to function in the test environment but fail to deploy in production on NextJS 13?

After attempting to deploy my NextJS application on Vercel, I encountered a problem with the AuthJS sign-in model. While running the program using npm run dev, everything works smoothly and I can log in to my Discord account linked to the developer portal& ...

Cannot remove selection of an image in Firefox after dropping it into a contenteditable area

When manipulating images in Firefox within a contenteditable area using drag-and-drop, you may encounter a selection issue where the images get selected unintentionally. This problem occurs randomly and can be frustrating to deal with. For reference, you ...

Prevent the ability to add options dynamically to a drop-down select list

I have implemented a dynamic data retrieval feature from my database using jQuery's .getJSON function and appended the data to an HTML select drop-down list. The JavaScript code for this functionality is as follows: $.getJSON('url', f ...

Access the variables created in a jQuery function from other functions for easy referencing

One of the challenges I'm facing is with a jQuery function structured like this: (function($){ $.fn.myjqfunction = function(cfg){ var foo1, foo2; return this.each... }; })(jQuery); I am seeking advice on how to expose foo1 and ...

The code functions properly on React Webpack when running on localhost, however, it fails to work once deployed to AWS Amplify

As I work on my React.js app, I encountered an issue with hosting pdf files on Amplify. While everything runs smoothly on localhost/3000, allowing me to access and view the pdf files as desired either in a new tab or embedded with html, the same cannot be ...

Issue in Angular: Attempting to access properties of undefined (specifically 'CustomHeaderComponent')

I have encountered a persistent error message while working on a new component for my project. Despite double-checking the injection code and ensuring that the module and component export logic are correct, I am unable to pinpoint the issue. custom-header ...

The folder for the console application is not producing the CSV file as expected

I am trying to create a CSV file in a specific folder using the data from a datatable. Below is the code I have written for this purpose. public static void GenerateCSVFile(DataTable data, string fileName) { try { string fil ...

Utilize AngularJS to inject a service into a module without assigning it to a variable, enabling easier minification

Currently, I am attempting to decrease the size of my AngularJS JavaScript code (using SquishIt). Within my module, there is a service injected as a function argument, as shown below. var myapp = angular.module('myapp', ['ngSanitize'] ...

Navigating through express.js async routing and managing errors

I am trying to streamline my route handling process by integrating error handling as middleware for my async function. Below is my current implementation: router.get( "/", asyncMiddleware( routeProviderMiddleware( async ({ y }) => ({ ...