Select all or Copy button in a box

[Myng]

Hello

I am looking for a solution to my problem. I need a box that can handle Select All or Copy. It doesn't matter if it is deleted by a button or by clicking with the mouse on the text.

Here a picture. As you can see the code box can not format. the quote box can. I just need a box that can format and at the same time use the Select All funct


Just as with [.code][./code] - only that takes just no formatting.

as you can see at the bottom, i have managed to create a box with [.box][./box] (bbcode) but i still need a solution on how i can mark the exact content with one click or copy it with one click. one of the two would be good.

Best Regards

[Lumpy Burgertushie]

you don't need an extension. just right click in the text box and choose select all then right click and choose delete

[Myng]

you don't need an extension. just right click in the text box and choose select all then right click and choose delete

hello,

Thank you for your reply. Unfortunately, I don't quite understand what you mean.

Right-clicking in the box has the same effect as clicking outside the box - I can neither copy nor select anything with it.

By the way, selecting everything is not shown to me at all. In another browser I have the option but then not only the box is selected but the whole page.

What do you mean by delete?

best regards

[Mick]

He probably meant copy.

If you’re talking about a BBCode you should be posting in Custom BBCode Development and Requests.

There should be no difference for select, copy, paste etc. as you’re used to on your desktop machine or phone and tablet.

[Mixlight - eStriKe]

you don't need an extension. just right click in the text box and choose select all then right click and choose delete

hello,

Thank you for your reply. Unfortunately, I don't quite understand what you mean.

Right-clicking in the box has the same effect as clicking outside the box - I can neither copy nor select anything with it.

By the way, selecting everything is not shown to me at all. In another browser I have the option but then not only the box is selected but the whole page.

What do you mean by delete?

best regards

Hi see if this BBcode is what you need :

BBcode usage : [php]{TEXT}[/php]

HTML Replacement

Code: Select all

<style>/* CSS for the code container */
.code-container {
    position: relative;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    padding: 10px;
    margin-bottom: 10px;
}

/* CSS for the copy button */
.copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}
</style>
<div class="code-container">
    <pre>
        <code>{TEXT}</code>
    </pre>
    <button class="copy-button" onclick="copyToClipboard(this)">Copy this code</button>
</div>
<script>
    function copyToClipboard(button) {
        const codeElement = button.parentElement.querySelector('code');
        const codeText = codeElement.innerText;
        const textarea = document.createElement('textarea');
        textarea.value = codeText;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        button.innerText = 'Code Copied!';
        setTimeout(() => {
            button.innerText = 'Copy this code';
        }, 1500);
    }
</script>

how it looks like :

bbcode php.PNG

[Myng]

Wow, thanks for that first of all. What I see in your picture is exactly what I'm looking for. So it's the right approach.

Now I have enthusiastically used the code as BBcode. unfortunately, it is not converted in this way for me. it just says [php]test[/php] instead of the box with the copy button.

do you know what the problem is?

Oh, and is formatting such as bold and italics possible with this approach?

Many thanks and best regards

[Mixlight - eStriKe]

Ok , let's try this way then .

BBcode usage :

Code: Select all

[php]{TEXT}[/php]

HTML replacement :

Code: Select all

<div class="code-container">
    <div class="code-header">
        <span class="code-title">Code:</span>
        <button class="copy-button" onclick="copyToClipboard(this)">Copy this code</button>
    </div>
    <pre><code>{TEXT}</code></pre>
</div>
<script>
    function copyToClipboard(button) {
        const codeElement = button.parentElement.parentElement.querySelector('code');
        const codeText = codeElement.innerText;

        const textarea = document.createElement('textarea');
        textarea.value = codeText;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);

        button.innerText = 'Code Copied!';
        setTimeout(() => {
            button.innerText = 'Copy this code';
        }, 1500);
    }
</script>

Now to make it look nice go to /public_html/forum/styles/your-style/theme/stylesheet.css and add at the bottom of the document this :

Code: Select all

/* CSS for the code container */
.code-container {
    position: relative;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

/* CSS for the code container */
.code-container {
    position: relative;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    white-space: pre-wrap; /* Preserve line breaks */
}

/* CSS for the code container */
.code-container {
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

/* CSS for the code header */
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* CSS for the "Code:" label */
.code-title {
    font-weight: bold;
    margin-right: 10px;
}

/* CSS for the copy button */
.copy-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

/* Style for code within the code container */
.code-container pre {
    margin: 0;
    white-space: pre-wrap; /* Preserve line breaks */
}

/* Optional: Line numbers style (if you want line numbers) */
.linenums {
    border-right: 1px solid #ccc;
    padding-right: 10px;
    text-align: right;
    color: #777;
}

This is how it should look like and now it should work properly as well :

phpv2.PNG

[Myng]

Ok , let's try this way then .

BBcode usage :

Code: Select all

[php]{TEXT}[/php]

Now to make it look nice go to /public_html/forum/styles/your-style/theme/stylesheet.css and add at the bottom of the document this :

This is how it should look like and now it should work properly as well :
phpv2.PNG

Thank you again. Yes, it works now.
Your quick help is really great.
BUT: it was important to me that formatting such as italics, links, bold, strikethrough etc. worked. unfortunately, this is not the case. in my case, the code box now says [.b]this is a test[./b] - is there a solution for this?

[Mixlight - eStriKe]

So You want that bbcode such as bold italic to work on the bbcode i gave You ?

[Myng]

So You want that bbcode such as [b][/b] [i] to work on the bbcode i gave You ?

The current implementation of the BBcode corresponds to my ideas. A box with a copy button that copies the contents of the box is exactly what I was looking for. Your quick help is really great, I appreciate it a lot.

However, it is also important that the box supports formatting, such as bold text, italic text, etc. Unfortunately, the current codebox doesn't seem to support these formattings. Therefore, I am looking for a solution to achieve the same with a normal box and a copy button. Is there a way to implement these functions in a normal box?

[Myng]

In the meantime, I was able to get the box to allow formatting. (see screenshot). The button also copies the text from the box. However, it copies the text without the formatting. If I copy the text manually, the formatting is also copied. is there a solution for this? If it is not possible, is it possible to turn the copy button into a select all button?




best regards

[Sniper_E]

I like it so far the way it is eStriKe nice

[Mixlight - eStriKe]

In the meantime, I was able to get the box to allow formatting. (see screenshot). The button also copies the text from the box. However, it copies the text without the formatting. If I copy the text manually, the formatting is also copied. is there a solution for this? If it is not possible, is it possible to turn the copy button into a select all button?




best regards

share the code with us that allows you such a thing and i will see if i can make it to copy it with the formatting.
But be aware that ion order to copy it in the input box it will still display

Code: Select all

[b]text[/b]

only after the post was made the bbcode such as bold will apply

[Myng]

In the meantime, I was able to get the box to allow formatting. (see screenshot). The button also copies the text from the box. However, it copies the text without the formatting. If I copy the text manually, the formatting is also copied. is there a solution for this? If it is not possible, is it possible to turn the copy button into a select all button?




best regards

share the code with us that allows you such a thing and i will see if i can make it to copy it with the formatting.
But be aware that ion order to copy it in the input box it will still display

Code: Select all

[b]text[/b]

only after the post was made the bbcode such as bold will apply

Hello, thank you very much for your answer.

I have read up a bit and have understood that my project is not quite so easy to realise. I have now made a Select all button instead of a Copy button. The whole thing works wonderfully. But I have the following problem: lists created with [.list][./list] in this box are no longer displayed as lists. it now only shows me the tags. What could be the reason for this and what can I do?

all other formatting works without problems. just not the list.

Without the box, however, the list works without problems.



HTML Replacement

Code: Select all

<div style="padding: 10px; border: 1px solid #000000; background-color: #131a24; margin: 10px 0; margin-left: 30px; margin-right: 30px;">
    <div class="box-container">
        <div class="box-header">
            <button class="select-button" onclick="selectBoxText(this)">Alles auswählen</button>
        </div>
        <box id="box">{TEXT}</box>
    </div>
</div>
<script>
    function selectBoxText(button) {
        const boxElement = button.parentElement.parentElement.querySelector('box');
        const range = document.createRange();
        range.selectNodeContents(boxElement);

        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
</script>

/public_html/forum/styles/your-style/theme/stylesheet.css

Code: Select all

/* CSS for the box header */
.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* CSS for the select button */
.select-button {
    padding: 5px 10px;
    background-color: #2b5b84;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.select-button:hover {
        background-color: #4889c5;
        color: white; 
        transition: background-color 0.3s ease; 
}

/* Optional: Line numbers style (if you want line numbers) */
.linenums {
    border-right: 1px solid #ccc;
    padding-right: 10px;
    text-align: right;
    color: #777;
}

[Mixlight - eStriKe]

ok , try this :

Code: Select all

<div style="padding: 10px; border: 1px solid #000000; background-color: #131a24; margin: 10px 0; margin-left: 30px; margin-right: 30px;">
    <div class="box-container">
        <div class="code-header">
            <button class="select-button" onclick="selectBoxText(this)">Alles auswählen</button>
        </div>
        <box id="box">{TEXT}</box>
    </div>
</div>
<script>
    // Call the conversion function and selectBoxText when the page loads
    window.onload = function() {
        convertListTagsToUL();
        selectBoxText(document.querySelector('.select-button'));
    }

    function selectBoxText(button) {
        const boxElement = button.parentElement.parentElement.querySelector('box');
        const range = document.createRange();
        range.selectNodeContents(boxElement);

        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }

    function convertListTagsToUL() {
        const boxElement = document.querySelector('box');
        if (boxElement) {
            const text = boxElement.innerHTML;
            const htmlWithLists = text.replace(/\[list\]([\s\S]*?)\[\/list\]/g, '<ul>$1</ul>');
            boxElement.innerHTML = htmlWithLists;
        }
    }
</script>

result :

test uuu.PNG