Everytime i add an image to tinyMCE it converts the image URL to something stupid (removes the hostname and adds ../ or whatever it needs) , so i won't be able to use the image created by tinymce in any other level of the site !
can this be fixed somehow ? relative_urls: "false", not working
Thanks
Use this in your javascript initialization:
relative_urls : false,
remove_script_host : false,
convert_urls : true,
Get TinyMCE to use full image url instead of relative one
Before initializing tinymce i set the following variable
var system_url = "http://myserver.com/workspace/codebase/html/";
so that i am able to use system_url later for adressing images and other files like this
content_css: system_url+'js/tiny_mce/css/green.css',
Related
I'm using the following config:
formats : {alignleft : {selector : 'img', classes : 'float-left'},
alignright : {selector : 'img', classes : 'float-right'},
},
to make tiny use my custom classes for image alignment (which just set a css float of left or right) rather than applying them inline in styles.
Now, this works when I save the content and preview it, but in the tiny editor the image just stays where it is and won't float.
Inspecting the image code in Safari web inspector shows the class being correctly applied to the img element, it just doesn't.. float!
The page with the editor has access to the main stylesheet with the float-left and float-right classes too.
I'm new to tiny so perhaps I'm missing something here?
In order to see the class changes within the editor itself, you need to set a stylesheet during initialization.
tinyMCE.init({
content_css : "/editor-style.css" // http://domain.com/editor-style.css
});
That should pull in the stylesheet for your editor. Once the stylesheet is being pulled in you will have to add your styles to the stylesheet in order to see them display appropriately.
I am using TinyMCE to create a WYSIWYG editor in my webapp. I need to configure it in advanced mode for some textarea's and in simple mode for some. I am configuring TinyMCE like this.
<head>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "simple"
});
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
</script>
</head>
This configuration works and shows me TinyMCE in simple or advanced mode, based on the class of the textarea.
However, the problem happens when I submit a form. The server gets a blank for the textarea. (this problem does not occur when I use only one configuration for TinyMCE)
I did some searching and came across a suggestion which said I should explicitly ask TinyMCE to save the content before doing a submit. I tried adding this code to my form.
$('#postFeedback').click( function(){
tinyMCE.triggerSave(true,true);
alert("TextArea val - " + $('input[name=email]').val() + "- " + $('textarea.simple').val());
$('form').submit();
});
The form does get submitted, but I have the same problem. The value in the textarea is blank. I also put an alert (as shown above) to check the value of the textarea, and it is indeed blank.
Some questions to start with:
TinyMCE works perfectly well, when I have just one configuration (init). However, it gets messed up the momnent I have two? Any clue why this might happen?
Is it necassary to explicitly ask TinyMCE to save the textarea contents?
How do I begin debugging this problem?
You should initialize your editors using mode: "exact", in your inits. Then you are able to initialize a single tinymce instance using
tinyMCE.execCommand('mceAddControl', false, editorid); //editorid should be the id of the textarea
and the configurations of your inits will be aplied (I somehow got the feeling there is something pretty bad using two inits for all the tinymce editors (because it looks they get both called for all of them)).
EDIT: In order to be able to use different inits you should call mceAddControl using an initialization_object instead of an editor id only. Example:
var config_tinymce_xy = {
mode: 'exact',
theme: "advanced",
content_css : "my.css",
plugins: "code,...",
theme_advanced_buttons1 : "code,...",
theme_advanced_buttons2 : "...",
...
};
var config_tinymce_xy2 = {
mode: 'exact',
theme: "simple",
content_css : "my.css",
...
};
init_obj = {element_id:'my_editor_id', window: window};
$.extend(true, init_obj, config_tinymce_xy);
tinyMCE.execCommand('mceAddFrameControl',false, init_obj);
Can anyone tell me how to get TinyMCE to stop converting my URLs to relative links in Plone?
For example, if I enter this in the HTML source:
<img src="/images/dir/subdir/my_image.png" />
it will convert it to:
<img src="../../../my_image.png" />
I've edited tiny_mce.js (in portal_skins) to set:
convert_urls:false,
relative_urls:false,
but to no effect. I've read all similar posts here, but none really answer this question.
It's fine if it does the relative thing when users are picking images by browsing the filesystem (i.e. the catalog). I just want it to respect what I type in the html box ... so that I have the option of forcing an absolute path if I deem it appropriate. This is the standard behavior in kupu.
Any ideas?
Set convert_urls: false in tiny_mce_init.js, not tiny_mce.js. Early in tiny_mce_init.js you'll see a call to window.tinyMCE.init passing a bunch of initialisation options. In the Products.TinyMCE I'm looking at, the last option is fix_list_elements: false. Add your option there.
Edit: tiny_mce_init.js is no longer used in Products.TinyMCE 1.3.x (Plone 4.3). Instead, override the tinymce-jsonconfiguration browser view, e.g.:
Assuming you have a package with a browser layer, add in browser/configure.zcml:
<browser:page
for="*"
name="tinymce-jsonconfiguration"
class=".tinymce.TinyMCEBrowserView"
permission="zope2.View"
attribute="jsonConfiguration"
layer="..interfaces.IMyBrowserLayer"
/>
Then add browser/tinymce.py:
try:
import simplejson as json
except ImportError:
import json
from Acquisition import aq_inner
from Products.CMFCore.utils import getToolByName
from Products.TinyMCE.browser.browser import TinyMCEBrowserView as View
from Products.TinyMCE.browser.interfaces.browser import ITinyMCEBrowserView
from zope.interface import implements
class TinyMCEBrowserView(View):
implements(ITinyMCEBrowserView)
def jsonConfiguration(self, field):
"""Return the configuration in JSON"""
utility = getToolByName(aq_inner(self.context), 'portal_tinymce')
config = utility.getConfiguration(context=self.context,
field=field,
request=self.request)
config['convert_urls'] = False
return json.dumps(config)
You should add these configs into tinymce.init:
relative_urls: false,
convert_urls: false,
remove_script_host : false,
ref: https://www.tiny.cloud/docs/configure/url-handling/
An other solution is to configure TinyMCE with the control panel to use UID for every links and images, instead of path, so you don't modify any existing javascripts and don't have any relative url displayed.
In Plone 5 is possible disable TinyMCE absolute to relative URL adding variables in Advanced tab of TinyMCE Settings
Site setup > TinyMCE > Advaced
{"relative_urls": false, "convert_urls": false, "remove_script_host": false}
Further variables are available in Products/CMFPlone/static/components/tinymce-builded/js/tinymce/tinymce.js
...
popup_css: '',
plugins: '',
document_base_url: documentBaseUrl,
add_form_submit_trigger: true,
submit_patch: true,
add_unload_trigger: true,
convert_urls: true,
relative_urls: true,
remove_script_host: true,
object_resizing: true,
...
I have a page that has multiple TinyMCE editors on it. i would like one of them to have the autoresize plugin loaded and the other one i would like to stay a fixed size.
Is there any way to do this?
You can, by simply instantiating the editors with different configurations.
For example, say you have two textareas (area1, area2). Instead of using
tinymce.init({
mode : "textareas",
...
});
which will load tinyMCE in for both textareas on the page, you can instead use
tinymce.init({
mode : "exact",
elements :"area1",
....
});
tinymce.init({
mode : "exact",
elements :"area2",
....
});
with different plugins in each config.
The exact mode is usefull but don't workout in this case and others.
I'm trying to show 2 editors one in Portuguese and other in spanish (I tried fist in Engish but i'm not sure of the language code) and the interface shows only with the last language (last tinymce.init)
tinymce.init({
mode : "exact",
elements : "area1",
language : 'es',
add_unload_trigger : false,
plugins : 'wordcount',
maxCharacters : 130 // this is a default value which can get modified later,
});
tinymce.init({
mode : "exact",
elements : "area2",
language : 'pt_PT',
add_unload_trigger : false,
plugins : "wordcount table",
maxCharacters : 50 // this is a default value which can get modified later,
});
I'll try some possible solutions and edit my answer today.
I'm in the process of creating my first TinyMCE plugin. I'm including 'tiny_mce_popup.js' in the html and it's loading 'advanced/skins/default/dialog.css' by default.
I don't need TinyMCE to load this css and the only solution I have found so far is documented here http://www.mattephraim.com/blog/tag/tinymce/; and as the author suggests, it is not the most elegant solution. Please help if you know the proper way of handling this.
I found the official documentation by digging 1mm into the 'tiny_mce_popup.js' code. Basicly all you gotta do is in init() of editor_plugin.js, add popup_css as an option and set it to false:
ed.windowManager.open({
...
file : url + '/dialog.htm',
width : 640 + parseInt(ed.getLang('attachment_fu.delta_width', 0)),
height : 485 + parseInt(ed.getLang('attachment_fu.delta_height', 0)),
popup_css : false,
...
})