TinyMCE - How can I turn off Visual Aids for printing? - javascript

I recently added TinyMCE 4.0b2 to a web application I've been developing.
I needed to have visual aids turned on for editing, however turned off when printing and spent a fair amount of time looking for a solution through their forums, StackOverflow and google to no avail!

So... I decided to investigate the issue myself!
To get this to work I had to manually 'adjust' the print command of the print plugin.
The following fix applies to TinyMCE v.4.0b2, the version available at time of writing; it may or may not work with previous and future versions of TinyMCE.
The print plugin file can be found in the js/tinymce/plugin/print/ directory.
Open the plugin.min.js file in your favourite editor and you'll see something like this:
tinymce.PluginManager.add("print",function(e){e.addCommand("mcePrint",function(){e.getWin().print();}),e.addButton("print",{title:"Print",cmd:"mcePrint"}),e.addMenuItem("print",{text:"Print",cmd:"mcePrint",icon:"print",shortcut:"Ctrl+P",context:"file"})});
After poking around the tinymce source code I found the hasVisual editor property and mceToggleVisualAid command. I then added these two to the printing plugin as
if(e.hasVisual){e.execCommand("mceToggleVisualAid");}
just prior to the code calling
e.getWin().print();
The finished product looks like so:
tinymce.PluginManager.add("print",function(e){e.addCommand("mcePrint",function(){if(e.hasVisual){e.execCommand("mceToggleVisualAid");} e.getWin().print();}),e.addButton("print",{title:"Print",cmd:"mcePrint"}),e.addMenuItem("print",{text:"Print",cmd:"mcePrint",icon:"print",shortcut:"Ctrl+P",context:"file"})});
I hope this helps someone struggling with this issue in future.

Related

Visual Editor Not Working 4.7

My WordPress visual editor is not working. I tried all of the solutions on the Google but nothing changed.
Visual editor is not disabled for me (Checked it from profile page and enabled/disabled for times)
CONCATENATE_SCRIPTS to false not working.
WP_DEBUG to true not working.
Tried with different users not working.
Disabled all plugins not working.
Tried with different browser/computer not working.
No error output on JS Console
Tried with plain permalink, not working.
I’m really getting crazy with it. I’m using latest WP version and 2017 theme. Any other solutions?
Edit: I checked the Network Tab on the Developer Console, tinymce.min.js file doesn't exist there. It's not loading. Loaded JS Files:
jquery.js?ver=1.12.4
jquery-migrate.min.js?ver=1.4.1
utils.min.js?ver=4.7
plupload.full.min.js?ver=2.1.8
hoverIntent.min.js?ver=1.8.1
common.min.js?ver=4.7
admin-bar.min.js?ver=4.7
heartbeat.min.js?ver=4.7
autosave.min.js?ver=4.7
suggest.min.js?ver=1.1-20110113
wp-ajax-response.min.js?ver=4.7
wp-ajax-response.min.js?ver=4.7
jquery.color.min.js?ver=2.1.1
wp-lists.min.js?ver=4.7
core.min.js?ver=1.11.4
widget.min.js?ver=1.11.4
mouse.min.js?ver=1.11.4
sortable.min.js?ver=1.11.4
postbox.min.js?ver=4.7
position.min.js?ver=1.11.4
menu.min.js?ver=1.11.4
wp-a11y.min.js?ver=4.7
autocomplete.min.js?ver=1.11.4
tags-suggest.min.js?ver=4.7
tags-box.min.js?ver=4.7
underscore.min.js?ver=1.8.3
word-count.min.js?ver=4.7
post.min.js?ver=4.7
editor-expand.min.js?ver=4.7
thickbox.js?ver=3.1-20121105
shortcode.min.js?ver=4.7
backbone.min.js?ver=1.2.3
wp-util.min.js?ver=4.7
wp-backbone.min.js?ver=4.7
media-models.min.js?ver=4.7
wp-plupload.min.js?ver=4.7
mediaelement-and-player.min.js?ver=2.22.0
wp-mediaelement.min.js?ver=4.7
media-views.min.js?ver=4.7
media-editor.min.js?ver=4.7
media-audiovideo.min.js?ver=4.7
mce-view.min.js?ver=4.7
jquery.imgareaselect.min.js?ver=4.7
image-edit.min.js?ver=4.7
svg-painter.js?ver=4.7
wp-auth-check.min.js?ver=4.7
quicktags.min.js?ver=4.7
wplink.min.js?ver=4.7
media-upload.min.js?ver=4.7
wp-embed.min.js?ver=4.7
wp-emoji-release.min.js?ver=4.7
Had the same problem with no solution so far, but:
when not only deactivating but also deinstalling TineMCE Advanced, everything is working as desired.
Already opened an issue on their wordpress-Plugin page.
Thank you for your answers, I found my problem. My wp-tinymce.php file has 777 permission btw server was blocking this file.
My solution was making its permission to 644..
Same problem here with a fresh install of version 1.4.7.
No problem with my updated websites !
EDIT
Solution to fix the issue:
Copy /wp-admin/ and /wp-includes/ folders from an automatic uptdated WordPress website.
Replace all these file into your broken website.
If someone want these files, I created a link here.

Strange Message when Pasting Text

I have no idea why this happened, but I am no longer able to copy text on my website (in Wordpress), kinda. I can paste text, but not copy text. And I can go to any other website and copy and paste text, but just not on my own. Both methods of copying (right click copy or control + C on windows) does not work on my website. But anyways, this problem applies only within text fields, like the style editor, header editor, the "quickpress" text field on the dashboard and even on the search field of my website. So I tried the following to fix this issue:
1) Disable my keyboard driver and restart my computer
2) Uninstall and reinstall my internet browser - Google Chrome
None of the above worked. But just recently, I I was able to copy and paste <script> text bit in my header.php file. I couldn't copy any other text but this and a few other snippets of code... which is very weird. But anyways, here is a code/text I copied and also what I get once I paste the code:
Original text that I copied:
<script src="http://code.jquery.com/jquery-1.9.0-min.js" type="text/javascript"></script>
Text I get when I paste original above text:
See more at: http://www.mywebsite.com/wp-admin/theme-editor.php?file=header.php&theme=mytheme2%2Fthemez2#sthash.WVvNmB7H.dpuf
Could this be a potential hacker or intruder into my website? I can't see any other explanation for this very strange error at this point. If anyone could help fix the copy and paste abilities for my website or come up with an explanation to this odd problem, it would really mean a lot.
Update:
This problem only persists in Google Chrome and Safari... not Mozilla or IE. And I stripped all of my java code and the problem still remains Hope that helps.
I work on thehollywoodreporter.com. Our editors could no longer use the Drupal 6 CMS because of this sharethis change. When they tried to copy from one field to another in the cms, it would take the string and turn it into:
See more at: <text pasted>&action=edit#sthash.mOyzIP9P.dpuf
I seriously thought our site had been hacked for like 10 minutes. Luckily, the dev community started posting about it, and pointed out it was the new CopyNShare feature sharethis added. I commented out the sharethis code, so our editors could resume publishing, and we got on the phone with our sharethis contact, and they had us change this:
<script type="text/javascript">var __st_loadLate=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
to
<script type="text/javascript">var __st_loadLate=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "<your publisher key>", doNotHash:false, doNotCopy:true,hashAddressBar:false});</script>
Apparently, they made a change to their code so that you MUST add 'doNotCopy: true' in order for it NOT to add this hash when you cut and paste within your site! This is their new "product" CopyNShare.
I told them "I don’t think it was popular move to roll out this feature as a new default like this. I seriously thought our site had been hacked for 10-15 minutes. Not fun."
They replied: "I definitely understand your concern, as we share the same concerns on the pub services team. We will be doing a "postmortem" of sorts to ensure we change this process in the future when new product features are rolled out."
As #Punit Pandey suggested, the ShareThis plugin started doing this today (February 27th 2013) without warning. You can disable this new functionality by adding the following JavaScript after the ShareThis-code has initialized:
stLight.options({doNotCopy:true});
The description for this new functionality can be found here: ShareThis CopyNShare Settings
This is happening on my website due to ShareThis plugin. ShareThis adds this tag sthash and an identification ending with dpuf, I guess, to identify website.
The problem stemmed from a plugin within Wordpress called "Digg Digg". I simply deactivated this plugin and there was no copy and pasting issues. :)
I fixed this issue in Drupal 7 by changing modules/sharethis/sharethis.module
around line 467
// Provide the publisher ID.
$stlight = drupal_json_encode(array(
'publisher' => $data_options['publisherID'],
**'doNotCopy' => "true",**
));
there doesnt appear to be any option to turn this off in the module config page. Very annoying!

Using multiple CodeMirror editors on a single page?

I'm writing a page with examples that demonstrate the use of my js library. I'd like these examples to be editable and runnable, so I thought I have these options :
Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.
Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I'm not sure how "heavy" those editors are, so I'm not sure if that's a good idea.
Have an edit button that "swaps" prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I'm not sure if I can make prettify and CodeMIrror's syntax highlighting to look the same.
Any ideas on how I should do this and why? I'm also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.
You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.
Look at this chapter for an example.

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

Aptana Studio 2 - Code Assist for JS is not working

My problem is somewhat strange. I have started developing a web page with Aptana Studio build 2.0.5.1278522500. Everything went fine up to the moment when I wanted to start writing JavaScript in a separate .js file - there's no code assist for it. In the preferences it's enabled, and - that's the strange part - it works perfectly well in the .html files (when typing code in the script tag). The only thing that could remotely tell there's something wrong is the fact, that when I type, say, "document" and hit the '.' key, the cursor disappears for a split of a second.
Did anyone have the same problem? Is there any solution to that? I'd like code assist for JS very much, without it Aptana somewhat loses it's appeal.
As CodeMonkey mentioned we can do the same at Aptana Stuidio version 3. I mean follow this path: (Preferences->General->Editors->File Associations). Select js at top list but because at studio 3 we should select JavaScript Source Editor as default. It did not work change it to another option save and again bring it back to JavaScript Source Editor (It happened for me). Now you can use it.
I found an answer to my question, I'll post because maybe it'll help someone. To get the code assist working I just changed file the default editor for .js files from JavaScript editor to Aptana JS editor (Preferences->General->Editors->File Associations, then selected *.js in the top list and Aptana JS Editor in the bottom list, then clicked the "Default" button). Now it works like a charm.
I got a similar problem on Aptana 3 Studio. I cannot reproduce the problem now and there is no option for Aptana JS Editor in 3. I think the key to solve the problem is: used the template to generate a new file, don't try to just rename a blank normal file, if so, you need to closed the file and reopen it.
Associating .js files with Aptana did not resolve this problem.
I noticed that when I type jquery(this). , I get code assistance and there was no assistance when I types $(this). So I fixed this thing temporarily by placing this statement
$ = jQuery;
at the start of my .js file, thus declaring the $ as an equivalent to the jquery function.
While writing Javascript code in HTML editor, you don't need to do that becuase you have included the jQuery reference at the top which has the above setting ($ = jquery).

Categories

Resources