Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Internal css not rendering in suneditor #1444

Open
tejasrk08 opened this issue Sep 5, 2024 · 0 comments
Open

Internal css not rendering in suneditor #1444

tejasrk08 opened this issue Sep 5, 2024 · 0 comments

Comments

@tejasrk08
Copy link

I have stored a html in the database and than I m fetching it back to render in the suneditor but whatever the Internal CSS I have given is not coming in the UI not even in the DOM
HTML I m using is

<style>

body {
background-color: linen;
}
.table-section{
position: relative;
border: none;
width: 100%;
margin: 0px;
}
.main-table{
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
color: #333;
border:none
}
#top5device-eliminated{
border-collapse: collapse;
}
.main-table-wrapper{
background-color: #ffffff;
padding: 0px 10px 0 10px;
width: 600px;
padding: 0px;
margin: 0px;
}
.table-list-box{
background-color: #ffffff; border-radius: 3px; border-collapse: collapse;
}
.table-list-title{
height: 38px;
width: 500px;
border-radius: 3px 3px 0px 0px;
background-color: #3f51b5;
}
.table-list-title-text{
margin: 0px;
padding: 8px 10px;
text-align: center;
font-family: SegoeUI-Semibold, sans-serif; font-style: normal;
font-weight: normal;
font-size: 14px;
color: #ffffff !important;
}
.table-list-td{
max-width: 700px;
padding:10px 10px 10px 10px;
}
.para-text{
font-weight:500;font-size:1rem
}
.content-table{
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
color: #333;
}
.text-center{
text-align:center;
}
.p-1{
padding:10px;
}
h1 {
color: maroon;
margin-left: 40px;
}
th, td {
cellpadding:0;
cellspacing:0;
padding: 8px;
border: .5px solid #979797;
font-family: Segoe UI, sans-serif;
}
th,td.header {
font-size: 16px;
background-color: #EBEBEB;
font-weight: 800;
}
td.prntkeytd {
width: 28.7288%;
}
td.prntvaltd {
width: 70.9322%;
}
td{
font-size:14px;
font-weight:400;
}

span, li{
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}
span.keyspan{
color: rgb(0, 0, 0);
font-weight: 600;
}
a{
color:#0078d4;
text-decoration:underline;
}
.url{
font-size: 17px;
font-family: Segoe UI, sans-serif;
}
.center{
text-align: center;
}
.warn{
color: rgb(226, 80, 65);
}
.footer {
margin: 0px;
overflow: visible;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-style: normal;
font-size: 12px;
color: #000000;
}
</style>

DIM light

			<p><span>Dear </span></p>

An access request has been created that requires your review and approval.  Your review should be completed as soon as possible.    


How do I take action? 

  1. Click on the 'My Tasks' link below to go to review your open tasks. 
  2. Approver or Deny the entire request, or you can drill into the details and you can selectively approve individual records 
  3. Submit your response when you have responded to all items in the request.

My Tasks

Request Details:

Requested For test
Corporate ID test
Access Start Date test
Access End Date test est
Justification test

Requested Areas:

Area Name Area Type
test test

Remember! r before $FIELD.duedt

			<div class="p-1">
				<span class="para-text">Regards,<br>Office</span>
			</div>
		</td>
	</tr>
	<tr style="background-color: #F0F0F0;">
		<td>
			<table align="center" width="100%" class="e-rte-table" style="width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; color: #333;">
				<tbody>
					<tr>
						<td style="border:none;">
							<p class="header-text footer" style="padding: 15px 0px; width: 463px; margin:0px auto; font-weight: 600;">
								This email 
							</p>
							<p class="header-text footer" style="margin: 0px;padding: 5px 0px 20px; overflow: visible; text-align: center; font-weight: 300; text-decoration: underline;">
								<a href="" style="display: contents; color:#3f51b5; text-decoration: underline;font-weight:500"> External Privacy Policy</a>
							</p>
						</td>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>
</table>
</div>
</body>

and my suneditor js file is 'use client';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import SunEditor from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css';

const RichTextEditorComponent = (props) => {
const [editorContent, setEditorContent] = useState('');
const [mentionData, setMentionData] = useState([]);
const updatedformData = useSelector(
(state) => state?.formDataReducer?.updateFormData
);
const { getHeaders } = useApiUtils();
const {
label,
required,
onChange,
value,
useForm,
menitonFunction,
name,
readOnly,
} = props;

const handleEditorChange = (content) => {
    console.log('Content changed:', content);
    // const updatedContent = preserveLoopTagCase(content);
    setEditorContent(content);
    onChange(content);
};

const handleInputChange = (e) => {
    console.log('Input event:', e.target.innerHTML); // or e.target.value depending on the content
};


useEffect(() => {
    if (value) {
        setEditorContent(value);
    }
}, [value]);

return (
    <SunEditor
        setContents={editorContent}
        name={name}
        onChange={handleEditorChange}
        // readOnly={readOnly}

        setOptions={{
            height: 200,
            buttonList: [
                [
                    'bold',
                    'underline',
                    'italic',
                    'strike',
                    'subscript',
                    'superscript',
                ],
                ['font', 'fontSize', 'formatBlock'],
                ['paragraphStyle', 'blockquote'],
                ['link', 'image', 'video'],
                ['undo', 'redo', 'removeFormat'],
                [
                    'table',
                    'horizontalRule',
                    'fullScreen',
                    'showBlocks',
                    'codeView',
                ],
            ],
            addTagsWhitelist: 'Loop, style',
            pasteTagsWhitelist: 'table',
        }}
    />
);

};

export default RichTextEditorComponent;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant