TinyMCE appends links to the current URL - javascript

I'm running into this weird issue with TinyMCE where selecting a text and adding a link to it without "http://" will cause the new link to append to the current URL.
Example (assume my website is www.example.com):
Now under my settings "click" will link to "www.example.com/linkexample.com". I need it to link to "http://linkexample.com" instead, without manually adding "http://" in the "Url" field in the popup.
I've been trying different solutions online but nothing seemed to work for me.
Here is the list of solutions I've tried so far, none worked for me:
TinyMCE: How to prepend 'http://' to URL if it's not there
All examples from : http://www.tinymce.com/tryit/url_conversion.php
P.S. I'm running the latest TinyMCE 4.1.7

I'm done to try this one. it's worked for me (tell me if this thing
worked for you)
Go to link plugin on tinymce (tinymce/plugins/link)
Edit this file plugin.min.js (tinymce/plugins/link/plugin.min.js)
Find www using Ctrl+F in your editor like Notepad++ or Sublime Text
You will get this code /^\s*www\./i delete www\.
Now your code become /^\s*i
Now Save it. Done
Refresh your code using TinyMCE.
Now try use linkexample.com, You will get notification to add prefix http://
Done. I hope help you out.

In version 4.x this functionality is built in. But unfortunately it's not mentioned in the documentation, it's only documented in the changelog so I would imagine this is widely unknown.
$('textarea').tinymce({
...
link_assume_external_targets: true
...
});

I actually replaced this code:
/^\s*www./i.test(e)
with
!(/^\s*(http://|https://)/i.test(e))

Related

django-tinymce changes relative urls

tinymce to manage my contents. it's ok, works but there is a small thing that i a curious to know is that why tinymce changes urls by it's own. for example:
i put a link and using url like /post/post1
but whenever i check my url, tinymce makes it like: ../../../../../post/post1
however, it's ok and does not break my link, but that feels bad to see!
this also happens for images
Django:3.2.12
django-tinymce: 3.4.0
tinymce (by it's own): TinyMCE 5.10.1
Try adding to tinymce.init - convert_urls: false

Broken link - "/a" in JQuery 1.9 Js file

When we had done security audit of our project, we got broken Link "/a" vulnerability.
After searching for link throughout project we found link in JQuery-1.9.js java-script file that we are using in our project.
small part of code in that JQuery-1.9.js -
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
hrefNormalized: a.getAttribute("href") === "/a",
As per my understanding this code part helps for making it(JQuery) compatible with IE 6/7/8.
hrefNormalized is used to check that anchor tag is giving href value as full URL or exact href , which is issue in IE version.
The better explanation of this part is given in
https://www.inkling.com/read/jquery-cookbook-cody-lindley-1st/chapter-4/recipe-4-1
I want to remove this vulnerability but i don't want to remove or change code in JQuery js file.
So, My question is why did not JQuery designers used "/#" instead of "/a" .What is the problem of using "/#" in that code.
Earlier same question is asked by someone to JQuery Team,but they told that it not the problem from Jquery.
For reference of that ticket
http://bugs.jquery.com/ticket/10149
Help me to solve Or Is there another solution?
Thank you
This is not a vulnerability but a false positive. The security scanner interprets the "/a" string as a link, which it is not.
Even if jQuery creates the link in the DOM, it's not clickable or visible to the user. Your website does not actually have a real link to /a anywhere.
I would ignore the problem without changing anything.
Maybe, if you want this hrefNormalized: a.getAttribute("href") === "/a", to be transformed into this hrefNormalized: a.getAttribute("href") === "/#", but you don't want to touch the jQuery file.
Put that second one in a script in a an order so that the browser reads your script after reading the jQuery file, so it mashes.
Anyway, I never had issues with jQuery before, check your code first.
If you don't want to have your views with scripts, put it in a js file and link this file to your view after the jQuery file.
Hope it helped you, or at least gave you some ideas to solve your problem. Good luck, let us know how it goes! ;)
EDIT:
<script src="~/JQuery/jquery-2.0.3.js"></script>
<script src="~/Scripts/Fix.js"></script>
If you do something like this, the browser reads first the jQuery, then it reads the Fix.js. Inside the Fix.js, you put the function or paramater you want to change from the jQuery.
So the Browser will get the latest one it reads if they are equal.
For example:
function whatever (){ //This in jQuery file
//things #1
}
function whatever (){ //This in Fix file
//Different things #2
}
This way the browser chooses the Fix.js one, because was the last he read.

CKEDITOR add plugin to source view

When using the find/replace plugin for ckeditor it is greyed out on the source view. To enable this I have found that you need to add:
modes: { wysiwyg:1, source:1 }
However, i wont lie, im pretty unsure where this should be placed.
It hopefully can be found in this link http://jsfiddle.net/SBmKz/ as it is 384 lines long.
I have tried researching this and have found a few examples of it in other plugins and also how it is done in the ckeditor.js (n.modes={wysiwyg:1,source:1}) but cant seem to get it to work within this plugin.
Many thanks
Find/replace option is created to work on DOM, not on a plain text. That's why it is disabled in source mode. Actually, it would be a completely new feature the find/replace in source mode - especially if it had to omit tags.

Update the CSS of a Website without refreshing the Page

I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.
So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?
Here you are: http://cssrefresh.frebsite.nl/
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
Just insert the javascript file and it works!
But note: It only works when you have the files on a server!
Edit: LiveStyle
If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.
If you want more information about this awesome plugin, please read the Post by Smashing Magazine
With jQuery you can create a function that reloads external stylesheets.
/**
* Forces a reload of all stylesheets by appending a unique query string
* to each stylesheet URL.
*/
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
Have a look at http://livereload.com/.
It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.
I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.
Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.
Some examples (feel free to suggest some others):
Chrome:
tin.cr (includes automatic reload, and can persist in-browser changes to source files)
CSS Refresh
Firefox:
CSS Reloaded
CSS Refresh
Here is my little Project. Please give it a try
CSS Auto reload on Github
Yes you can manipulate the CSS via jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
You could also use the toggleClass method.
http://api.jquery.com/toggleClass/
http://jqueryui.com/demos/switchClass/
Firebug for FireFox.
It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.
Advantage over JS hacks is that you can't copy this accidentally to your production instance.
You are looking for Live Reload:
It's available as a browser extension and easy to implement
http://livereload.com/
The new open-source code editor, brackets, has a Live Development feature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!
Firebug for Firefox is my prefered method:
https://addons.mozilla.org/de/firefox/addon/firebug/
You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.
If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.
Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.
This might help -> chaicode
Its a live CSS, Javascript and HTML editor that is opensource and a wip.
github

Best way to create custom html joomla link

I'm new to Joomla , just want to understanding the best way to implement this.
http://jsfiddle.net/PSYCKIC/JyKJf/
The IDEA is to use that as a link , i click there and lead me to a article or link. (didn't include the javascript in the example)
PROBLEMS :
-I was doing as a custom HTML, but the problem probably have to use javascript for the link but when i save it save without javascript (and probably it a little hardcoded)
- doesnt work for div
LOOKING the best way:
1) Have some ideas , one was to create a module, or something where i just put the image , link of the article and then is always automatically ( but not sure how to import javascript/jquery trough modules ANY HELP? Someone can help me building?)
2) any good module already created for this?
3) Tutorial than can help me understand?
Like a solution where i have possibility to reuse the code not hardcoded.
Thanks in advance.
There are some Joomla extentions which allow to insert into joomla site any code
http://extensions.joomla.org/extensions/edition/custom-code-in-modules/8651
http://extensions.joomla.org/extensions/edition/custom-code-in-modules/2861
If you want to include such code into article, you have to publish module in any position and then use this shotrcode {loadposition _any_position_}.
I hope it will be helpfull
Which Joomla Version are you using?
You have to disable the built in filtering of joomla and your editor:
http://www.tutorials2learn.com/2010/02/cms/fix-tinymce-editor-strips-flash-embed-code-joomla/
for your eitor, go to plugins -> editor -> options -> filter onload ...
you dont need an extra extension for just a simple javascript link

Categories