add a button in the non-wysiwyg editor

[lordcoffee]

Hi Carl!

That's a nice idea! First I have get this javascript-Things to work and then I'll do that tutorial. But I think it would be better when I write in german and some multilingual guy could translate it. My englisch is not good enough to prevent from mistakes.

Greetings, Lordcoffee

[carl_galloway]

If you send me your tutorial, I'll make up an English language version, then send it back to you so you can post it on your site or on the wiki.

I'm going to index my own tutorals soon and put them into a static page on my site. Once that's done, I'll also be indexing tutorials from other sites with links to the original article.

[lordcoffee]

Hi again!

I startet to edit the the php-file and made a javascriptfile.

the php file changes:

Code: Select all

?> 
				<input type='button' class='serendipityPrettyButton' value='Flash' onclick='wrapSelectionWithFlash(document.forms[\'serendipityEntry\']['<?php echo $txtarea ?>'])'>
<?php

and the javascript file is:

Code: Select all

function wrapSelectionWithFlash(txtarea) {
    var flashbutton = prompt("Enter Filename:","");

    if (flashbutton != null) {
        flash = "<object type=\'application/x-shockwave-flash\' data=\'movies/flvplayer.swf?file=\"" + flashbutton + "\"".flv&clicktext=Klicken zum abspielen!&image=movies/"" + flashbutton + "\"".jpg\' width=\'320\' height=\'240\'><param name=\'movie\' value=\'movies/flvplayer.swf?file="" + flashbutton + "\"".flv&clicktext=Klicken zum abspielen!&image=movies/"" + flashbutton + "\"".jpg\'><param name=\'wmode\' value=\'transparent\'></' + 'object>";
        }
        wrapSelection(txtarea, flash,);
    }

    return;
}

How can I "link" the code in the php file to javascript function?

Thanks Lordcoffee

[judebert]

You've got to include the JavaScript in the backend, where the editor can call it. I checked serendipity_event_fckeditor, and it uses the backend_wysiwyg hook to do the job. The _emoticonchooser plugin (which I consider much closer to what you want, since it deals with toolbar buttons) uses backend_entry_toolbar_body instead.

Without using a plugin, you'd have to modify the code.

[lordcoffee]

Hi Judebert, thanks for reply but I already inserted the code in a plugin. I used the event_typesetbuttons plugin and I already have "the button" in my backend but I want the button showing a window where you can insert the filename and this window takes this infor,ation back to the text editor wrapped with the code.

Lordcoffee

[judebert]

Ah. Then you're probably looking for a JavaScript prompt().

[lordcoffee]

Hi Judebert!

As you can see above I already found the "prompt()". What I want to know is how can I send the result of the function back to the textarea of s9y so that my code is inside the textfield?

Thanks, Lordcoffee

[lordcoffee]

O.K. I tried it another way maybe someone can help me:

I inserted this code in my "plugin":

Code: Select all

<form name=myform>
<input type=button class="serendipityPrettyButton" value="Flash" 
onClick="flashbutton=prompt('Enter the filename','Filename');
alert('Hello '+flashbutton+'!')";>
</form>

This is the result in the texteditor:



Works fine... When I push the button called flash, it prompts for the "Filename". When I insert e.g. "Steve" in the prompt() window and push enter the result is an alert-window with: "Hello Steve". Fine. But now I don't want to have the result in an alert window. I want to have the result been inserted in the texteditors textarea. What should I do?

Thanks, Lordcoffee.

[judebert]

Couldn't you get the contents of the textarea and add to them instead of calling alert()?

Yes -- I copied this code from viewing the source of the entry page:

Code: Select all

function use_emoticon_body(img) {
    txtarea = document.getElementById('serendipity[body]');
    if (txtarea.createTextRange && txtarea.caretPos) {
        caretPos = txtarea.caretPos;
        caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + ' ' + img + ' ' : caretPos.text + ' ' + img + ' ';
    } else {
        txtarea.value  += ' ' + img + ' ';
    }

    // alert(obj);
    txtarea.focus();

You can see where they were using an alert, too, and changed it around. If your dialog puts the "Steve" into a variable called "v", then I think this'll do ya:

Code: Select all

    txtarea = document.getElementById('serendipity[body]');
    if (txtarea.createTextRange && txtarea.caretPos) {
        caretPos = txtarea.caretPos;
        caretPos.text = caretPos.text + '<object type=\'application/x-shockwave-flash\' blah blah  ' + v + '></object> ';
    } else {
        txtarea.value  += '<object type=\'application/x-shockwave-flash\' blah blah  ' + v + ' ></object>';
    }

    txtarea.focus();

Of course, you know to substitute your own wrapper stuff for the <object> pieces.