evertsemeijn

Topic: Finally! Replace Textile with TinyMCE

After a very very long time I finally managed to get TinyMCE to work and remove Textile (because I really hated it)! I have seen it a lot on the forum so here it is: a TinyMCE tutorial for a basic and 'save' texteditor!

Before starting please read post 4

Step 1: open _templates/footer.tpl and replace

Code:
</body></html>

with

Code:
{literal}
    <script type="text/javascript" src="{/literal}{$BASE_URL}{literal}js/tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
        tinyMCE.init({
            mode : "textareas",
            editor_selector : "mceEditor",
            theme: "advanced",
            plugins: "advhr,advimage,table,emotions,media,insertdatetime,directionality",
            theme_advanced_toolbar_align: "left",
            theme_advanced_toolbar_location: "top",
            theme_advanced_buttons1: "bold,italic,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,fontsizeselect,separator,bullist,numlist,separator,link,unlink,separator,undo,redo",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            height: "500px",
            width: "420px"
        });
    </script>
    {/literal}
</body>

Step 2: open _includes/function.escape.php and replace

Code:
$GLOBALS[$variable] = $db->real_escape_string(strip_tags($value));

with

Code:
$GLOBALS[$variable] = $db->real_escape_string(strip_tags($value,'<a><strong><em><ul><p><li><ol><span>'));

Step3: open _templates/publish-write.tpl and replace

Code:
id="description"

with

Code:
id="description" class="mceEditor"

And the final step: open page_verify.php and replace

Code:
$jobs['description'] = str_replace(array("\r\n", "\r", "\n"), "<br />", $jobs['description']);

with

Code:
$jobs['description'] = str_replace(array("\r\n", "\r", "\n"), "", $jobs['description']);

Might not be the best solution, but maybe someone can find the courage to clean it up (or tell me that this is a fine method cool)

Let me know if you run into problems!

Last edited by evertsemeijn (2009-02-19 16:23:41)

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

Tokyoj

Re: Finally! Replace Textile with TinyMCE

Thanks. I agree TinyMCE is better.

A little while ago I posted a tutorial on how to edit the button options in TinyMCE.
http://www.jobberbase.com/forum/topic51 … ditor.html

For plugins, skins, and other customizations....
http://tinymce.moxiecode.com/

Hope it helps.

---------------
Tokyoj
"You can't build a reputation on what you're going to do." (Henry Ford)
"Insanity is doing the same thing over and over, expecting different results." (Albert Einstein)

evertsemeijn

Re: Finally! Replace Textile with TinyMCE

Thanks for your link to change the functions of TinyMCE. I didn't want to go that far. Just wanted to cover the implementation so that there is still something to edit yourself wink

Tip: activate the paste plugin and add the paste from plain text and paste from word to the bar!

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

evertsemeijn

Re: Finally! Replace Textile with TinyMCE

Found out that TinyMCE is also in the admin section. So to save on webspace you can do two things:

[1] replace

Code:
<script type="text/javascript" src="{/literal}{$BASE_URL}{literal}js/tiny_mce/tiny_mce.js"></script>

with

Code:
<script type="text/javascript" src="{/literal}{$BASE_URL_ADMIN}{literal}js/tiny_mce/tiny_mce.js"></script>

or [2] open admin/_templates/header.tpl and replace

Code:
{if $editor}
    <script src="{$BASE_URL_ADMIN}js/tiny_mce/tiny_mce.js" type="text/javascript"></script>
{/if}

with

Code:
{if $editor}
    <script src="{$BASE_URL}js/tiny_mce/tiny_mce.js" type="text/javascript"></script>
{/if}

*EDIT*
and in page_job.php replace

Code:
else
        {
            //$info['description'] = nl2br($info['description']);
            $info['description'] = str_replace(array("\r\n", "\r", "\n"), "<br />", $info['description']);
        }

with

Code:
else
        {
            //$info['description'] = nl2br($info['description']);
            $info['description'] = str_replace(array("\r\n", "\r", "\n"), "", $info['description']);
        }

You don't need the code twice right? If you go with option 1 I would suggest updating the admin-version (releasedate: 2008-01-30) of TinyMCE to the latest version (releasedate: 2008-11-27).

Last edited by evertsemeijn (2009-02-09 23:47:34)

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

Grunts

Re: Finally! Replace Textile with TinyMCE

Hello,

I think I followed this post flawlessly and it almost works. They only problem I have is that it now takes 2 hit on Verify Ad to work.

The first button hit on Verify Ad will notify the user he has forgot the description. But he hasn't, the description is there. The second hit will work without changing anything.

I was wondering if Tinymce was submitting its content correctly or not... anyone else got this problem?

Thanks

evertsemeijn

Re: Finally! Replace Textile with TinyMCE

using it on several sites and no errors. What's your site?

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

Grunts

Re: Finally! Replace Textile with TinyMCE

That's a quick reply!

The site is : http://gameindustrygrunts.com/

evertsemeijn

Re: Finally! Replace Textile with TinyMCE

put error reporting on. Off to bed now but'll check it tomorrow

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

Chronos

Re: Finally! Replace Textile with TinyMCE

I had the same issue, after the first click the javascript validation recognized the description field to be empty for some reason (but not the second click). I simply disabled the javascript check (I know it's a cheap 'fix'), but the regular validation will kick in anyway. Perhaps it has to do with the mcedit class being added to the field, which causes the javascript to not recognize it anymore or so.

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

Grunts

Re: Finally! Replace Textile with TinyMCE

I'll try to disable the javascript check too then. Where is it done?

evertsemeijn

Re: Finally! Replace Textile with TinyMCE

Strange. I'm using on more than 1 site and on different servers and having no problem with it...

Disable it in publish-write.tpl at the bottom

Code:
$("#publish_form").validate({
rules: {
    company: { required: true },
    title: { required: true },
    description: { required: true },
    poster_email: { required: true }

to

Code:
$("#publish_form").validate({
rules: {
    company: { required: true },
    title: { required: true },
    poster_email: { required: true }
Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

Grunts

Re: Finally! Replace Textile with TinyMCE

it works! Thank you!

evertsemeijn

Re: Finally! Replace Textile with TinyMCE

Cool. Let me know if you find other errors

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

Chronos

Re: Finally! Replace Textile with TinyMCE

Another thing I noticed that when pages such as page_write.php use the "escape($_POST)" the description gets messed up. Right now I'm using the following bit of code (also at publish, write or verifiy, wherever that escape code is).

Code:
$description_formatted = $_POST['description'];        
        escape($_POST);
        $description = nl2br($description_formatted);
        $description = str_replace(array("\r\n", "\r", "\n"), "", $description);

I also removed some textile code at other regions, before I got all working as it should. I'll implement this code again on a clean installation so I can let you know what exactly to change, right now I'm not certain what else I changed..

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

cayenne

Re: Finally! Replace Textile with TinyMCE

I'm using Hireme template and it seems like TinyMCE doesn't work for this

cayenne

Re: Finally! Replace Textile with TinyMCE

On 1.7 version, I do like your instruction,
I even delete the check value of Description in Publish - write. TPL ; but it doesn't work and force me to change the description . And the description's TinyMCE is disappeared sad

Last edited by cayenne (2009-05-23 08:29:22)

evertsemeijn

Re: Finally! Replace Textile with TinyMCE

You might want to try it again and make sure you do every step right. The TinyMCE hack works on both 1.6 and 1.7 (tried it yesterday).

I'll try to upload the original files + hacks next week so you can copy/paste them.

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

cayenne

Re: Finally! Replace Textile with TinyMCE

Thank you so much for your support, evertsemeijin;
I wish to see your files so soon:)

Last edited by cayenne (2009-05-23 08:44:00)

lxer

Re: Finally! Replace Textile with TinyMCE

before i try this, i would like to know: is it slower ?

cayenne

Re: Finally! Replace Textile with TinyMCE

lxer wrote:

before i try this, i would like to know: is it slower ?

as I know, it won't affect the loading speed too much as the tiny_mce jscript is already in your admin js folder, you just have to activate it smile

anyway, I still couldn't make it work properly sad

chrisdegrote

Re: Finally! Replace Textile with TinyMCE

I've tried it to get it working, but even with all the steps from post 1 and 4. I don't see any kind of changes.

@Evertsemijn I'm looking forward to see a complete list of the hacked files. Anyway this would be a great add-on and maybe it should be integrated in a future update of jobberbase.

lxer

Re: Finally! Replace Textile with TinyMCE

nm.

Last edited by lxer (2009-05-26 12:08:32)

lxer

Re: Finally! Replace Textile with TinyMCE

this is messing with the layout sad

somehow it adds all kinds of tags to the description. These also end up in the mail.

any ideas?

cayenne

Re: Finally! Replace Textile with TinyMCE

It's weird on my 1.7 when I insert the code in footer.tpl (as guide), it doesn't change anything in the description box; but when I insert that into the sidebar.tpl ; it appears;

However, it seems like the description can't be recognized; so it still doesn't work:(

Please post your hacked files when you've done with it ok, Evertsemijn.

lxer

Re: Finally! Replace Textile with TinyMCE

evertsemeijn,
The confirmation email people receive, does it contain all the html tags?
my emails now look something like this (when using textile it looked ok)


<p>test<strong>test</strong></p>
<p><strong>test</strong></p>
<p><strong>test</strong></p>
<p><strong>test</strong></p>
test test test
<p>test</p>
<p>&nbsp;</p>

* Another thing I noticed is when I use the 'verify' button a few times, it adds a few extra <p></p> tags

* email links do not display/convert well (it turns them into normal links to "\" )

Last edited by lxer (2009-05-28 08:50:05)