I have to prevent tinymce from stripping out style attribute.I have defined extended_valid_elements for that and It's working in firefox but not in chrome.
I have defined like that :
'extended_valid_elements' => "#[id|class|title|style|data-options|data*],a[name|href|target|title],#p,-ol,-ul,-li,br,img[src|height|width],-b,-i,-u,-span[data-mce-type],hr",
'inline_styles' => true,
'verify_html' => false,
What can i do ?
Thanks For any Help.
Related
I am reacquainting myself with Rails and I am really liking Active Admin. I would like to get tinyMCE working with it for use in text areas. However, any instructions I find are incomplete. For some reason, I think that I am missing something really simple here.
So, for example, I have tinymce-rails installed (3.4.9) and followed the instructions (https://github.com/spohlenz/tinymce-rails). However, here's where I think I failed: actually initiating tinyMCE. According to the doc, I have two options:
use the <%= tinymce %> helper or...
initialize it like the following tinyMCE.init({
mode: 'textareas',
theme: 'advanced'
});
I tried adding the latter to my active_admin.js file to no avail.
If someone could guide me on this, I would be most appreciative.
I got it working doing the following things (outside of the install described at the repo)
In admin/my_class.rb:
ActiveAdmin.register MyClass do
form do |f|
f.inputs do
f.input :body, :input_html => { :class => "tinymce" }
end
end
end
In initializers/active_admin.rb:
...
config.register_javascript 'tinymce.js'
This was what actually got the tinymce.js script to show up in the head of the admin layout.
In javascripts/active_admin.js:
//= require active_admin/base
//= require tinymce
$(document).ready(function() {
tinyMCE.init({
mode: 'textareas',
theme: 'advanced'
});
});
After doing those things, that body input (text area) had a fully functioning editor on it.
Do your textarea inputs have a 'class' attribute or something that tinyMCE can hook into? Does it work from the javascript console (firefox/chrome)? Have you checked the presence of tinymce.js in the head(source) of your page.
I got it working with a form partial, and I had to give a class to the input element so tinymce could hook to it.
<%= f.input :literature_nld, :input_html => { :class => 'tinymce', :size => "80x4" } %>
Good luck
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.
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',