How to add a picture in the Texteditor (Inputfield)

[Draffi]

Hi!

I want to ask, if somebody have an idea or code snippet, for how to show a picture inside the texteditor (i mean not inside the BBC-Button, i mean the main input area, where are you typing the text...)

Thank you!

[emanuele]

As background of the textarea?

[Draffi]

Exactly. A background for the Textarea-Inputwindow.

(I want to make a PNG-Picture, with 50% Transparency, no background, only some words:
1. Respect the members
2. Respect the rules
3. We all are human
4. ...
)

Saw this in another SMF-Forum. When you click inside the Texteditor, the Picture is gone and you see the cursor and you can start to write a posting...

[margarett]

According to my firebug, the text area is this:

Code Select Expand


<textarea id="message" class="editor" style="height: 175px;" tabindex="2" onchange="storeCaret(this);" onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" cols="600" rows="12" name="message"></textarea>
So I see a "editor" class, that comes from editor.css.
It should be possible to do so using some new rules to make a semi-transparent background:
http://www.w3schools.com/css/css_image_transparency.asp
http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity

[Arantor]

There are two different ways the editor can be used, one in regular mode and one in WYSIWYG - and the WYSIWYG mode is quite a bit different in terms of handling (it doesn't use a textarea at all, but an iframe with contenteditable... and it's different again in 2.1)

I really don't know if there will be a problem trying to use this in WYSIWYG mode thinking about it.

[margarett]

@Arantor: It's not just you that hates WYSIWYG

[emanuele]

The new (2.1) editor should be easy to customize with css, I remember the old editor (2.0) is able to grab some styles from the "normal" editor, though I don't remember exactly which.

[Draffi]

Thank you for your replies.

It should looks like this (see Attachment)

(taken from www.biology-forums.com)

[margarett]

Now I missed what you mean, sorry.

That's a forums index, there is no text area there.
Did you look at my reply? Can you try those tips or do you need further help?

[IchBin™]

Code Select Expand

.editor, .rich_editor {
    background-image('path/to/image.png');
}

[Antechinus]

What he said. Although you would also want to add this to make the image vanish on focus:

Code Select Expand

.editor:focus, .rich_editor:focus {
    background-image: none;
}

[Arantor]

Does that work with the rich editor too? Didn't think it'd work properly with the contenteditable iframe. (But that's why I leave the CSS to people who know it better than I do )

[Antechinus]

Dunno. Haven't tried it. I assumed IchBin had the basics right.

Anyway, if it doesn't work it'll be an easy fix. It's just a matter of basic targeting.

[Tomy Tran]

Very good idea.

[Draffi]

Code Select Expand

.editor, .rich_editor {
    background-image('path/to/image.png');
}

was putting my pic into the directory called "style", but not working.

Code Select Expand

.editor, .rich_editor {
   background-image: url(../images/style/editor.png);
}

Any suggestions more, please?

[Antechinus]

What was the exact code you were using?

[Draffi]

i put in the index.css the following

Code Select Expand

.editor, .rich_editor {
   background-image: url(../images/style/editor.png);
}

[IchBin™]

The code I posted should work for the non-wysiwyg mode. Clicking to toggle into the wysiwyg mode requires altering the javascript though. Looks like for the rich editor you have to add it to the editor.js file to add it into the iframe.

Search for:
               

Code Select Expand

// Set the frame padding/margin inside the editor.
                this.oFrameDocument.body.style.padding = '1px';
                this.oFrameDocument.body.style.margin = '0';

Add this line after:

Code Select Expand

                this.oFrameDocument.body.style.background = 'url(' + smf_images_url + '/editor.png)';

[Draffi]

Thank you!

The picture is showing up.

But it is repeating (in my case three times) and furthermore it would be better, if the picture disappear, when you start to enter text (click inside).

Do you think it is possible?

[margarett]

Did you try this?

What he said. Although you would also want to add this to make the image vanish on focus:

Code Select Expand

.editor:focus, .rich_editor:focus {
    background-image: none;
}