Jump to content

InputfieldTinyMCE update - Help test


Soma
 Share

Recommended Posts

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.

post-100-0-49185400-1332503658_thumb.png

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

  • Like 4
Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

I think these two are the solution:

http://www.tinymce.com/wiki.php/Configuration:editor_css (which I assume corresponds to ui.css in a skin folder)

http://www.tinymce.com/wiki.php/Configuration: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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/...

Link to comment
Share on other sites

Ok, I updated all the paths with the subfolder, and tinyMCE was working, but it told me that it couldn't find content.css... the path it was looking for was teste/teste/site/tinymce/content.css (notice the double subfolder in the base). So, I went to the options and reverted the content_css path to the previous value (without the subfolder), and it's working now.

Now I get an error when choosing the template because it is looking for it in /site/tinymce/templates/body_template1.html (no subfolder there). I have to look for the place to change that one.

edit: this one was easy, just had to update the path on the body_templates.js. Everything is working fine now!

Link to comment
Share on other sites

Ok, I updated all the paths with the subfolder, and tinyMCE was working, but it told me that it couldn't find content.css... the path it was looking for was teste/teste/site/tinymce/content.css (notice the double subfolder in the base). So, I went to the options and reverted the content_css path to the previous value (without the subfolder), and it's working now.

The content.css does add the the root subfolder to the path already.

I'll do the same with the third-party plugin settings (as we can assume they're values are always a path)

As for when you want to add additional resources via the Additional textarea (to overwrite settings) it hard to detect (maybe not) if theres a path from the root, as it can be anything (true,false,"string"). So if you want to add something there like ui.css you would have to add the subfolder to the path.

Now I get an error when choosing the template because it is looking for it in /site/tinymce/templates/body_template1.html (no subfolder there). I have to look for the place to change that one.

edit: this one was easy, just had to update the path on the body_templates.js. Everything is working fine now!

This is in the body_templates.js you would usually have to create yourself.

.. Ahhh... already edited! Glad you figured it out.

Link to comment
Share on other sites

I'll do the same with the third-party plugin settings (as we can assume they're values are always a path)

Nice, would be good to keep it as much portable as possible.

Link to comment
Share on other sites

I just updated with a new version 3. First post download.

I added root path to all setting that start with a "/". And also the third-party settings will now work if PW is in a subfolder from the root.

Other related files you create in the /site/ folder you'll have to make sure you use include the subfolder. Files like body_templates.js you could make a php file and add root path to any template paths.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...