I have a website for a journalist that needs to embed tweets in his texts, I am currently using this code to paste the twitter blockquote in the text but it does not seems to work, I guess its something related to quill removing the class=”twitter-tweet” when displaying it on the editor, (I already enabled access to Twitter requests in the cookies and using dangerously paste HTML should not be a problem i guess, since the only user is the owner of the website). Any help would be of great value 🙂
the relevant part of my script:
<script>
document.cookie = "cookieName=cookieValue; SameSite=None; Secure";
let delta;
var quill = new Quill('#editor', {
theme: 'snow',
sanitize: false,
modules: {
toolbar: [
['bold', 'italic', 'underline', 'image', 'video'],
[{ size: ['small', false, 'large', 'huge'] }]
]
},
attributes: {
blockquote: ''
},
formats: {
image: 'image-size-limited' // Apply custom CSS class to images
}
});
const twitterHtml = document.getElementById('twitterHtml');
const addTweetButton = document.getElementById('addTweetButton');
addTweetButton.addEventListener('click', function (event) {
event.preventDefault();
const tweet = twitterHtml.value;
// Extract the non-script portion of the tweet HTML
const tweetWithoutScripts = tweet.replace(/<script.*?>[sS]*?</script>/g, '');
// Append the non-script portion to the Quill editor
quill.clipboard.dangerouslyPasteHTML(tweetWithoutScripts);
// Add the Twitter widget script to your document
const twitterScript = document.createElement('script');
twitterScript.src = 'https://platform.twitter.com/widgets.js';
twitterScript.charset = 'utf-8';
twitterScript.async = true;
// Handle script onload or other event if needed
twitterScript.onload = function () {
// The Twitter script has loaded, you can perform additional actions if required
};
// Append the Twitter script to the document
document.body.appendChild(twitterScript);
twitterHtml.value = '';
});
what shows up in the editor
what shows up in the inspector
