46 replies to this topic

[Soma]

Hey folks!

I'm working on a couple new things for the TinyMCE inputfield in PW to extend it's capabilities toward using third-party plugins and html snippet templates (part of tinymce already).

The thing is, until now you can only implement those stuff if you change the core distribution of it. Not any longer!

I worked out a simple config setup that will give you all the freedom to use it on a per field basis even. So you could setup various templates or plugins for each TinyMCE field separate.

For those interested in checking it out and help testing, I attached a folder with a updated "inputfieldTinyMCE" folder, and additionally added a "tinymce" folder which can be put where you want, but would suggest to put it in your /site/ folder.

InputfieldTinyMCE folder is the one in /wire/modules/Inputfield/.. replace it with this new one.

The tinymce folder contains some files already.

plugins >
- bramus_cssextras // advanced custom styles/ids via content.css
template >
- body_template1.html

- content.css
- body_templates.js

The "bramus_cssextras" plugin is a great third-party plugin: http://www.bram.us/p...amus_cssextras/ I included this as an example how to load third-party plugins. And I use it in all PW projects already.

"body_templates.js" is where you can specify templates which will be available, you then only specify the path to this in the custom field settings, it is like a proxy with an array of templates. It could be even a .php file! This is part of TinyMCE and documentation can be found here: http://www.tinymce.c...Plugin:template . To use template you also need to add "template" button and "template" plugin to enable it.

"content.css" is the css you can add the path to this also in the advanced field settings.

I would really appreciate any help with testing! Feel free to try install any other third-party plugins (not tinymce core plugins), or test out templates.

Also attached a screenshot of the field settings I used to test this all with this setup.



Again in Text form:

theme_advanced_buttons1:

formatselect,bramus_cssextras_classes,bramus_cssextras_ids,|,bold,italic,|,bullist,numlist,|,link,unlink,|,image,|,code,|,fullscreen,|,template

plugins:

inlinepopups,safari,table,media,paste,fullscreen,preelementfix,template

content_css:

/site/tinymce/content.css

Additional TinyMCE settings:

template_external_list_url : /site/tinymce/body_templates.js

Third-party Plugins:

bramus_cssextras : /site/tinymce/plugins/bramus_cssextras

 PW-TinyMCE-setup-test3.zip   1.28MB   51 downloads

[Soma]

I just tested adding a second third-party plugin "codemagic". It works! Though you have to additionally add the "tiny_mce_popup.js" from tinymce-3.4.7 folder into the "/site/tinymce/" folder to work correctly.

Edit: Holy cow, first time using codemagic, what a cool tool!

[Pete]

So we can specify different editor template sets as well? I don't like the default (doesn't fit well with your asmin theme Soma) so manually change it to 'cirkuit' every time is a bit of a chore so getting around that would be most welcome

[Soma]

Sorry, just recognized that I attached wrong InputfieldTinyMCE folder! I just updated the download in the first post.

@pete, I'm not sure what would be required, but I'll have a look. I used to use the "silver" skin_variant in my admin theme. Never used cirkuit.

[Pete]

Thanks Soma

Cirkuit also works well - think I used it because I was getting my admin templates mixed up at the time, but it does look good with your template.

Anything to stop a /wire/ folder update overriding the edits currently needed in the TinyMCE folder to choose a custom template would be much appreciated Then, when this gets merged with the core (reasonably sure ryan would be happy once it's been tested) it would be another thing to help customisation of the editor as well as custom admin templates

I guess that the best place for the custom TinyMCE template would be the templates-admin folder so they can be packaged with the admin template.

[Soma]

Pete, I didn't find a way to overwrite the themes/skin path via config. But the custom config section, allows you to add a line

skin : cirkuit

This will overwrite the default in PW. All you need to do is upload the "cirkuit" folder. If anyone knows a way around this, I glady add that support.

[Soma]

Thanks Soma

Cirkuit also works well - think I used it because I was getting my admin templates mixed up at the time, but it does look good with your template.

Anything to stop a /wire/ folder update overriding the edits currently needed in the TinyMCE folder to choose a custom template would be much appreciated Then, when this gets merged with the core (reasonably sure ryan would be happy once it's been tested) it would be another thing to help customisation of the editor as well as custom admin templates

I guess that the best place for the custom TinyMCE template would be the templates-admin folder so they can be packaged with the admin template.

But you know my main update with this is to use templates (html snippets) not the editor theme. I don't care that much about how it looks, as long as it works.

I don't see currently a way to do this.

Edit: The only thing would be to get Ryan to include the "cirkuit" skin in the distribution.

[Pete]

I think these two are the solution:

http://www.tinymce.c...tion:editor_css (which I assume corresponds to ui.css in a skin folder)
http://www.tinymce.c...ation:popup_css (popup.css in a skin folder)

Between these and content_css this might be a way forward. If we set a standard folder in the templates-admin folder (/editor-style/ maybe?) and somehow have it check that folder using some PHP - if it finds the folder and the required files it can use that template, else stick with the default.

[Soma]

I think these two are the solution:

http://www.tinymce.c...tion:editor_css (which I assume corresponds to ui.css in a skin folder)
http://www.tinymce.c...ation:popup_css (popup.css in a skin folder)

Between these and content_css this might be a way forward. If we set a standard folder in the templates-admin folder (/editor-style/ maybe?) and somehow have it check that folder using some PHP - if it finds the folder and the required files it can use that template, else stick with the default.

Unfortunately this doesn't work. You can add those to the config in the setting, and it will load it. But problem is the "skin" option needs to be set to "cirkuit" too to work. And this will make it want to load the theme from the core tinymce folder...

content_css is a different shoe and already configurable and can be placed outside. This is used to style the content in the Wysiwyg. Which in current PW works well.

[Soma]

I tested this Pete, It works! If you add this in the field additional settings.

editor_css : /site/tinymce/themes/cirkuit/ui.css
skin : cirkuit

You can even use this with current TinyMCE in PW already.

BUT it, as I said above, TinyMCE is still trying to load the skin from the core TinyMCE and gets 404. It still works but don't know a way around that.

[diogo]

I installed this, but it doesn't seem to work. I do have a new third-party plugins field now, but when I put the bramus_cssextras there, tinyMCE stops working and i get a normal text area on the page editing. Also, when i press the new templates button, i get a pop-pup with the dropdown to select the template, but it's empty, although the simple table template is on the js file.

I know it's soon, but you have plans to put these options to the tinyMCE module settings, to make them global?

[Soma]

I installed this, but it doesn't seem to work. I do have a new third-party plugins field now, but when I put the bramus_cssextras there, tinyMCE stops working and i get a normal text area on the page editing. Also, when i press the new templates button, i get a pop-pup with the dropdown to select the template, but it's empty, although the simple table template is on the js file.

It works well here. Have you downloaded the test2? The first archive I attached was wrong.

Have you put all in the right place? There sould be a textarea "Third-party Settings" if you got the right one.

Try clearing cache. Try to find in firebug or alike if it fails loading anything...

I know it's soon, but you have plans to put these options to the tinyMCE module settings, to make them global?

I don't understand. There's no module settings. It's configured all in the field settings under "input" tab on the last fieldset. There was recently a update already that ryan did to have content.css outside wire folder. This takes the same approach just goes a little further.

[diogo]

It works well here. Have you downloaded the test2? The first archive I attached was wrong.

I did, I downloaded the first one before but now I downloaded this one. and I adjusted the permissions.

Have you put all in the right place? There should be a textarea "Third-party Settings" if you got the right one.

I did, I triple-checked it before posting
The "Third-party Settings" is there, like I told you. It's exactly when I put something there (anything, plugin or only random characters) that tinyMCE disappears from my fields.

I don't understand. There's no module settings

I know there is not. I am hoping that the effort that you are putting on this will help Ryan to create them http://processwire.c...ndpost__p__9482

[Soma]

Diogo, I can't say without seeing more or having any error, or browser infos, firebug maybe?

It doesn't work with anything or random characters.

The effort is mainly having it configurable even more than it is now. I don't want to get as far as creating a module configuration, as I also don't see why. It maybe possible, but would complicate things even more.

[diogo]

The javascript console on chrome gives me this: "Failed to load: /site/tinymce/plugins/bramus_cssextras/editor_plugin.js"
edit: I have full permissions on this file
edit2: I installed codemagic instead of bramus, and now I get: "Failed to load: /site/tinymce/plugins/codemagic/editor_plugin.js"... hm

[Soma]

The javascript console on chrome gives me this: "Failed to load: /site/tinymce/plugins/bramus_cssextras/editor_plugin.js"
edit: I have full permissions on this file

Well it seems not. I can reproduce this if I change the folder to 774 for example it fails to load. 775 works normally as it should.

Is that on a server or locally?

Edit: I also downloaded the archive and installed it on my local server. Works well. On my server too. On another PW site I'm working on too.

Not sure what's going on but looks like a permission problem.

[diogo]

It's a lamp server on my ubuntu... it look like a permission problem. The file doesn't open on the browser when I access directly to it. I changed the permissions to 777 on all the folder, and I also gave full permissions to the file directly... I also changed the tinyMCE folder to the assets folder and changed all the paths on the options, but no luck...

[Soma]

edit2: I installed codemagic instead of bramus, and now I get: "Failed to load: /site/tinymce/plugins/codemagic/editor_plugin.js"... hm

you don't happen to have pw installed in a subfolder?

can you copy that url and add it in the browser to see if it can load the file?

[diogo]

you don't happen to have pw installed in a subfolder?

I do, does it make a difference? Edit: it does make a difference. I added the subfolder name on the right place of the path, and the js file opened on the browser

can you copy that url and add it in the browser to see if it can load the file?

I already did through the js console link. I get a 404.

[Soma]

Yes as you said it makes a difference because the path /site/tinymce/plugins/codemagic/editor_plugin.js hence the "/" in the beginning is absolute from the web root. You should adjust the config string to have the real path /subfolder/site/...