I'm trying to use within wymeditor the same styles that are on my website. Unfortunately this editor is barely documented, so I don't really know how to do it.
The documentation implies something like you can use a stylesheet where you define everything in some form, and it will be parsed and used in the editor. I could do this, but only with the classes (second box on the right panel). The documentation gives an example, but only for the classes, not for the containers. There's a link to a full stylesheet, but it's a dead link, and the stylesheet used in the examples only define classes and no containers.
So how would I make for example a red h1 in the editor? Or at least in the preview.
I would be really glad if someone linked or gave a full example of a stylesheet where containers like h1 and p are also formatted and used in editor. If this is not possible, what are other ways to do it?
EDIT:
I could inject CSS to the iframe with postInit:
postInit: function(wym) {
var $head = $(wym._box).find('iframe').contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: costumIframeCss,
type: "text/css"
}));
}
Now the only thing that I need is to do a similar thing to the preview dialog. Maybe with the postInitDialog(wym,wdw). I don't really know how yet. The big problem there is that I need to differentiate the preview dialog from the other dialogs.
Update:
I saw that you have access to dialog window as wdw, when using postInitDialog. Thats cool. The way you did it (looking at your update) the same you you can for Diaolog too
Look at the following image. I debugged the Preview dialog, as it opens.
Look at line no. 41
Following what you did to the editor, the same can be done to the Preview
At line no. 41, you can get the head and append the style in the same way
var $head = $(wdw.document.body);
$head.append($("<link/>", {
rel: "stylesheet",
href: customPreviewCss, // CSS for Preview Dialog
type: "text/css"
}));
Initial Answer:
As I understand, you want the styles to take effect while you are editing. Ideally, for making an h1 red in color while editing (or any such customization), you have only the following options:
Use the proper classes, as explained by the documentation - The very
purpose of an editor is this. Customization should be done on top of
what is there
Edit the default stylesheet which you have linked or
is loaded when editor is active (you can check that using inspect
element) This is explained below
I see that when you are using the editor, it loads in an iframe. An iframe has its own styles. Now, inspect the element. In your case its an h1, but I am using the p tag from the example
See that it loads the styles from another file - wymiframe.css, line no. 51 for a p tag
So if you want to change or add your own styles, go to that file. (If you hover own it, you get the file path, or right click and open in new tab and check from the address bar)
Add or edit the style of h1 there. Done.
Also, you can go to the respective html file in the wymeditor/iframe/default folder. Add your custom link to your own css file. In this file, do all desired customization :)
Hope it helped !
As you see those are just the samples. You can't use that as an editor online. You 'll have to download that and try using it.
http://files.wymeditor.org/wymeditor-0.5/examples/
The above shows the list of examples. In that you have tried with the first link.
To download it go to this link.
http://www.wymeditor.org/download/
Select the recent stable versions for less flaws.
Hope this helps.
And as you have asked it works very well in the preview, when submitting nothing is getting reflected.
To achieve that in the preview, click on the HTML icon that is present at the second last position.
Write your own code, clicking on preview gets your result in a new pop up window.
Related
I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at:
https://rads-198409.appspot.com
If you resize (to a smaller size) the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined.
Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content.html to point to the right files). Below are links to the code:
Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol
Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
This is why:
The links take you nowhere. #home (or # then whatever) is referring to an element in the page. This means that the link doesn't actually take you anywhere, unless you actually change the link to something else.
You're using a w3schools template. Come on, man!
Explanation on #1:
Say there was a footer at the bottom of a page, named "footer". To jump to that element, all you have to do is put #footer at the end of the url, and your browser will jump your screen to the bottom. Similarly, the #home hash means that it goes to a place where an element called home is. In this case, that's the top. The other buttons though, refer to different elements. The problem is that these elements don't exist in the template. To make them work, you must change the url to a real working url, or create elements with ids such as "news", "contacts", and such.
I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!
I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.
Has anyone created custom self-closing non-html tags with attributes in tinymce?
I have tried the same on the lines of tinymce's pagebreak feature.
I went ahead and unminified the plugin.min.js associated with pagebreak.
I started tweaking the code by adding a pop-up to accept attributes for the custom tag.
I'm inserting my custom tag which is displayed to the user on UI as a logo image.
On clicking 'source code'(<>) from toolbar of tinymce, we must see only :
<mycustom attr1='value1' attr2='value2'/>
To the end user its meaning will only be an image, similar to how page break works.In page break, a tag is inserted in tinymce on viewing src, but actually on UI of tinymce editor we see dotted lines image.
----------------------
----------------------
This is achieved using 'Resolvename' function in pagebreak plugin.min.js
I am able to create the desired tag and pass attributes inside it, however when I click 'source code'(<>) plugin,
I see the tag:
<mycustom attr1='value1' attr2='value2'/>
in code view of tinymce, but on clicking 'OK', everything becomes empty!!
I read in many places that configuration in tinymce plugin using:
extended_valid_elements : "mycustom[*]"
&
closed: /^(mycustom)$/
does the magic, but this did not work for me :(
I am not able to put screenshots because of low reputation:(.
Anybody has solution for this?
Thanks in advance.
Are you able to see the coding of a Javascript function on a webpage your viewing? Is there a way using Google Chrome DevTools for example?
Specifically, I want to figure out how to code something like this
!Example 1
from this page
http://www.indeed.com/cmp/Bruce-Productions/jobs/Graphic-Designer-0a8d9cff06bf2790
Thanks in advance for any help!
Yes there is a way to look at all of a webpages html, Javascript files, and CSS using Chrome.
Open up the page in chrome, right click on the page and select inspect element (or press ctrl+shift+I).
From there you can navigate the different elements on the the page and the structure of the HTML file.
To get at the Javascript and CSS files switch over to the sources tab and look through the folders on the left to find the file you are looking for.
A word of warning, depending on the site the code that they are using may be minified (most all of the white space removed, and lots of variable names and other things shortened) or otherwise very difficult to read. If you are looking to do something more specific then I would recommend searching for that, or posting a question regarding that problem.
If you want to view the Javascript code, you can right-click the page, then select Inspect, then navigate to the javascript line by highlighting or selecting that line with .js extension and then position your pointer in the .js file, right-click & select Reveal in Sources panel.
In the browser you do right click to open a menu and select "View Source Code". Then you can read or save that page to analyze the content for any image or script.
But your question is so generic maybe you should try something basic and try to builds thing from there. Otherwise make a more specific question of what you want to do.
You can check it by opening the inspector in your browser and selecting the "coverage" menu. Then click on the "type" column until you find the .js files.
It is pretty much it, but you can read more details here: https://developer.chrome.com/docs/devtools/coverage/
I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container