We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 8345
    • 147 Posts
    Hi there:) I Googled and searched form but didn’t find anything how to add TinyMCE to front-end. Finally I went to TinyMCE’s website and there’s simple example so I added to the eFormTpl chunk following code:

    <script type="text/javascript" src="/var/www/vhosts/mydomain.com/httpdocs/assets/plugins/tinymce/tinymce.modxfb.js"></script>
    <script type="text/javascript">
    tinyMCE.init({
    mode : "textareas",
    theme : "simple"
    });
    </script>
    [+validationmessage+]
    <form method="post" action="[~[*id*]~]" enctype="multipart/form-data">
        <input type="hidden" name="formid" value="newResourceForm" />
        <textarea cols="40" rows="7" name="content" eform="Rich text::1" style="width:100%"></textarea>
        <input type="submit" name="submit" value="Send">
    </form>


    Nothing really happened. It’s Evo 1.0.4

    Actually I even don’t need TinyMCE - I just need that line brakes won’t disappear if there’s easier solution for that.

    Thanks,
    Kaspar
      • 8345
      • 147 Posts
      I just uploaded TinyMCE from tinymce.moxiecode.com and used that but I believe there should be a easier way to add the TinyMCE already in MODx plugins folder.
      • You are aware that you can use a TV with a Rich Text output widget, right? (the input type doesn’t matter in this case since you want the RTE in the front-end)

        As far as line breaks go, they will be saved (\n) but of course HTML doesn’t display them, unless you display the output in <pre>...</pre> tags.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 8345
          • 147 Posts
          Thanks a lot sotwell. The \n and between <pre> dispalying tip is really useful for future projects:)

          Regarding the TV with RT widget I actually haven’t understood as for back-end I have used just a TV’s "Input Type" as a RT and never felt a need to use a widget, too.

          For front end I have a eForm template where I need <textarea name="something" eform="Something::1"> to be TinyMCE. Anyway due to your RT widget idea I created TV with RT widget and put it into test document and checked what HTML it creates. Then I copied that code to my eForm template:

          Message: *<br/>
          <div class="MODX_RichTextWidget"><textarea id="tvaaaa" name="tvaaaa" eform="Teate sisu::1" style="width:100%; height:300px;"></textarea></div><script language="javascript" type="text/javascript" src="/assets/plugins/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> 
          <script language="javascript" type="text/javascript" src="/assets/plugins/tinymce/js/xconfig.js"></script> 
          <script language="javascript" type="text/javascript"> 
          tinyMCE.init({
          	theme                            : 'advanced',
          	mode                             : 'exact',
          	elements                         : 'tvaaaa',
          	width                            : '100%',
          	height                           : '300px',
          	language                         : 'en',
          	document_base_url                : 'http://mitteformaalne.ee/',
          	relative_urls                    : true,
          	remove_script_host               : true,
          	convert_urls                     : true,
          	forced_root_block                : 'p',
          	force_p_newlines                 : true,
          	valid_elements                   : mce_valid_elements,
          	extended_valid_elements          : mce_extended_valid_elements,
          	invalid_elements                 : mce_invalid_elements,
          	popup_css_add                    : '/assets/plugins/tinymce/style/popup_add.css',
          	accessibility_warnings : false,
          	theme_advanced_toolbar_location  : 'top',
          	theme_advanced_statusbar_location: 'bottom',
          	theme_advanced_toolbar_align     : 'ltr',
          	theme_advanced_font_sizes        : '80%,90%,100%,120%,140%,160%,180%,220%,260%,320%,400%,500%,700%',
          	content_css                      : '/assets/plugins/tinymce/style/content.css',
          	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'}
          	},
          	apply_source_formatting          : true,
          	remove_linebreaks                : false,
          	convert_fonts_to_spans           : true,
          	plugins                          : 'emotions,advimage,advlink,paste,contextmenu',
          	theme_advanced_buttons1          : 'undo,redo,|,bold,strikethrough,|,justifyleft,justifycenter,justifyright,|,link,unlink,image,emotions,|,hr,|,help',
          	theme_advanced_buttons2          : '',
          	theme_advanced_buttons3          : '',
          	theme_advanced_buttons4          : '',
          	theme_advanced_resize_horizontal :  false,
          	external_link_list_url           : '/assets/plugins/tinymce/inc/tinymce.linklist.php',
          	theme_advanced_blockformats      : 'p,h1,h2,h3,h4,h5,h6,div,blockquote,code,pre',
          	theme_advanced_styles            : '',
          	theme_advanced_disable           : '',
          	theme_advanced_resizing          : true,
          	fullscreen_settings : {
          		theme_advanced_buttons1_add_before : 'save'
          	},
          	plugin_insertdate_dateFormat     : '%d-%m-%Y',
          	plugin_insertdate_timeFormat     : '%H:%M:%S',
          	entity_encoding                  : 'named',
          	file_browser_callback            : 'modx_fb',
          	onchange_callback                : 'myCustomOnChangeHandler'
          	
          })
          </script> 
           
          <script language="javascript" type="text/javascript"> 
          function myCustomOnChangeHandler() {
          	documentDirty = true;
          }
          </script> 
           
          <script language="javascript" type="text/javascript"> 
          function modx_fb (field_name, url, type, win) {
              if (type == "media") {type = win.document.getElementById("media_type").value;}
          	var cmsURL = "/manager/media/browser/mcpuk/browser.php?Connector=/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/&editor=tinymce&editorpath=/assets/plugins/tinymce/";
          	switch (type) {
          		case "image":
          			type = "images";
          			break;
          		case "media":
          		case "qt":
          		case "wmp":
          		case "rmp":
          			type = "media";
          			break;
          		case "shockwave":
          		case "flash":
          			type = "flash";
          			break;
          		case "file":
          			type = "files";
          			break;
          		default:
          			return false;
          	}
          	if (cmsURL.indexOf("?") < 0) {
          	    //add the type as the only query parameter
          	    cmsURL = cmsURL + "?type=" + type;
          	}
          	else {
          	    //add the type as an additional query parameter
          	    // (PHP session ID is now included if there is one at all)
          	    cmsURL = cmsURL + "&type=" + type;
          	}
           
          	var windowManager = tinyMCE.activeEditor.windowManager.open({
          	    file : cmsURL,
          	    width : screen.width * 0.7,  // Your dimensions may differ - toy around with them!
          	    height : screen.height * 0.7,
          	    resizable : "yes",
          	    inline : 0,  // This parameter only has an effect if you use the inlinepopups plugin!
          	    close_previous : "no"
          	}, {
          	    window : win,
          	    input : field_name
          	});
          	if (window.focus) {windowManager.focus()}
          	return false;
          }
          </script> 


          But what I noticed is that when the data is stored in MODx document’s content area ($values[’content’] = $modx->db->escape( $fields[’tvaaaa’]); ) then it just forgets the paragraphs brakes <p></p> and any other formatting done with TinyMCE. Basically I create a new document from front end with eForm like described here.

          Thanks,
          Kaspar
            • 36533
            • 65 Posts
            e-stonia,

            Did you ever figure this out? I need to do the exact same thing from the same tutorial with eForm. I've got everything working except for the TinyMCE. I'd be glad to create a tutorial to add to the wiki on how to do this once this part is figured out. This seems like the most straight-forward approach.
            • I documented adding a rich text field to Jot some time ago. The same thing should work with any form.

              http://forums.modx.com/thread/43182/howto-use-tinymce-or-other-rte-in-posting-jot-comments#dis-post-249303
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 36533
                • 65 Posts
                Hi Susan,

                I actually got another solution in place that was pretty easy. However, the problem I'm having now is the HTML being sent to the DB is getting sanitized and all tags are getting stripped in the formatting.

                I'm basically using this same exact code: http://modxrules.com/articles/new-documents-with-eform

                Any ideas on how to retain html in a safe manner? This is a protected area.

                Update: I also tried your solution for TinyMCE, which works nicely. However, I still have an issue with it stripping HTML formatting on insert. [ed. note: nuwebstudios last edited this post 12 years ago.]
                  • 36533
                  • 65 Posts
                  nuwebstudios Reply #8, 12 years ago
                  Update:

                  Ok, so I found a bad workaround and maybe you might know how I can change this setting from my snippet instead of hacking the core.

                  In document.parser.class.inc.php at around line 2380 there is:

                  # Remove unwanted html tags and snippet, settings and tags
                  function stripTags($html, $allowed= "") {
                  


                  Which I replaced with:

                  # Remove unwanted html tags and snippet, settings and tags
                  function stripTags($html, $allowed= "<h1><h2><h3><h4><h5><h6><p><b><i><span><strong><ul><li><ol>") {
                  


                  That fixed the issue and limits HTML inputs to only those tags; however, to maintain integrity of the core, how might I go about doing this from the snippet itself?
                  • No need to hack the core. That's an eForm feature (it calls the stripTags API function). You can control that in your eForm snippet with

                    &allowhtml (Optional) Set to 1 to allow user to enter html tags. Defaults to 0
                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 36533
                      • 65 Posts
                      Ehh... so much time wasted for such an easy fix. How did I miss that in the eForm parameters?

                      You rock Susan!