How can I personalize the preview feature in a Bootstrap rich text editor?

Currently, I am utilizing Bootstrap's rich text editor by this method $('#editor').wysiwyg();. Utilizing AJAX, I am passing the HTML content created by .wysiwyg to save it in the database. Later on, I plan to retrieve the saved HTML data to display on my homepage. However, I am facing an obstacle where I wish to display a preview of the text and images inserted before revealing the full html content once the user clicks "see more". The preview should include:

https://i.sstatic.net/UcFd1.png

Upon clicking "see more", the complete html data generated by wysiwig will be shown. Essentially, the preview section should only comprise plain text without any formatting, complemented by the attached images.

My current workaround involves directly accessing the html produced by Bootstrap and extracting the value from the textbox. Is there a more efficient approach?

jquerycsshtmlbootstrap-4rich-text-editor

Answer №1

As I see it

One approach is to add a separate brief description feature in your admin panel for news or articles. In this brief description, you can input only the part you want to display as the short description, while the full content can be added in a separate section. This way, when you need to show a summary of the news/article, you can utilize the brief description and provide a link to access the full content.

Another solution involves utilizing server-side programming to extract approximately 500 words and an image from the content. This extracted information can then be displayed with a link that leads to a new page containing the complete article, connected through an anchor tag labeled Read More.

Hopefully, these suggestions provide some insight and help you achieve your goal.

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

the modal body is taking longer than expected to load with ajax

I have a unique modal that I'm filling with dynamic data through an Ajax GET request upon modal load. Interestingly, the data is not fetched or added to the modal body unless I trigger an alert first. The structure of my modal is as follows: <div ...

javascriptjqueryajaxtwitter-bootstrap

Changing the Direction of News Ticker Movement from Right to Left

I need to switch the news ticker movement direction from right to left to left to right because I will be using Arabic language, so it is crucial to change the movement direction. Despite trying for several days, I have been unable to find a solution. HTM ...

javascripthtmlcssright-to-left

utilizing web functionalities alongside master page layouts

I have a universal function implemented across all pages of my website, residing in the master page. I am aiming to trigger this function through a jQuery Ajax method. Currently, my code looks something like this: jQuery $(document).ready(function() { ...

jqueryasp.netajaxwebmethod

Challenges in understanding jQuery logic

Check out the Fiddle here I'm looking to duplicate an HTML structure, change the class of one element, and then paste it. Initially, the class is div-1 (Line 12 in the HTML window), and with each new append, it should increase by one number, for exa ...

jquery

Adapting software for use with Panasonic Viera

We are in the process of transferring our current HTML/JavaScript/CSS application to the Panasonic platform. Our current setup involves using JavaScript for generating HTML and CSS for styling the application. The programming language used in the Panasoni ...

javascripthtmltelevision

What is the best way to define file paths in a webpage to ensure that the same file works seamlessly on both server and

Currently, I am working on developing a website locally with the intention of later transferring it via FTP to my server. In my index.php file, there is a line that reads: <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/header.php");?&g ...

javascriptphphtmlcss

Combine the PHP table with the Javascript table

I am facing a challenge where I have a table in PHP and another table in Javascript. My goal is to combine the elements of the PHP table with the elements of the Javascript table. I attempted to achieve this using the push method: <?php $tabPHP=[&apos ...

javascriptphpjqueryarrays

Change background according to URL query

My goal is to dynamically change background images based on a URL parameter, specifically the destination code. With numerous background images available, it's crucial to display the correct one depending on the URL string. For instance, if the URL re ...

javascriptjquerycssimage

Looking to screen usernames that allow for the use of the DOT (.), underscore (_), and Dash (-)?

I am using jQuery to filter usernames that are exactly 3 characters long. The validation criteria includes only allowing the following special characters: ., _, and - var filter = /^[a-zA-Z0-9]+$/; Therefore: if (filter.test(currentval)) { //valid ...

javascriptjqueryhtml

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

When printing documents in Chrome browser, the table header (thead) does not appear on every page. I want to ensure that the table header is displayed on each printed page, just like it is done with IE and Firefox. However, Chrome does not support this fea ...

javascriptjqueryhtmlcssgoogle-chrome

What is the best way to customize the label of Material UI's Tab component?

Is there a way to customize the text color inside the Tab component while still allowing it to change color when selected as an active Tab? For example: <Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorCol ...

cssreactjsmaterial-ui

jQuery Ensures Stylesheet is Always Loaded from Cache

Our web application utilizes Kendo UI and offers users the ability to switch between themes. To accommodate this functionality, we have implemented custom CSS stylesheets for each distinct Kendo theme. The challenge arises when updating these custom style ...

jquerykendo-ui

Can jQuery Autocomplete function without stopping at white spaces?

Is there a way to modify jQuery UI autocomplete so that it can handle multiple words instead of terminating with a space? For example, if you input "New York City", it should still filter results based on each word. $.ajax({ type: "GET" ...

javascriptjqueryjquery-uiautocompletewhitespace

What is the best way to modify CSS and HTML with a post request?

I'm currently in the process of working on a webpage with multiple sections. One section includes a form that sends a POST request. Once this form is successfully submitted, I want to update the CSS style of another element to make it visible. Given ...

cssnode.jsexpresspost

PHP is unable to receive data from ajax requests

My goal is to detect which reply button I click and send its index to a PHP script. In jQuery: $(".reply").each(function (index5) { $(".reply_button").each(function (index_b) { if(index_b==index5){ $(this).on("click",functio ...

phpjqueryajax

Tips on Extracting Data from a JSON Object with an Embedded Array

Check out this example of a Json Object: {"UserName":Mike,"IsActive":0,"ChbxIsActive":false,"MyAccountsAvailable":[{"Id":"157A","MyAccount":"CHRIS MCEL","MyCheckBox":false,"Tags":null},{"Id":"157B","MyAccount":"DAN BONE","MyCheckBox":false,"Tags":null} He ...

javascriptjqueryjson

When the Add button in AngularJS is clicked, a new popup page should appear by concealing the parent page

I am currently working on a project that involves using the AngularJS/Breeze framework within the HotTowel Template. One of the requirements I have is to include a button/link labeled "Add" on the parent.html page. When this button is clicked, it should t ...

javascriptjqueryhtmlangularjs

Error 500: Internal Server Issue Detected during AJAX Request in Laravel

I am having issues with fetching dependent select items using an ajax call. I want to display related 'groups' after selecting a 'class', but I keep getting a 500 internal server error in my console. Can someone please assist me in achi ...

phpjqueryajaxlaravellaravel-routing

Using jQuery for communication between a parent and a popup tab

There have been numerous discussions on the topic of communication between a popup and its parent using window.opener.$('#myDiv'). However, once a popup is launched, how can the parent target and manipulate a specific div within the popup? ...

javascriptjquery

Custom jQuery dialog: Different close button

Is there a way to specify a different close button for jQuery dialog? I am looking to use an anchor with the class "popup-close" to shut down the current dialog. Simplicity is key! ...

jqueryjquery-uijquery-plugins