TinyMCE Wordpress wpview 'gallery' after drag & drop - wordpress

sorry for the title, but it is hard to describe my problem/ question in a short sentence or title.
So here is my story:
I am writing a WP plugin, which replaces the original [gallery] shortcode. For having a correct "preview" in visual editor (TinyMCE), I also slightly modified (by replacing it) the wpview plugin. But just small changes, like removing the 'Remove' button from the inline toolbar.
All works pretty well so far. One can switch between HTML and Visual mode. The [gallery] shortcode is replaced with the HTML output in Visual mode.
The only thing/ problem is, that if one selects a gallery view and drags it around, it becomes the (original) element (with the [gallery] shortcode).
I have really no idea why and where this happens!?
So my first question is, if anyone has an idea?
Searching for a solution/ workaround for this issue, I would also like to know, if there is an event fired, when a drag & drop action ends in WP TinyMCE?
I realized, that for a drag & drop action TinyMCE appends a element with class attribute "mce-drag-container". Maybe I have to monitor the iframe document for the existence of this element (to call a function when it is removed)?
Any ideas, tips or hints for this?
The last option I could think of would be to make the wp gallery views non-draggable.
Unfortunately I could not find any information on how to do it. If it is possible in the end?
So if anyone has a clue ...?
Any help is very much appreciated.
Many thanks in advance.
Greetings
Gunther

Have you tried listening for a general content change and checking if it's a dragged image?
All TinyMCE editor events can be found in the docs: https://www.tinymce.com/docs/advanced/events/

OK, after some further investigation I found the function that caused my "problem".
It is the following (in wpview:
// Make sure views are copied as their text.
editor.on( 'drop objectselected', function( event ) {
if ( isView( event.targetClone ) ) {
event.targetClone = editor.getDoc().createTextNode(
window.decodeURIComponent( editor.dom.getAttrib( event.targetClone, 'data-wpview-text' ) )
);
}
} );
In my case this is an "unwanted behaviour", as I wanted the view to stay intact/ as is.
So the solution (in my case) is just to delete/ do not use this event/ function.

Related

Tag links not working in beautifulhugo blog

I'm trying to build a blog using a combination of RStudio/blogdown and using the beautifulhugo theme from halogenica/beautifulhugo. When I create a new website using the stock template from github and the RStudio GUI/serve_site() everything works fine (as far as I can see) except the tags on the main page don't work (when I click them they say my computer isn't connected to the internet). I'd like to find out how to fix this... or learn how to work this properly, before I start changing stuff in the stock setup/building a blog.
This tag issue is repeated on each posts' page and on the dedicated "Tags" page when I click "View all" under each tag.
Am a complete noob here - am likely doing something wrong. I managed to "fix" the "View all" issue using https://github.com/halogenica/beautifulhugo/issues/142, but I'm guessing there is a more general issue with what I'm doing: I need to fix it once centrally, or perhaps perform a similar modification to other parts of the code?
Never mind - I found out what was wrong. The above fix corrects one of the issues in terms.html (layouts/_default). In the same folder there was an "error" (which I'll no doubt find out is correct at some point in the future) where there was an extra "/" being put into the tags link. I had to change
{{ . }}
to
{{ . }}
in both list/single.html in the same folder as above. Note these only differ in the slash before tags.

Custom tab icon based on site url

In Firefox, I wish to change the tab icon based on the url of the site -- is this possible?
The closest I've gotten is the following (in userChrome.css):
tab[label*="title of site"] .tab-icon-image { ..custom favicon... }
Which works! But as soon as you browse the rest of the site, as the page titles change, it no longer changes the icon, obviously.
I do not wish to use an extension, I'd like to achieve this in css or some sort of profile tweak, if at all possible.
Good news,
I was able to figure this out without the use of javascript:
tab[image*='sitename'] .tab-icon-image { ..custom icon.. }
Hope this helps anyone looking for this type of functionality :)

Drupal 7: When I make changes to a block, previous edits are replaced with the new once instead of adding up to the previous edits

I have a drupal site built by a freelancer, there are few things which were confusing.
When I click the edit button for a node, I see the CkEditor - I tried adding HTML tags and some css to tags. Then I saved it. I found few more changes have to be done, so I clicked the edit button on the respective node and I found the tags/css I added were missing.
Similarly I clicked the edit button for some other node and I did not do anything, I just clicked the save button. The output was completed distorted(because few css was missing and some tags were missing too).
P.S - Am very new to Drupal and this might be a basic question. Please bear with me.
Set the text filter to "Full html" then click on "source" to insert html tags and css. Otherwise (surely a better solution) install the Ace editor, a very useful module with a syntax highlighter for html, php, and more.

changing body classes based on page tpl.php template

I haven't quite the right process to change the body classes based on the page being viewed.
I have about 20 or so pages within a subsection that all have a different background color and reversed nav links from the main site.
I can't figure out if there is some kind of preprocess function to use (and which) in template.php or if I should do something specifically in the certain xx-page.tpl.php file.
Just adding an ID to the body tag in the xx-page.tpl.php isn't reliable due to browser caching.
I've seen this snippet:
if (drupal_is_front_page()) {
$vars['body_class'] .= ' home';
}
however, "is it the front or not" isn't enough because it's also not just a page, it's a specific page but I've either missed the syntax or am doing something wrong.
Is this a case where I need to create a custom function and if so, is the template.php page where it goes?
also, I'm in Drupal 6.26
Thanks
Are you looking for this function?
http://api.drupal.org/api/drupal/includes!theme.inc/function/template_preprocess_page/6
You might also want to have a look at the Context module.

connection symbols in wordpress

I want to add some javascript in wordpress, something like
if(iNum==0&&iNum+1!=l)
It shows up wrong, in the source code I found & became & how do I solve it? Thanks.
if(iNum==0&\& iNum+1!=l)
Where did you put that code?
To insert arbitrary javascript code, you need to use HTML mode in post / page edit window.
To do that, just click on 'HTML' just above editor window (to the right of Upload/Insert tools)

Resources