This topic is locked

Using Popup to edit textarea fiels with Rich text editor

10/9/2024 10:02:30 AM
PHPRunner Tips and Tricks
G
Grdimitris author

If you need to edit a textarea field with Rich text editor, the field in edit page is not so atractive.

  1. IN Fields -> Properties set Edit as -> Readonly and in View as -> HTML


  2. In Designer -> edit add a button next to field let's name it 'conclusions'


  3. In client before of button write the code
    var richField = pageObj.getControl("conclusions");
    window.richField=richField;
    var content=richField.getValue();
    var popup = Runner.displayPopup( {
    url: 'richField_popup.php?richField=' + content,
    header: 'Edit field',
    width: 850,
    height: 620,
    resize: false,
    afterCreate: function(popup) {
    window.popup = popup;
    },
    });
    return false;


  4. The contents of richField_popup.php file is
    <?php
    include "include/dbcommon.php";
    include "include/dokimi_variables.php";
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Επεξεργασία με την χρήση του TinyMCE </title>
    <script type="text/javascript" src="plugins/tinymce/tinymce.min.js"></script>
    <script>
    tinymce.init({
    selector: 'textarea#onoma', // Match the textarea ID
    language: 'el',
    min_width: 800,
    min_height: 500,
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    });
    </script>
    </head>
    <body>
    <?php
    $onomaValue = $_GET["richField"];
    ?>
    <form id="tinymceForm">
    <textarea id="onoma" name="onoma"><?php echo $onomaValue; ?></textarea>



<button type="button" onclick="saveAndClose()">Save</button>
<button type="button" onclick="window.parent.popup.close()">Cancel</button>
</form>
<script>
function saveAndClose() {
var updatedContent = tinymce.get('onoma').getContent();
window.parent.onoma.setValue(updatedContent) ;
window.parent.popup.close();
}
</script>
</body>
</html>

  1. The tinymce.init({
    selector: 'textarea#onoma', // Match the textarea ID
    language: 'el',
    min_width: 800,
    min_height: 500,
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    });
    is from TinyMCE documentation https://www.tiny.cloud/docs/tinymce/latest/
    Localization is in https://www.tiny.cloud/docs/tinymce/latest/ui-localization/

I hope is helpfull

Admin 10/9/2024

Thank you for sharing!

I think it would be beneficial if you can add a screenshot here that show how it looks in the generated application.

G
Grdimitris author 10/9/2024

Thanks Sergei. I was checking it with simple text. I had an error if content of field is real html code. So the fixed php file is
<?php
include "include/dbcommon.php";
include "include/dokimi_variables.php";
?>
<!DOCTYPE html>
<html>
<head>
<title>Επεξεργασία με την χρήση του TinyMCE </titlehttps://asprunner.com/forums/#>;
<script type="text/javascript" src="plugins/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea#onoma',

language: 'el',
min_width: 800,
min_height: 500,
plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
setup: function(editor) {
editor.on('init', function() {
editor.setContent(window.parent.onoma.getValue());
});
}
});

</script>
</head>
<body>
<form id="tinymceForm">
<textarea id="onoma" name="onoma"><?php echo $onomaValue; ?></textarea>

<button type="button" onclick="saveAndClose()">Save</button>
<button type="button" onclick="window.parent.popup.close()">Cancel</button>
</form>
<script>
function saveAndClose() {
var updatedContent = tinymce.get('onoma').getContent();
window.parent.onoma.setValue(updatedContent) ;
window.parent.popup.close();
}
</script>
</body>
</html>
edit page screenshot

img alt
and after pressing rich Edit button

img alt

G
Grdimitris author 10/9/2024

to add other languages to tinyMCE editor, download from TinyMCE site a languare and add the js file to C:\Program Files\PHPRunner10.91\source\plugins\tinymce\langs