What types of web admin wysiwyg preview functionalities can I find?

One feature of my web admin is a wysiwyg editor that allows users to edit information.

There is also a view-only template. Users can preview the information before making any edits.

Currently, the view template displays the saved field value as one continuous line:

<p><b>Hello</b></p><p>there</p>

What are my options to improve readability for users in "view" mode?

Some possible solutions include:

  • Keep it as is, but this may lead to long lines of text.

  • Avoid encoding issues by replacing </p> or <br> with actual <br> tags to break up the lines.

  • Display the content as HTML, allowing for bold text and other formatting. However, this could cause issues with unclosed tags.

If using any of the above options, consider placing the content in a scrollable div.

(I had trouble tagging this question. Feel free to retag).

htmlcssasp.net-mvc-3ckeditorwysiwyg

Answer №1

When collaborating with editors, it is common practice to eventually showcase the HTML directly on the live site. Therefore, worrying about encoding may not be a major issue since there is already a level of trust established.

In my previous experiences, using editors like ckeditor has proven to be useful in cleaning up content, thereby addressing concerns related to unclosed tags.

Based on your options list, I would recommend going with option 3.

Answer №2

It is crucial to validate encoded data before sending it to the server when working with editors. Always keep request validation enabled and consider using the [AllowHtml] attribute on model properties if required. Another recommended practice is leveraging Microsoft's Anti-xss library, particularly the HTML sanitizer, to prevent malicious scripts and safeguard against cross-site scripting attacks.

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

Discrepancies in the Dimensions of Inline-block Elements in CSS

Check out this snippet of HTML code: <section class="container"> <div class="search"></div> </section> Here are the corresponding CSS rules: *, *:before, *:after { box-sizing: border-box; } body, section, div { margi ...

htmlcss

Positioning of the footer using CSS: A query

What is the best way to position a footer if we know its height? For instance, if the height of the footer is 100px: footer { position:absolute; bottom: 100px; background: red; } If this approach is not recommended, could someone assist m ...

css

Steps for turning off image maps on a slider for mobile users

Hello, I'm currently working on a website that has an image slider with image maps embedded in each image. Everything works perfectly on desktop, but when it comes to mobile versions, things start to get messy. I was wondering if there is any way to d ...

htmlcssimagemobiledictionary

Concealing Columns in the Beta version of Bootstrap 4

Currently utilizing Bootstrap 4.0 Beta for website design, encountering a roadblock with a responsive-utility feature. In previous Bootstrap 3 versions, it was achieved using classes like: hidden-xs, hidden-md, among others. The addition of -up and -down ...

htmltwitter-bootstrapresponsive-design

Varying Heights on Different Pages

I have encountered a styling issue while using md-card in my application. The problem arises when I also include md-autocomplete in the home page, requiring me to modify the angular-material.css for proper display. However, on the product page where I uti ...

htmlcssangularjs

Transmitting solely the updated information from the database

I am working on a table that is populated with data from the server using ajax. The table has columns A, B, C, and D where C and D are editable by the user. After the user makes changes to the data in the table, I need to capture only the lines that have b ...

javascriptjqueryhtmlajaxjson

The background image on my screen seems to be malfunctioning and not displaying properly

I'm facing an issue with setting an image as the background of the banner section on my website. Despite trying various solutions and researching similar problems, I haven't been able to resolve it. Specifically, I am attempting to set the backgr ...

htmlcssshopifyliquidfluid-layout

How can I stop columned-DIVs from wrapping on the webpage?

I am attempting to create floating/stacking boxes on the right side of the page as long as there is available space. I am close to achieving my desired layout, but the DIVs keep getting wrapped over each other, causing the headings to be lost. ...

htmlcssword-wrapcss-multicolumn-layout

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

What is the best way to incorporate tailored validation into reactive forms in Angular?

I'm facing an issue with my form where I'm trying to display a specific error message based on certain conditions. Currently, my form is functioning but it's throwing a type error stating "undefined is not an object". I'm struggling to ...

javascripthtmlangulartypescript

The _rfs.scss width rule in Angular-Bootstrap-NgBootstrap is overriding the column width of the col-rules

The Dilemma I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way. When trying to render the following HTML/TS ...

cssangularsassbootstrap-5ng-bootstrap

What could be causing my right-floating elements to shift more towards the left with each occurrence?

After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...

javascripthtmlcssbootstrap-4positioning

Tips for Concealing a Tracking Pixel

There's a tracking pixel tucked away that seems to be creating a slight white bar peeking out from my footer. Is there a smooth way to conceal that pesky pixel? I'm considering housing it (and my other pixels) in a position: absolute div, as thi ...

htmlcss

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the &#862; entity, like this: t&#862;t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...

htmlcss

What is the method to modify a section of a URL based on form input?

I am currently developing a website that allows users to interact with product images by clicking buttons, entering text into forms, and using a slider to view different angles of the product. My main goal is to extract user input from form fields and dyn ...

phpjqueryhtmlformsslider

HTML code displaying a fixed message at the top of the webpage

I'm working on a web page that has a lot of content. I need to have a message always visible at the bottom of the browser window, even when scrolling. Can anyone help me achieve this using simple CSS, HTML, jQuery, or PHP? Thanks! ...

phpjavascriptjqueryhtmlcss

Issue when trying to populate an ASP.NET textbox control using the HTML5 "date" type

On my asp.net page, I have included an HTML5 TextBox control set to type "date." The code snippet for the control is as follows: <asp:TextBox ID="TextBoxMyDate" runat="server" type="date"/> Interacting with the control on the page works smoothly, a ...

c#asp.nethtml.net-4.0

What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...

jqueryhtmlcssslideshow

What is the best way to connect individual buttons to a dynamic div that displays different content depending on the button clicked?

Hey there! I'm diving into the world of JavaScript and HTML, and I need some guidance on creating a menu that can toggle visibility of specific content in div(s) depending on which button (picture1-12) is clicked. My idea is to have one div that can d ...

javascripthtmlcss

When you utilize the overflow:hidden property in an inline-block list, you may notice some

Referring to this example: http://jsfiddle.net/CZk8L/4/ I'm puzzled by why the CSS style overflow:hidden is creating extra space at the bottom of the first li. Can anyone shed some light on this? This has been bothering me for hours, as I need the p ...

htmlcss-positionspacecss