Select all or Copy button in a box

Get help developing custom BBCodes or request one.
Myng
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Select all or Copy button in a box

Post by 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
Image

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
Last edited by Mick on Fri Sep 22, 2023 12:53 pm, edited 1 time in total.
Reason: Solved.
User avatar
Lumpy Burgertushie
Registered User
Posts: 69228
Joined: Mon May 02, 2005 3:11 am

Re: Select all or Copy button in a box

Post by 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
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Myng
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Re: Select all or Copy button in a box

Post by Myng »

Lumpy Burgertushie wrote: Tue Sep 19, 2023 1:26 pm 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
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26710
Joined: Fri Aug 29, 2008 9:49 am

Re: Select all or Copy button in a box

Post by 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.
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel©
🇬🇧
User avatar
Mixlight - eStriKe
Registered User
Posts: 61
Joined: Fri Aug 10, 2018 8:47 am

Re: Select all or Copy button in a box

Post by Mixlight - eStriKe »

Myng wrote: Tue Sep 19, 2023 3:41 pm
Lumpy Burgertushie wrote: Tue Sep 19, 2023 1:26 pm 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
You do not have the required permissions to view the files attached to this post.
Myng
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Re: Select all or Copy button in a box

Post by 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
User avatar
Mixlight - eStriKe
Registered User
Posts: 61
Joined: Fri Aug 10, 2018 8:47 am

Re: Select all or Copy button in a box

Post by 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
You do not have the required permissions to view the files attached to this post.
Myng
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Re: Select all or Copy button in a box

Post by Myng »

Mixlight - eStriKe wrote: Wed Sep 20, 2023 1:07 pm 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?
User avatar
Mixlight - eStriKe
Registered User
Posts: 61
Joined: Fri Aug 10, 2018 8:47 am

Re: Select all or Copy button in a box

Post by Mixlight - eStriKe »

So You want that bbcode such as bold italic to work on the bbcode i gave You ?
Myng
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Re: Select all or Copy button in a box

Post by Myng »

Mixlight - eStriKe wrote: Wed Sep 20, 2023 1:35 pm 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
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Re: Select all or Copy button in a box

Post by 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?

Image


best regards
User avatar
Sniper_E
Registered User
Posts: 1173
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey

Re: Select all or Copy button in a box

Post by Sniper_E »

I like it so far the way it is eStriKe nice
Image
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
Mixlight - eStriKe
Registered User
Posts: 61
Joined: Fri Aug 10, 2018 8:47 am

Re: Select all or Copy button in a box

Post by Mixlight - eStriKe »

Myng wrote: Wed Sep 20, 2023 8:44 pm 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?

Image


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
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Re: Select all or Copy button in a box

Post by Myng »

Mixlight - eStriKe wrote: Fri Sep 22, 2023 9:07 am
Myng wrote: Wed Sep 20, 2023 8:44 pm 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?

Image


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.

Image

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;
}
User avatar
Mixlight - eStriKe
Registered User
Posts: 61
Joined: Fri Aug 10, 2018 8:47 am

Re: Select all or Copy button in a box

Post by 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
You do not have the required permissions to view the files attached to this post.

Return to “Custom BBCode Development and Requests”