Folks,
My company needs to support the following workflow:
- There's rich content getting created in Google Docs (with simple formatting - bold/italic, as well as hyperlinks)
- That content is then pasted into an internal CMS that uses TinyMCE.
Problem: all formatting gets lost when pasting stuff in.
Already tried the "paste from Word" plugin - it doesn't work.
Please advise. Thank you!
UPDATE:
I narrowed the problem down to Google Chrome. Firefox works just fine. I also used the paste_pre_processing() callbacks - the data gets corrupted before getting in there.
I ended up giving up on the Paste plugin into TinyMCE. Instead, I used the undocumented valid_styles property of TinyMCE. This solved the problem fine for my scenario. Here's the config snippet we ended up using:
valid_elements: "a[href|title|target],del,b,strong,del,i,blockquote,p,br,em,ul,li,ol,span[style]",
valid_styles : { '*' : 'font-weight,font-style,text-decoration' },
I know this question was asked a long time ago however I am making an application that requires a copy and paste from google drive into tiny mce. This is actually fairly simple with the free paste plugin. Simply remove the filters so that it can copy in all of the data.
tinymce.init({
selector: 'textarea',
plugins: "paste",
paste_data_images: true,
paste_enable_default_filters: false,
paste_remove_styles_if_webkit: false
});
Your problem is a somewhat complex issue.
First you need to make sure that tinymce does not remove tags and tag-attributes that it recognises as invalid (have a closer look at the tinymce configuration options valid_elements and valid_children).
Second you will have to implement an own handling of the paste process.
There are three way to do this. The most time consuming option is to write an own custom paste plugin and replace the given one. The other options are ways to configure the paste plugins and define own functions to interact with and change the pasted content.
The seetings paste_pre_processing and paste_post_processing are the way to go here.
Related
I am having a problem using the "Tabs" component: https://material-ui.com/components/tabs/ In fact, when developing locally, the rendering of the component is fine. But pushing to the server, it looks weird (with differences in the borders on each side of the bar).
Moreover: when refreshing the page in which it has been embedded or browsing manually to this page, the whole template is broken all of a sudden!
I tried generating a build folder locally and launching the page from that build, and fell back on the same problem.
Thank you in advance for your help
From your description, I saw that your "build" is not work even in local development. That's mean it should not work on the production, of course.
The thing is, what is your actual "build" action? Depends on what library/framework you use, but basically with Material-UI, most popular problem comes from not load some CSS before using it's components.
Please read here first: https://material-ui.com/guides/server-rendering/#server-rendering
Just in case you use Gatsby, read here: https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/.
I'm using Gatsby and use this following config to fix some CSS issues.
stylesProvider: {
injectFirst: true,
}
Hope this help.
we are using Typo3 7.6.6 for our new homepage. To simplify the process of writing new articles, we introduced the extension TinyMCE4 as TYPO3 RTE. On our test-system tinyMCE works fine, the editors are satisfied.
To prepare for production environment we introduced SSL. Hence the homepage is referenced over https://....
Since this change tinyMCE no longer appeared. After some research we found out, that the tinyMCE extension tries to load a specific dynamically generated js-file tinymceConfiguration....js over HTTP (not over SSL as preferred).
Since we have a strict policy, the server doesn't allow the client to catch the script without using SSL. Unfortunately we cannot change that policy.
The question is: where does the extension get the URL from. Can I overwrite it to reference the https://.. path?
I already tried changing
config.baseURL
tinyMCE.init({
...
document_base_url : "https://.."
});
But it didn't work.
Does anybody have an idea?
Regards,
Thomas
you could try to tell your browser to use "Content-Security-Policy" in that way all http links are rewriten by the browser itself. Maybe the lazy way.
https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https?hl=en
http://www.html5rocks.com/en/tutorials/security/content-security-policy/
Regards
Pete
I am currently writing a replacement for the plone dialog infrastructure. Mostly for personal use and fun, but available on github as collective.js.jqueryuidialog.
Currently I'm struggling to manage the initialization for the tinyMCE editor in the dialogs.
I tried to get the missing scripts with getScript, but then I get stuck. I googled and found some init hooks, like this one
$(document).bind('loadInsideOverlay', function() {
$('textarea.mce_editable').each(function() {
var config = new TinyMCEConfig($(this).attr('id'));
config.init();
});
});
but none worked.
Any ideas or recommendations to read further?
Update
I updated Products.TinyMCE to version 1.3.3 and proceeded through the upgrade steps in the ZMI. All other functionality is still working (Yeehaa).
I realized, that the call seems to have changed, since all pages with a tinyMCE on it, now issue a get command to a view named tiny_mce_gzp.js that seems to deliver the actual configured editor from the portal.
Actually I am digging the source to find that call and copy it's behavior.
For example, I have an ajax request and it returns <script src='buggy.js'></script>.
Problem is, it doesn't show up in sources or resources panel. That means I can't do all the cool stuffs like adding breakpoint and inspecting the elements as they run.
I could only see the source of the js file under the Network panel.
Is there anyway to make chrome add them to the sources panel?
Or how do you guys go about debugging dynamically added scripts?
Using Canary.
I was having the same problem, and I found a workaround that is better than the deliberate exception. It does still require changing the code as opposed to just setting a breakpoint inside the chrome dev tools.
I tried using the "//# sourceURL=dynamicScript.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.
Please refer to https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript
(Original link is broken-- archived link below)
http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript ("Breakpoints in Dynamic JavaScript").
I am working on a new project on roundcube and after long hours of sleepless nights managed to get all the necessary software installed and configured roundcube on the test server. I am able to log into the server and send and receive messages, but the problem is that I am unable to see the TinyMCE editor when I am composing the message.
The following parameter is enabled in the main.inc.php file:
// compose html formatted messages by default
$rcmail_config['htmleditor'] = TRUE;
but still I am unable to find the editor. When I view the source of the loaded compose page, I am able to see the tiny_mce javascript file loaded which makes it even more confusing why the editor is not shown..
Am I missing something?? Please help...
You need to call a bit of javascript to amek the editor appear.
Ideally there is something like the following script on your page:
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced"
});
</script>
This will transform all textareas on your page into tinymce instances.
There are many configuration options which allow to define what buttons you want to see where and much more...
Here is a list of all possible configuration options.
Thank you for your information, but I tried what you said, it didn't work :(
However, the actual issue was that the tiny_mce editor js file was not found on the server. This I was able to confirm once I was the apache error logs. I uploaded the tiny_mce editor js file and now I am able to see the editor during composing a message.