$id = 'content';
$w= $params['w'] ? $params['w'] : '100%';
$h= $params['h'] ? $params['h'] : '400px';
$richtexteditor = 'TinyMCE';
$value = 'SomeValue';
$o= '<div class="MODX_RichTextWidget"><textarea id="' . $id . '" name="' . $id . '" style="width:' . $w . '; height:' . $h . ';">';
$o .= htmlspecialchars($value);
$o .= '</textarea></div>';
$replace_richtext= array (
$id
);
// setup editors
if (!empty ($replace_richtext) && !empty ($richtexteditor)) {
// invoke OnRichTextEditorInit event
$evtOut= $modx->invokeEvent("OnRichTextEditorInit", array (
'editor' => $richtexteditor,
'elements' => $replace_richtext,
'forfrontend' => 1,
'width' => $w,
'height' => $h
));
if (is_array($evtOut))
$o .= implode("", $evtOut);
}
return $o;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MODx Revolution - NewsPublisher</title>
<base href="http://localhost/gitclone/" />
<script type="text/javascript" src="/gitclone/assets/components/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/gitclone/assets/components/tinymce/xconfig.js"></script>
<script type="text/javascript" src="/gitclone/assets/components/tinymce/tiny.js"></script>
<script type="text/javascript">Tiny.lang = {"toggle_editor":"Toggle Editor: ","setting_css_selectors":"CSS Selectors","setting_css_selectors_desc":"Here you can enter a list of selectors that should be available in the editor. Enter them as follows:<br \/>\"displayName=selectorName;displayName2=selectorName2\"<br \/>For instance, say you have <b>.mono<\/b> and <b>.smallText<\/b> selectors in your CSS file, you could add them here as:<br \/>\"Monospaced text=mono;Small text=smallText\"<br \/>Note that the last entry should not have a semi-colon after it.","setting_custom_buttons1":"Custom Buttons Row 1","setting_custom_buttons1_desc":"Enter the buttons to use as a comma separated list for the first row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons2":"Custom Buttons Row 2","setting_custom_buttons2_desc":"Enter the buttons to use as a comma separated list for the second row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons3":"Custom Buttons Row 3","setting_custom_buttons3_desc":"Enter the buttons to use as a comma separated list for the third row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons4":"Custom Buttons Row 4","setting_custom_buttons4_desc":"Enter the buttons to use as a comma separated list for the fourth row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons5":"Custom Buttons Row 5","setting_custom_buttons5_desc":"Enter the buttons to use as a comma separated list for the fifth row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_plugins":"Custom Plugins","setting_custom_plugins_desc":"A comma-separated list of TinyMCE plugins to use.","setting_editor_theme":"Editor Theme","setting_template_list":"Template List","setting_template_list_desc":"Specify a list of templates for the template plugin. They must be comma-separated, and then have the format name:URL:description. For example, MyTemp:assets\/templates\/mytemp.html:My very own template","setting_path_options":"Path Options","setting_path_options_desc":"Either \"rootrelative\", \"docrelative\", or \"fullpathurl\".","setting_theme_advanced_blockformats":"HTML Block Elements","setting_theme_advanced_blockformats_desc":"This option should contain a comma separated list of formats that will be available in the format drop down list. This option is only available if the advanced theme is used."};</script>
<script type="text/javascript" src="/gitclone/assets/components/tinymce/tinymce.panel.js"></script>
<script type="text/javascript">
// <[CDATA[
Ext.onReady(function() {
Tiny.config = {"accessibility_warnings":true,"apply_source_formatting":true,"browserUrl":"\/gitclone\/manager\/index.php?a=3","button_tile_map":false,"cleanup":true,"cleanup_on_startup":false,"compressor":"","content_css":"","convert_fonts_to_spans":true,"convert_newlines_to_brs":false,"element_format":"xhtml","element_list":"","entities":"","entity_encoding":"","execcommand_callback":"Tiny.onExecCommand","file_browser_callback":"Tiny.loadBrowser","force_p_newlines":true,"force_br_newlines":false,"forced_root_block":false,"formats":{"alignleft":{"selector":"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img","classes":"justifyleft"},"alignright":{"selector":"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img","classes":"justifyright"},"alignfull":{"selector":"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img","classes":"justifyfull"}},"frontend":false,"height":"400px","invalid_elements":"","nowrap":false,"path_options":"","plugin_insertdate_dateFormat":"%Y-%m-%d","plugin_insertdate_timeFormat":"%H:%M:%S","preformatted":true,"resizable":true,"relative_urls":true,"remove_linebreaks":false,"remove_script_host":true,"resource_browser_path":"\/gitclone\/manager\/controllers\/browser\/index.php?","skin":"cirkuit","skin_variant":"","table_inline_editing":true,"template_external_list_url":"\/gitclone\/assets\/components\/tinymce\/template.list.php","theme_advanced_disable":"","theme_advanced_resizing":true,"theme_advanced_resize_horizontal":true,"theme_advanced_statusbar_location":"bottom","theme_advanced_styles":"","theme_advanced_toolbar_align":"left","theme_advanced_toolbar_location":"top","width":"100%","convert_urls":true,"dialog_type":"window","directionality":"ltr","force_hex_style_colors":true,"indentation":"30px","object_resizing":true,"remove_trailing_nbsp":false,"theme_advanced_path":true,"editor":"TinyMCE","elements":["content"],"forfrontend":1,"theme_advanced_blockformats":"p,h1,h2,h3,h4,h5,h6,div,blockquote,code,pre,address","theme_advanced_font_sizes":"80%,90%,100%,120%,140%,160%,180%,220%,260%,320%,400%,500%,700%","buttons1":"undo,redo,selectall,separator,pastetext,pasteword,separator,search,replace,separator,nonbreaking,hr,charmap,separator,image,modxlink,unlink,anchor,media,separator,cleanup,removeformat,separator,fullscreen,print,code,help","buttons2":"bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,separator,styleprops","buttons3":"","buttons4":"","buttons5":"","css_path":"","plugins":"style,advimage,advlink,modxlink,searchreplace,print,contextmenu,paste,fullscreen,noneditable,nonbreaking,xhtmlxtras,visualchars,media","theme":"advanced","theme_advanced_buttons1":"undo,redo,selectall,separator,pastetext,pasteword,separator,search,replace,separator,nonbreaking,hr,charmap,separator,image,modxlink,unlink,anchor,media,separator,cleanup,removeformat,separator,fullscreen,print,code,help","theme_advanced_buttons2":"bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,separator,styleprops","theme_advanced_buttons3":"","theme_advanced_buttons4":"","theme_advanced_buttons5":"","toolbar_align":"ltr","use_browser":"1","language":"en","document_base_url":"\/gitclone\/"};
Tiny.config.setup = function(ed) {
ed.onInit.add(Tiny.onLoad);
ed.onKeyUp.add(Tiny.onChange);
};
Tiny.templates = [];
});
// ]]>
</script>
</head>
<body>
<div class="MODX_RichTextWidget"><textarea id="content" name="content" style="width:100%; height:400px;">SomeValue</textarea></div>
</body>
</html>Thanks Bruno. I’m trying your example but I’m getting the same result.
I took together all files, what I did to integrate tiny for xdbedit, for the frontend.
My Test did it inclusive file-browser loading and that.
See:
https://github.com/Bruno17/tinymcefe
MODx.loadRTE = function(id) {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MODx Revolution - NewsPublisher</title>
<base href="http://localhost/gitclone/" />
<script type="text/javascript" src="/gitclone/manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/gitclone/manager/assets/ext3/ext-all.js"></script>
<script type="text/javascript" src="/gitclone/manager/assets/modext/build/core/modx-min.js"></script>
<script type="text/javascript" src="/gitclone/manager/assets/modext/util/datetime.js"></script>
<script type="text/javascript" src="/gitclone/assets/components/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/gitclone/assets/components/tinymce/xconfig.js"></script>
<script type="text/javascript" src="/gitclone/assets/components/tinymcefe/tiny.js"></script>
<script type="text/javascript">Tiny.lang = {"toggle_editor":"Toggle Editor: ","setting_css_selectors":"CSS Selectors","setting_css_selectors_desc":"Here you can enter a list of selectors that should be available in the editor. Enter them as follows:<br \/>\"displayName=selectorName;displayName2=selectorName2\"<br \/>For instance, say you have <b>.mono<\/b> and <b>.smallText<\/b> selectors in your CSS file, you could add them here as:<br \/>\"Monospaced text=mono;Small text=smallText\"<br \/>Note that the last entry should not have a semi-colon after it.","setting_custom_buttons1":"Custom Buttons Row 1","setting_custom_buttons1_desc":"Enter the buttons to use as a comma separated list for the first row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons2":"Custom Buttons Row 2","setting_custom_buttons2_desc":"Enter the buttons to use as a comma separated list for the second row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons3":"Custom Buttons Row 3","setting_custom_buttons3_desc":"Enter the buttons to use as a comma separated list for the third row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons4":"Custom Buttons Row 4","setting_custom_buttons4_desc":"Enter the buttons to use as a comma separated list for the fourth row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_buttons5":"Custom Buttons Row 5","setting_custom_buttons5_desc":"Enter the buttons to use as a comma separated list for the fifth row. Be sure that each button has the required plugin enabled in the \"Custom Plugins\" setting.","setting_custom_plugins":"Custom Plugins","setting_custom_plugins_desc":"A comma-separated list of TinyMCE plugins to use.","setting_editor_theme":"Editor Theme","setting_template_list":"Template List","setting_template_list_desc":"Specify a list of templates for the template plugin. They must be comma-separated, and then have the format name:URL:description. For example, MyTemp:assets\/templates\/mytemp.html:My very own template","setting_path_options":"Path Options","setting_path_options_desc":"Either \"rootrelative\", \"docrelative\", or \"fullpathurl\".","setting_theme_advanced_blockformats":"HTML Block Elements","setting_theme_advanced_blockformats_desc":"This option should contain a comma separated list of formats that will be available in the format drop down list. This option is only available if the advanced theme is used."};</script>
<script type="text/javascript">
// <[CDATA[
Ext.onReady(function() {
Tiny.config = {"accessibility_warnings":true,"apply_source_formatting":true,"browserUrl":"\/gitclone\/manager\/index.php?a=3","button_tile_map":false,"cleanup":true,"cleanup_on_startup":false,"compressor":"","content_css":"","convert_fonts_to_spans":true,"convert_newlines_to_brs":false,"element_format":"xhtml","element_list":"","entities":"","entity_encoding":"","execcommand_callback":"Tiny.onExecCommand","file_browser_callback":"Tiny.loadBrowser","force_p_newlines":true,"force_br_newlines":false,"forced_root_block":false,"formats":{"alignleft":{"selector":"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img","classes":"justifyleft"},"alignright":{"selector":"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img","classes":"justifyright"},"alignfull":{"selector":"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img","classes":"justifyfull"}},"frontend":false,"height":"400px","invalid_elements":"","nowrap":false,"path_options":"","plugin_insertdate_dateFormat":"%Y-%m-%d","plugin_insertdate_timeFormat":"%H:%M:%S","preformatted":true,"resizable":true,"relative_urls":true,"remove_linebreaks":false,"remove_script_host":true,"resource_browser_path":"\/gitclone\/manager\/controllers\/browser\/index.php?","skin":"cirkuit","skin_variant":"","table_inline_editing":true,"template_external_list_url":"\/gitclone\/assets\/components\/tinymce\/template.list.php","theme_advanced_disable":"","theme_advanced_resizing":true,"theme_advanced_resize_horizontal":true,"theme_advanced_statusbar_location":"bottom","theme_advanced_styles":"","theme_advanced_toolbar_align":"left","theme_advanced_toolbar_location":"top","width":"95%","convert_urls":true,"dialog_type":"window","directionality":"ltr","force_hex_style_colors":true,"indentation":"30px","object_resizing":true,"remove_trailing_nbsp":false,"theme_advanced_path":true,"theme_advanced_blockformats":"p,h1,h2,h3,h4,h5,h6,div,blockquote,code,pre,address","theme_advanced_font_sizes":"80%,90%,100%,120%,140%,160%,180%,220%,260%,320%,400%,500%,700%","buttons1":"undo,redo,selectall,separator,pastetext,pasteword,separator,search,replace,separator,nonbreaking,hr,charmap,separator,image,modxlink,unlink,anchor,media,separator,cleanup,removeformat,separator,fullscreen,print,code,help","buttons2":"bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,separator,styleprops","buttons3":"","buttons4":"","buttons5":"","css_path":"","plugins":"style,advimage,advlink,modxlink,searchreplace,print,contextmenu,paste,fullscreen,noneditable,nonbreaking,xhtmlxtras,visualchars,media","theme":"advanced","theme_advanced_buttons1":"undo,redo,selectall,separator,pastetext,pasteword,separator,search,replace,separator,nonbreaking,hr,charmap,separator,image,modxlink,unlink,anchor,media,separator,cleanup,removeformat,separator,fullscreen,print,code,help","theme_advanced_buttons2":"bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,separator,styleprops","theme_advanced_buttons3":"","theme_advanced_buttons4":"","theme_advanced_buttons5":"","toolbar_align":"ltr","use_browser":"1","language":"en","document_base_url":"\/gitclone\/"};
Tiny.templates = [];
});
// ]]>
</script>
<script type="text/javascript" src="/gitclone/assets/components/tinymce/jscripts/tiny_mce/langs/en.js"></script>
<script type="text/javascript" src="/gitclone/assets/components/tinymce/tiny.browser.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
MODx.loadRTE();
});
</script>
</head>
<body>
<div class="MODX_RichTextWidget"><textarea class="modx-richtext" id="content" name="content" style="width:100%; height:400px;">SomeValue</textarea></div>
</body>
</html>
strange. It looks absolutely the same as mine.
Mine works on FF and also on IE (6!!)