tinymce

You are currently browsing articles tagged tinymce.

Ibo, from the Elgg Developer Google Group, just updated my Tinymce with TinyBrowser implementation. I’d like to thank him as I have been very busy.

It implements the new version of TinyBrowser 1.40 beta. New features include:

  • Multiple Folder support with ability to create, change, and delete folders.
  • Action for moving files between folders
  • Height and width values in the pop up window.

It also fixes a number of bugs. In addition, it allows TinyBrowser to create a full upload path.

This remains a way to upload files from within the image and media embed functions in tinymce, while we wait for the new text area embedding tool being developed for Elgg 1.5 slated for February.

Tags: , , ,

Some early users were disappointed by the lack of features upon Elgg 1.0′s release. What they didn’t realize is that the new Elgg was designed as an extensible core engine to drive plugins and interact with other social platforms. Elgg 1.0 developers are starting to release plugins that extend the basic Elgg 1.0. What has started as a trickle appears to be picking up momentum. There are already many great plugins.

As mentioned earlier, the full version of Elgg 1.0 includes a spartan set of features. While it is easy enough to modify this popular wysiwyg editor, many are uncomfortable editing a little code. Furthermore, many have been trying unsuccessfully to make embedded content such as videos and video sharing. A couple days ago, developer Lee Teague released Tinymce Advanced.

Tinymce Advanced is simple to install: download, unpack, and upload to your server’s elgg/mod directory. You simply activate it in  Administration–>Tools Administration. That’s it provided you like the way it is configured. Refer back to my post on hacking Tinymce if you want to change the feature set. Depending upon the desired results, it may be easier to modify this than the default Tinymce.

Lee Teague’s Tinymce plugin is full featured, adding several formatting features including alignment, fonts, colors, indents, and tables. Best of all the media button really works allowing you to embed several popular multimedia formats. It also can embed YouTube and other video sharing when you insert the code snippet into the post using the html source editor.

If you use this plugin, it is recommended that it only be available to trusted and accountable users because these tags can make the site vulnerable to attacks. While not yet developed, it would be great if it could be configured so that trusted logged in members could have access to an extended editor, while others has access to a leaner tool set. In a shout back to me, developer Dave Tosh suggested extending textarea to include links to user’s or friends’ file uploads.

Another great plugin puts Spotlight to use as an RSS reader. ThinkTank Studio created a Magpierss reader that displays the latest articles from your favorite rss feed in Spotlight.

Download, unpack, and upload to your server’s elgg/mod directory. Activate it in  Administration–>Tools Administration. It requires a bit of hand coding to configure. Don’t let that thwart you. Just keep a back up copy of any file you edit in case you make a mistake. If the site breaks, just upload the backup so it overwrites the errant code.

Once uploaded, use your ftp client to access the file elgg/mod/magpierss/views/default/page_elements/spotlight.php, then find this (it’s easy to find):

<!-- !! START MAGPIERSS !! -->
<!-- I put the title of the feed here -->
<!-- you can lay things out all pretty with divs or tables or something.  This is just a quick and dirty example -->
<strong>Discovery News</strong><br /><br />
<?php
    require_once('magpierss/rss_fetch.inc');
    $url = $_GET['url'];
    $num_items = 3;
    $rss = fetch_rss( 'http://dsc.discovery.com/news/topstories.xml' );
    echo $rss->channel['title'] . "<p>";
    foreach (array_slice($rss->items, 0, $num_items) as $item) {
        $href = $item['link'];
        $title = $item['title'];
        $description = $item['description'];
        echo "<b><a href=$href target='_new'>$title</a></b><br>$description<br>";
    }
 ?>
<br />
<br />

All you need to edit is the blue text: a title for the feed, the numbers of items to display, and the address to the feed. Overwrite the original file and if you did it properly, you should see your feed displayed in Spotlight. The example illustrated above it the simplest. You could use formatting such as tables in the above code to change the display. The developer has thrown this out hoping others will build upon it.

Finally, there is the Default Widgets plugin. Out of the box, Elgg delivers a new user to a blank dashboard without widgets and a link to edit the page. The profile is also empty. Default Widgets built by Jade Dominguez and Chad @ NCR at the Google elgg developer group populates both the dashboard and profile with a preconfigured set of widgets. Again, download, expand, and upload to your elgg/mod directory, then activate. As configured a new user sees this dashboard:

The profile:

Widgets can be configured differently, but that involves editing code. Open elgg/mod/default_widgets/start.php and look for:

/*
	the add_widgets function only executes if the user has permissions to add widgets to his profile/dashboard.
	Since there is no user yet logged in, we need to artificially login the new user
	*/
	$log_user_in = login($object);	

	if($log_user_in){
		$profile_handler = array("friends", "a_users_groups", "messageboard", "filerepo", "status", "river_widget", "river_widget_friends");
		$dashboard_handler = array("river_widget_friends", "friends", "status", "bookmarks");

		$profile_column = array(1, 1, 2, 2, 3, 3, 3);
		$dashboard_column = array(1, 2, 3, 3);

Edit the values highlighted in blue using the the guidelines from readme.

More Elgg 1.0 plugins are available and even more in the works. As I try them out, I will feature them here. It appears that the trickle may soon be a steady stream.

Tags: , , , , , , ,

The extended Elgg includes the Tinymce wysiwyg editor with a well selected, yet limited set of tools. Many have asked about extending the options and, in fact, there are several more tools waiting to to activated. Some are very simple to implement, while others are more complex. We will start with the simple changes and deal with more complex modifications in the future.

The default Tinymce text editor in Elgg 1.0 appears like this:

This gives you the following tools:

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Bullet List  (bullist)
  • Number list (numlist)
  • Undo
  • Redo
  • Link
  • Unlink
  • Image
  • Quote (blockquote)
  • Source (code)

Many have grown fond of a larger tool set with other applications or would like to see more features suited to their use of Elgg. Most of these tools are already loaded on your Elgg installation just waiting to be activated. Some can be activated by typing a single word into a file.

Looking at moxiecode’s documentation, I found that I can easily configure tinymce by editing a file containing:

tinyMCE.init({

Which file is that? It’s hidden deep in the mod/tinymce directory (grep is your friend!):

mod/tinymce/views/default/input/longtext.php

Elgg’s default tinymce configuration is as follows:

tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" });

Note the text in above in blue. Those call up the options seen in the bulleted list above. Each of the lines starting with theme_advanced_buttons represent a row of buttons in the editor:

theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",

As configured above, there are only tools in the first row of buttons. Additional options can be added by inserting text in any of the three rows, depending upon where you weant them to appear.

There are many functions you can add to any of these three rows by adding words to bring up buttons. For example:

Text Justification:

  • justifyleft
  • justifycenter
  • justifyright
  • justifyfull

Basic Copy/Paste

  • cut
  • copy
  • paste

Indents:

  • indent
  • outdent

Fonts/styles:

  • removeformat
  • formatselect
  • fontselect
  • fontsizeselect
  • sytyleselect

Super/subscript:

  • sub
  • super

Color:

  • forecolor
  • backcolor
  • forecolorpicker
  • backcolorpicker

Here is one possible configuration:

 tinyMCE.init({

    mode : "textareas",
    theme : "advanced",
    plugins : "media, emotions, fullscreen",
    media_use_script : "true",
    cleanup : "true",
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
    theme_advanced_buttons2 : "media, emotions, fullscreen, forecolor, cleanup",
    theme_advanced_buttons3 : "fontselect, justifyleft, justifycenter, justifyright",
    theme_advanced_toolbar_location : "top",

Resulting in this:

More information may be found about options and functions here.

This should get you started. There are even more options that need further configuration–some simple, others complex.  I have found some vexing, but I plan on discussing more complex plugins allowing spell checking, embedding media, and other functions in the near future.

Tags: ,