Editing Fields in Asp-net 3.1: A guide to using Summernote or other rich text editors

I am facing an issue where some fields in my database contain strings that generate HTML code such as "<p'>Hello world</p'>". I am attempting to import these strings into a summernote rich text editor for editing purposes. However, I have tried the following code but it doesn't seem to be effective:

<html>
    <head>
        
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4033252c2523347200746e716e706d32236e70">[email protected]</a>/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="057660696066713745312b342b352877662b35">[email protected]</a>/dist/js/select2.min.js" defer></script>
           <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a797f67676f7864657e6f4a3a2432243b32">[email protected]</a>/dist/summernote.min.css" rel="stylesheet">
         <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a797f67676f7864657e6f4a3a2432243b32">[email protected]</a>/dist/summernote.min.js"></script>
    </head>
    <body>
        <div class="form-group row">
            <label asp-for="MainText" class="col-sm-2 col-form-label text-right"></label>
            <div class="col-sm-10">
                <div asp-for="MainText" id="summernote"></div>
                <span asp-validation-for="MainText" class="text-danger"></span>
            </div>
        </div>
       <script>
          $(document).ready(function () {
               $('#summernote').summernote();
           });
       </script>
    </body>
</html>

I would appreciate any suggestions or advice on how to resolve this issue. Thank you.

javascriptc#asp.netasp.net-mvc

Answer №1

Oops! I made an update because of my oversight. After going through the documentation, it was mentioned that a div is required to contain the summernote id attribute. However, I later discovered that a text area can also be used, as shown below. The functionality is now working perfectly.

<html>
    <head>
        
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cffe9e0e9eff8beccb8a2bda2bca1feefa2bc">[email protected]</a>/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6615030a030512542652485748564b14054856">[email protected]</a>/dist/js/select2.min.js" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b2b4acaca4b3afaeb5a481f1eff9eff0f9">[email protected]</a>/dist/summernote.min.css" rel="stylesheet">
    <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d3d5cdcdc5d2cecfd4c5e0908e988e9198">[email protected]</a>/dist/summernote.min.js"></script>
    </head>
    <body>
        <div class="form-group row">
            <label asp-for="MainText" class="col-sm-2 col-form-label text-right"></label>
            <div class="col-sm-10">
                <textarea asp-for="MainText" id="summernote"></textarea>
                <span asp-validation-for="MainText" class="text-danger"></span>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('#summernote').summernote();
            });
        </script>
    </body>
</html>

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

How can you handle setting an array in JavaScript if a key/value pair does not exist when attempting to get it from a JSON object?

When dealing with a large JSON table stored in localStorage and a user-provided key, I need to access the associated value. However, if the key and/or value does not exist, my intention is to create them. But there's a roadblock... The JSON data prov ...

javascriptjqueryjson

error encountered during module import in Ember.js

I am struggling with removing diacritics from a string in my Ember.js app. After discovering the 'fold-to-ascii' plugin on GitHub, I added it to my project using npm. Although the plugin is visible under the node_modules folder, I'm unsure o ...

javascriptember.jspluginsnpmrequire

Leveraging nested objects within React state

A React child cannot be an object. If you intended to render a collection of children, utilize an array Encountering the error mentioned above has left me puzzled regarding its restrictions. Below is the code where I am facing this issue. It includes an o ...

javascriptreactjs

Failed to insert a new element into the MongoDB array

After trying the code below to update a document within a collection, I encountered an issue where a new item was not being added to an array in the script. Despite no exceptions being thrown, the array remained unchanged. I am seeking advice from experts ...

javascriptnode.jsmongodb

The resetFields() function fails to execute

While utilizing Vue3 with Element Plus to create a form, I encountered an issue with the resetFields() method not working as expected. The form is unable to automatically refresh itself. In the child component (Edit.vue): <template> <el-dialo ...

javascriptvue.jsvue-component

Transmit information from JavaScript to the Controller

I can't seem to retrieve the data from my JavaScript in my Controller, even though I can see the value in my Request Header. This issue has me completely stumped... JavaScript $('#Save').click(function (e) { if (document.forms[0].check ...

jqueryajaxasp.net-mvc

Consider creating a distinct document for your "scripts"

Within my package.json configuration file, the "scripts" section contains numerous commands structured as shown below. "scripts" { "script1": "command example", "script2": "command example", "script3": "command example", "script4": "command exampl ...

javascriptnpmpackage.json

Click Function for Modifying the Content of a Popup Window

I'm a beginner in JavaScript and I need help figuring out how to achieve the following task. Essentially, my goal is to have lines of code like this: <a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a> The number w ...

javascripthtmlcsspopup

Arrange components within the form

Just started experimenting with this a few days ago. In my form, there is a text field and a button that I want to align side by side at the center of the form. .row { width: 100%; margin-bottom: 20px; display: flex; flex-wrap: wrap; } .col-6 { ...

javascripthtmlcss

Following a series of Observables in Angular 2+ in a sequential order

Apologies if this question has been answered elsewhere, I attempted to search for it but I'm not exactly sure what I should be looking for. Imagine I have this complex object: userRequest: { id: number, subject: string, ... orderIds: ...

javascriptangulartypescriptrxjsobservable

Styled-components causing issues with conditional rendering

Within my React component, I have multiple properties and I want styles to only apply if a property has a value. I attempted the following code: export const Text = ({text, color, size, fontFamily}) => { const StyledParagraph = styled.p` m ...

javascriptreactjsstyled-components

Upcoming API and backend developments

When working with the NEXT project, API Routes provide the ability to create an API endpoint within a Next.js application. This can be achieved by creating a function in the pages/api directory following this format: // req = HTTP incoming message, res = H ...

javascriptreactjsnext.jsbackend

Leveraging react props with the .map method

Imagine having this render function in one of your components. You've passed a changeTid prop function from the parent element. Parent Component: <RequestsList data={this.state.data} changeTid={this.changeTid} /> Child Component: (Using ES6 ...

javascriptreactjsecmascript-6

The data that has been retrieved is not currently displayed within the Vue table

I'm currently exploring js/vue and I'm attempting to retrieve data from an API. There's a field where the value is used to fetch data from the API based on that keyword. When I check the console log, I can see that the data is being received ...

javascriptarraystypescriptvue.jsdatatable

Struggling to make even the most basic example work with TypeScript and npm modules

After stumbling upon this repository that made using npm modules within a Typescript program look easy, I decided to give it a try by forking it and making some changes. My goal was to add another package to get a better understanding of the process. So, I ...

javascriptnode.jsnpmtypescript

Activate a change or response when the input value in Javascript is altered

Currently, I am working on a small project using JQuery and facing an issue when trying to remove error classes from HTML elements. To handle the removal of the error classes, I am utilizing $('selector').on('input') event to target th ...

javascriptjqueryhtmlevent-handling

Tips for detecting the creation of an iframe before executing any javascript code

Before executing some JavaScript, I am trying to wait for an iframe to be created. I have attempted several methods, but none seem to effectively wait for the iframe. The console error that keeps appearing is Uncaught (in promise) TypeError: Cannot read pr ...

javascriptangularjsgoogle-books-api

Here is a guide on updating HTML table values in Node.js using Socket.IO

I successfully set up socket io communication between my Node.js backend and HTML frontend. After starting the Node.js server, I use the following code to emit the data 'dRealValue' to the client side: socket.emit ('last0', dRealValue) ...

javascripthtmlnode.jssocket.io

Display refined outcomes on the search results page

In my app, the main feature is a search box on the homepage. Users can input their search queries and upon submission, they are redirected to a result page displaying the relevant results along with filtering options. The filtering functionality allows use ...

javascriptreactjsreduxreact-redux

Having trouble retrieving data about my marker through react-leaflet

Hello, I am currently working on accessing information about my marker using React and react-leaflet, which is a library based on Leaflet. I initially tried to utilize useRef, but unfortunately it did not provide the expected results. When attempting to us ...

javascriptreactjsleafletreact-leaflet