MarkItUp Advanced Textarea

[simunaqv]

MarkItUp is a jQuery plugin that turns a textarea into an editor of the markup of your choice. It is also possible to use it as a bbcode editor. I am providing here an add-on that integrates markItUp in xenForo to enhance its non-wysiwyg text editor. Many people prefer to use the simple textrea mode for several reasons. There are already some add-ons available that enhance the functionality of the simple textarea but I found these add-ons lacking. Therefore I have created this add-on which integrates markItUp. MarkItUp is much lighter weight compared with TinyMCE and it also provides better user experience since it has no latency in calling simple popup dialogs for adding links and images.

Installation:
- Download and unzip the attached file.
- Upload the contents of the upload folder to the root of your forum.
- In the admin section of your forum, import the xml file addon-markitup.xml.

You need to uncheck the Use the rich text editor to create and edit messages checkbox inside the preferences section in your profile settings in order to use this editor.

Known issues:
- There is a large gap between the toolbar and the textarea in quick reply editor.

 

[simunaqv]

*Reserved*

 

[Digital Doctor]

There is a very cool MarkItUp! demo - http://markitup.jaysalvat.com/examples/

The MarkItUp Preview is cool .... would it be possible to get that working ?

 

[PoLiZe]

Any demo forum with this?
Is really great!

 

[infis]

I can't see any smilies on bottom area. In html-code I see block, where (for example):

<a href="#" title=":)"><img alt=":)" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie1"/></a>

And should be or there should be references to icons of smiles nevertheless?

 

[Morgain]

Would it be possible to embed this in a textarea in XF Page so as to edit it? (subject to usergroup permission)

 

[simunaqv]

View attachment 22888

There is a very cool MarkItUp! demo - http://markitup.jaysalvat.com/examples/

The MarkItUp Preview is cool .... would it be possible to get that working ?

I tend to keep it simple. It is better to use forum's own preview functionality.

Any demo forum with this?
Is really great!

You can try it on our forum if you like. It is an Urdu forum though.

I can't see any smilies on bottom area. In html-code I see block, where (for example):

<a href="#" title=":)"><img alt=":)" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie1"/></a>

And should be or there should be references to icons of smiles nevertheless?

Do you have a link to a live installation?

Would it be possible to embed this in a textarea in XF Page so as to edit it? (subject to usergroup permission)

This add-on integrates markItUp as a bbcode editor. Pages probably do not support bbcodes at the moment. It should be possible to use markItUp to edit html for pages.

 

[infis]

Do you have a link to a live installation?

It's on private server for testing. But in installation xml we can find:

    <template title="markitup_smilies" version_id="1" version_string="1.0"><![CDATA[<div id="emoticons">
    <ul>
        <li>
        <a href="#" title=":)"><img alt=":)" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie1"/></a>
        <a href="#" title=";)"><img alt=";)" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie2"/></a>
        <a href="#" title=":("><img alt=":(" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie3"/></a>
        <a href="#" title=":mad:"><img alt=":mad:" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie4"/></a>
        <a href="#" title=":confused:"><img alt=":confused:" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie5"/></a>
        <a href="#" title=":cool:"><img alt=":cool:" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie6"/></a>
        <a href="#" title=":p"><img alt=":p" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie7"/></a>
        <a href="#" title=":D"><img alt=":D" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie8"/></a>
        <a href="#" title=":eek:"><img alt=":eek:" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie9"/></a>
        <a href="#" title=":oops:"><img alt=":oops:" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie10"/></a>
        <a href="#" title=":rolleyes:"><img alt=":rolleyes:" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie11"/></a>
        <a href="#" title="o_O"><img alt="o_O" border="0" src="styles/default/xenforo/clear.png" class="mceSmilieSprite mceSmilie12"/></a>
        </li>
    </ul>   
</div>]]></template>

 

[simunaqv]

Check if you are using sprite settings for the smilies.

 

[infis]

Sprite settings for smilies are off.

 

[simunaqv]

Use sprite settings for the smilies and you will see the smilies box under the editor.

 

[infis]

Use sprite settings for the smilies and you will see the smilies box under the editor.

Ok. But this must be optional. Maybe you can add support for forum whithout sprites?