Feature Request: New Blog Post with Insert Tables

Topics: General
Aug 3, 2011 at 4:33 PM

Hi, is it difficult to add the Insert Table functionality to the New Blog Post?  Can we have that feature added when possible?  Thank you

Coordinator
Aug 3, 2011 at 7:07 PM

What do you mean?

Aug 3, 2011 at 7:14 PM

In the Editor of the New Blog Post, we can insert photos and other things but there's no icon to insert a table so we can format text layout, for example.  To do it now, users would have to go to HTML mode and do the table layout manually.  I was thinking maybe if we can add that feature to insert the table in then the users won't have to know about HTML table coding?

Coordinator
Aug 3, 2011 at 8:17 PM

oh, ok, well, we use TinyMCE, which definitely supports that, it's just that we enabled less buttons. That's defined in Modules/TinyMce/Scripts/orchard-tinymce.js.

Aug 3, 2011 at 8:26 PM

So it's just a matter of enabling other buttons by going into the code, no setup page through Orchard, right?  This is really neat! I'm learning something new from you every day! :D

Coordinator
Aug 3, 2011 at 9:30 PM

Well, going into that code is not ideal, as your changes can get overwritten if you update Orchard, but I don't see a cleaner way of doing it for the moment.

Aug 3, 2011 at 9:50 PM

Thank you.

Sep 21, 2011 at 3:26 PM

I'm having some trouble adding the table functionality to TinyMCE.  Here's what my Orchard-tinymce.js file looks like:

 

tinyMCE.init({
	content_css: "/Themes/TheThemeMachine/Styles/TinyMCE-Class-Options.css",
    theme: "advanced",
    mode: "specific_textareas",
    editor_selector: "tinymce",
    plugins: "fullscreen,autoresize,searchreplace,mediapicker,table",
    table_styles: "Header 1=header1;Header 2=header2;Header 3=header3",
    table_cell_styles: "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1",
    table_row_styles: "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,|,link,unlink,anchor,charmap,emoticon,codeblock,|,underline,bold,italic,|,numlist,bullist,formatselect,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent,|,code,fullscreen",
    theme_advanced_buttons2: "tablecontrols",
    theme_advanced_buttons3: "",
    convert_urls: false,
    valid_elements: "*[*]",
    // shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
    extended_valid_elements: "script[type|defer|src|language]"
});

The row for the table buttons and the '|'s are appearing but the buttons are not.  Am I missing a js file?  Thnx for any help!
Coordinator
Sep 21, 2011 at 5:15 PM

Are you able to make that work outside of Orchard? If so, you may have better luck on TinyMCE forums.

Developer
Sep 21, 2011 at 7:13 PM

here is the example from the tinymce site...

tinyMCE.init({
        theme
: "advanced",
        mode
: "textareas",
        plugins
: "table",
        theme_advanced_buttons3_add
: "tablecontrols",
        table_styles
: "Header 1=header1;Header 2=header2;Header 3=header3",
        table_cell_styles
: "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1",
        table_row_styles
: "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
        table_cell_limit
: 100,
        table_row_limit
: 5,
        table_col_limit
: 5
});

It looks like you are missing the
table_cell_limit, table_row_limit and table_col_limit stuff and the theme_advanced_buttons3_add button... You could try adding those first?
Developer
Sep 21, 2011 at 7:14 PM

http://www.tinymce.com/wiki.php/Plugin:table

Sep 21, 2011 at 8:20 PM

 

That was the page I was looking at to get the table gooblygop buttons.  

I have not tried making an editor outside of Orchard.  I'll try that and going to the forum too.  

On a side note, I did try it with all the items in the example with no luck.  

The theme_advanced_buttons3_add :"tablecontrols" did not add anything visible to the WYSIWYG so I added the "tablecontrols" in the the second empty ...button2... guy and that at least added an empty toolbar row in.

Here's what I have now:

tinyMCE.init({
	content_css: "/Themes/TheThemeMachine/Styles/TinyMCE-Class-Options.css",
	theme: "advanced",
	mode: "specific_textareas",
	editor_selector: "tinymce",
	plugins: "fullscreen,autoresize,searchreplace,mediapicker,table",
	table_styles: "Header 1=header1;Header 2=header2;Header 3=header3",
	table_cell_styles: "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1",
	table_row_styles: "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
	table_cell_limit : 100,
	table_row_limit : 5,
	table_col_limit : 5,
	theme_advanced_toolbar_location: "top",
	theme_advanced_toolbar_align: "left",
	theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,|,link,unlink,anchor,charmap,emoticon,codeblock,|,underline,bold,italic,|,numlist,bullist,formatselect,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent,|,code,fullscreen",
	theme_advanced_buttons2: "tablecontrols",
	theme_advanced_buttons3_add: "tablecontrols", // adding nothing in the browser
	theme_advanced_buttons3: "",
	convert_urls: false,
	valid_elements: "*[*]",
	// shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
	extended_valid_elements: "script[type|defer|src|language]"
});

 

 

Sep 21, 2011 at 8:21 PM

 

bertrandleroy does your orchard-tinymce.js file look different?

Coordinator
Sep 21, 2011 at 8:23 PM

mmh, I have the stock one. Not sure what you're asking?

Sep 21, 2011 at 8:32 PM

Sorry, I confused you for cazarez.  I was hoping that it was working for you (him) and I could see the file.  My bad.

Jan 31, 2012 at 6:33 PM

I got this working in my app. It was pretty easy. 

  1. copy orchard-tinymce.js into my modules Scripts/ folder (and declare it in my ResourceManifest.cs, just copy the declaration from ResourceManifest.cs in Orchard.TinyMCE module)
  2. Download full package of TinyMCE from the official website, copy to Orchard.TinyMCE\Scripts, to overwrite the tinymce scripts already there (upgrades you to the latest version). This also adds all the plug-insinto the Orchard.TinyMCE\Scripts\plugins\ folder
  3. Edit your module's copy of orchard-tinymce.js (add "table" to the plugins: property, and add "tablecontrols" in one of the "theme_advanced_buttons1/2/3" properties

You can also spruce up the TinyMCE config while you're at it by adding support for your site's CSS. Add the content_css: property, and point it to your Site.css (or equivalent).

 

Full Example of my customized orchard-tinymce.js: 

tinyMCE.init({
    theme: "advanced",
    mode: "specific_textareas",
    editor_selector: "tinymce",
    plugins: "fullscreen,searchreplace,mediapicker,table,pagebreak,autolink,contextmenu,template",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_resizing: "true",
    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,styleselect,|,code,fullscreen",
    theme_advanced_buttons2: "mediapicker,|,tablecontrols,|,hr,removeformat,visualaid,|,visualchars,template,blockquote,pagebreak",
    theme_advanced_buttons3: "",
    convert_urls: false,
    content_css: "/Themes/MyTheme/Styles/Site.css",
    valid_elements: "*[*]",
    // shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
    extended_valid_elements: "script[type|defer|src|language]"
});

Feb 1, 2012 at 2:42 PM

Made a module that makes this easier. It includes sample files you can copy to your module/theme to customize the features of TinyMce in Orchard. 

https://gallery.orchardproject.net/List/Modules/Orchard.Module.TinyMceDeluxe