TinyMCE editor doesn't show during message composition roundcube - email

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.

Related

TYPO3 - Blocked loadin mixed active content in console

On my live site 'mysite.com' I see the following error message in the console:
Blocked loading mixed active content “dev.mysite.com/fileadmin/templates/fonts/glyphicons-halflings-regular.woff2”
[Learn More]
jquery-1.11.3.min.js:4:24860
Blocked loading mixed active content “dev.mysite.com/fileadmin/templates/fonts/fontawesome-webfont.woff2?v=4.7.0”
[Learn More]
jquery-1.11.3.min.js:4:24860
I have no clue how it got there and don't remember what I changed. Where do I need to look for and how can I fix this?
I do have a Development Site ... dev.mysite.com ... and for deployment I just move the new files into the live folder.
Edit: I want to fix this problem by loading the files from my live site ... but I don't know from where I'm loading those files.
As those font-files are probably loaded from CSS I assume you already load your CSS from the dev server.
Check this out in the your browser (Network-tab).
You might see it in the HTML source. But the loading also could be initiated by javascript. so you need to check that too for any references to your dev-server.
Then you need to identify the source of this inclusion. If it's in the javascript it's obvious.
The CSS includes can be initiated in multiple places. The most common are in typoscript, so first try: go to the Template Analyzer and look for your dev-server domain. Identify the template and modify it.

Configure TinyMCE in Typo3 to run over HTTPS

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

Dynamically loaded javascript doesn't show in sources panel?

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

Can't see dynamically loaded code in Chrome Developer Tools 22

When I dynamically load a snippet of html containing javascript via AJAX, I cannot see that content in the source tab in the developer tools window in Chrome 22.0.1229.94. Tellingly, I went here
https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#js_dynamic
This page shows an example developer tools window which is out of date. There is a button on the page to load a dynamic script and it does not show up in the source tab when you do.
As a work-around, I have found that adding
debugger;
to the script and reloading it will cause it to pause in the dynamically loaded code, but unfortunately, all the line numbers are greyed out and you can't set any breakpoints within the debugger.
Am I missing something here or what?
Thanks,
Rob
When you use a library or javascript code that you have loaded it dynamically, you can use the phrase
//# sourceURL=foo.js
at the beginning of your javascript code that foo.js is the name that will be assigned it. debugger will show it with that name.
This is true in chrome, and I think in firebug too.
In this case you can place a breakpoint in the dynamically loaded javascript code.
Possible duplicate of:
Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?
Don't know if this works or not in chrome (This definitely doesn't work for me now, may be in the past).
//# sourceURL=foo.js
Working Solution
For your dynamically loaded script via ajax to appear in your chrome source tool, you need to add the following line at the start or end (I prefer) location of your script file:
//# sourceURL=foo.js
And your script with name foo.js will appear at the left pane of source tab under (no domain) dropdown
->localhost
-- source/src
->(no domain)
-- foo.js
Alternatively you can add the below line in your script anywhere between the scripts.
debugger;
In chrome, you can use " debugger; " statement to break at a statement when debugger panel is open. Chrome will simply ignore this if the debugger panel is closed.
This will help stop your script in debugging mode and you will see your script in source (debugging) panel with name like VM****.
Hope this helps.
You can use //# sourceURL. Chrome doesn't seem to be supporting //# sourceURL for inline scripts. However, it does work on eval expressions. This article gives more details about naming eval blocks and naming of any anonymous functions in your code.
Instead of using eval, you can try embedding a script tag or JSONP may be.
Varunkumar Nagarajan
for me it happened on nodejs project.
i restarted server and open in new tab my app and tada!..
Alternatively, to fix this problem you can open developer tool in a seprate window by clicking the icon. Now reload your script, and it will shown in script tab as expected. I know this is not a solution but a work arround.

TinyMCE: Copy-Paste from Google Docs

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.