|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Éditer l'Article</title> |
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css"> |
|
|
<script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script> |
|
|
<style> |
|
|
body { font-family: Arial, sans-serif; margin: 20px; } |
|
|
form { max-width: 800px; } |
|
|
label { display: block; margin-top: 10px; } |
|
|
input, button { width: 100%; padding: 10px; margin-top: 5px; } |
|
|
trix-editor { border: 1px solid #ccc; min-height: 300px; } |
|
|
</style> |
|
|
<script> |
|
|
document.addEventListener("trix-before-initialize", () => { |
|
|
// Allow more tags in sanitization |
|
|
Trix.config.dompurify.ADD_TAGS = ["iframe", "video", "source", "table", "tr", "td", "th"]; |
|
|
Trix.config.dompurify.ADD_ATTR = ["src", "controls", "width", "height"]; |
|
|
|
|
|
// Custom toolbar with all options |
|
|
Trix.config.toolbar.getDefaultHTML = () => ` |
|
|
<div class="trix-button-row"> |
|
|
<span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools"> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" tabindex="-1" title="Bold">Bold</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" tabindex="-1" title="Italic">Italic</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" tabindex="-1" title="Strikethrough">Strikethrough</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" tabindex="-1" title="Link">Link</button> |
|
|
</span> |
|
|
<span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools"> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading1" tabindex="-1" title="Heading">Heading</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" tabindex="-1" title="Quote">Quote</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" tabindex="-1" title="Code">Code</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" tabindex="-1" title="Bullets">Bullets</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" tabindex="-1" title="Numbers">Numbers</button> |
|
|
</span> |
|
|
<span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools"> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" tabindex="-1" title="Attach Files">Attach Files</button> |
|
|
</span> |
|
|
<span class="trix-button-group trix-button-group--image-tools" data-trix-button-group="image-tools"> |
|
|
<button type="button" class="trix-button" data-trix-action="x-align-left" tabindex="-1" title="Align Left">Align Left</button> |
|
|
<button type="button" class="trix-button" data-trix-action="x-align-right" tabindex="-1" title="Align Right">Align Right</button> |
|
|
</span> |
|
|
<span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools"> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" tabindex="-1" title="Undo">Undo</button> |
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" tabindex="-1" title="Redo">Redo</button> |
|
|
</span> |
|
|
</div> |
|
|
<div class="trix-dialogs" data-trix-dialogs> |
|
|
<div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href"> |
|
|
<div class="trix-dialog__link-fields"> |
|
|
<input type="url" name="href" class="trix-input trix-input--dialog" placeholder="Enter a URL..." aria-label="URL" required data-trix-input> |
|
|
<div class="trix-button-group"> |
|
|
<input type="button" class="trix-button trix-button--dialog" value="Link" data-trix-method="setAttribute"> |
|
|
<input type="button" class="trix-button trix-button--dialog" value="Unlink" data-trix-method="removeAttribute"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Éditer l'Article</h1> |
|
|
<a href="{{ url_for('admin_articles') }}">Retour aux articles</a> |
|
|
<form method="post" enctype="multipart/form-data"> |
|
|
<label for="title">Titre:</label> |
|
|
<input type="text" id="title" name="title" value="{{ article.title }}" required> |
|
|
|
|
|
{% if article.icon_data %} |
|
|
<p>Image actuelle: <img src="{{ url_for('get_article_image', article_id=article.id) }}" style="max-width: 100px; max-height: 100px;"></p> |
|
|
{% endif %} |
|
|
|
|
|
<label for="icon">Nouvelle image (fichier image):</label> |
|
|
<input type="file" id="icon" name="icon" accept="image/*"> |
|
|
|
|
|
<label for="content">Contenu:</label> |
|
|
<input id="content" type="hidden" name="content" value="{{ article.content }}"> |
|
|
<trix-editor input="content"></trix-editor> |
|
|
|
|
|
<button type="submit">Sauvegarder</button> |
|
|
</form> |
|
|
<script> |
|
|
document.addEventListener("trix-attachment-add", function(event) { |
|
|
var file = event.attachment.file; |
|
|
if (file) { |
|
|
var formData = new FormData(); |
|
|
formData.append("file", file); |
|
|
fetch("/upload", { |
|
|
method: "POST", |
|
|
body: formData |
|
|
}).then(response => response.json()).then(data => { |
|
|
event.attachment.setAttributes({url: data.url}); |
|
|
}).catch(error => { |
|
|
console.error("Upload failed:", error); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener("trix-action-invoke", function(event) { |
|
|
const { actionName, target } = event; |
|
|
if (actionName === "x-align-left" || actionName === "x-align-right") { |
|
|
const editor = target.editor; |
|
|
const selectedRange = editor.getSelectedRange(); |
|
|
const document = editor.getDocument(); |
|
|
const attachments = document.getAttachments(); |
|
|
attachments.forEach(attachment => { |
|
|
const range = attachment.getRange(); |
|
|
if (selectedRange[0] <= range[0] && range[1] <= selectedRange[1]) { |
|
|
attachment.setAttribute("class", actionName === "x-align-left" ? "float-left" : "float-right"); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
