i find a question about SyntaxHighlighter .
But , i'm talking about the jquery plugin and Not https://github.com/RichGuk/syntaxhl
I want to highlight source code in tinyMCE
I add the following button :
ed.addButton('srccd', {
title: 'Source Code',
image: 'sourcecode.png',
onclick: function() {
ed.focus();
var newSRCjq='<pre id="s1" class="highlight">'+ ed.selection.getContent() + '</pre>';
ed.selection.setContent(newSRCjq);
$.SyntaxHighlighter.init({})
}
});
i use also another plugin (snippet),and instead of init invoke , i call the following function :
$('iframe').contents().find('#s1').snippet("java",{style:'kwrite',box:"1"});
and i don't reach to expected result.
NOTE : I don't forget to import required JS & CSS for plugins above
After one day :
Let's introduce my JQuery Compiler which is a compiler based on jQuery Syntax Highlighter v2.0.0 :
How To Use
Instead of :
$('pre').snippet('java',{box:"1-2"});
Add local or session argument:
$('pre').snippetcache('local','java',{box:"1-2"});
==>That's mean that you have pre elements . When you run the snippet above , My plugin will compile the code using jQuery Syntax Highlighter , and then save the rendered code . So, if another pre has the same code(inner text) such as one of previous pre compiled , the compiler will retrieve the rendered code form its cache .
However , when you refresh page , Cache will be removed . If you want to have a stateful compiler , use session argument value instead of local
$('pre').snippetcache('session','java',{box:"1-2"});
See demo .
This is plugin is very useful in iframe as tinyMCE. In fact , Try this :
ed.addButton('srccd', {
title: 'Source Code',
image: 'sourcecode.png',
onclick: function() {
ed.focus();
//You should have an ID which is generated automatically
var newSRCjq='<pre id="s1" class="highlight">'+ ed.selection.getContent() + '</pre>';
ed.selection.setContent(newSRCjq);
// iframe selected is the frame of TinyMCE
$('iframe').contents.find('pre#s1').snippetcache('local','java',{box:"1-2"});
}
});
Related
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
im trying to develop a plugin that render a datagrid to html element. For example in:
<div id="datagrid">
<!-- Renderizado via Backbone.js -->
</div>
I have this plugin definition:
// csDatagrid.js
(function($) {
$.fn.csDatagrid = function(options) {
// Code ...
};
}, (jQuery));
And i call the function in this way:
// csAuditarSesiones.js
$("#datagrid").csDatagrid({
columns: cols,
url: $("#sfAction").val(),
filterBy: 'user_str'
});
Chrome says:
Uncaught TypeError: Object [object Object] has no method 'csDatagrid'
Load library queue (Chrome Developer Tools):
JQuery
csDatagrid (my plugin)
csAuditarSesiones (script with code for the current page, have the plugin call)
Thanks !
EDIT 1
Apparently the plugin not load, follow code always print "Not Loaded !":
if(jQuery().csDatagrid) {
console.log("Loaded !");
}else{
console.log("Not Loaded !");
}
The reason here is you are defining your plugin in the document ready event. Therefore the elements calling this plugin must call the plugin after the plugin has been loaded.
Try defining your new plugin outside of a load\ready event such as.
(function($) {
$.fn.csDatagrid = function(options) {
// Code ...
};
}, (jQuery));
$(document).ready(function(){
$("#datagrid").csDatagrid({
columns: cols,
url: $("#sfAction").val(),
filterBy: 'user_str'
});
});
Just for refrence (surely reading it now). http://learn.jquery.com/plugins/basic-plugin-creation/
EDIT:
Is it possible you have multiple jQuery versions being loaded? This can happen when there are conflicts. Also ensure that your plugin is loaded after the javascript file and before the document ready function.
There is one other (i have no idea why I believe it is when multiple versions are loaded) phenomenom that happens and you have to add the $ call back to your ready function. Such as.
$(document).ready(function($){
//TODO: Code here
});
There is error in your immediate invoked function's last line.
}, (jQuery)); should be :
})(jQuery);
I am currently using a full-screen image slider called supersized on a site, which references the images and associated extras in a script tag like so:
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
property_1 : value,
property_2 : value,
slides : [
{image :'http://image1.jpg', title :'Name1', url :'1.html'},
{image :'http://image2.jpg', title :'Name2', url :'2.html'},
{image :'http://image3.jpg', title :'Name3', url :'3.html'},
],
// Options
option_1 : value,
option_1 : value
});
});
</script>
What would be very nice, is to be able to dynamically load a new array of images with their associated extras via ajax (jquery preferred, but vanilla js fine). Is this possible? If so, I've struggled to find any resources that explain how.
It seem that you need to code such feature youself.
See what plugin author is writing in FAQ: http://www.buildinternet.com/project/supersized/faq.html#q-4
Can I load different sets of slides without reloading the page?
This is a feature I am looking to develop out in the future. If you're hurting for it in the meantime, you can hire me for custom work.
If you need just one set of slides loaded by AJAX you can code it like that:
jQuery(function($){
$.ajax({
url: "URL"
}).done(function ( data ) {
$.supersized({
// Functionality
property_1 : value,
property_2 : value,
slides : data.slides,
// Options
option_1 : value,
option_1 : value
});
});
});
So i I have a page that contains links that call an httpRequest. The request calls a php file that grabs data from mysql and pre populates a form which is then returned to the browser/webpage. My problem is that when the page is returned to the browser via the httpRequest/ajax the text area does not display the tinymce editor, it just displays a normal text area. It looks like my request and ajax is working fine the text area just doesn't have the tinycme editor on it.
When i don't use ajax it works fine but when i put it in a separate file and call it via ajax it doesn't bring in the tinymce editor.
Does anyone know how to fix this problem so that my ajax generated page displays the text area with the tinymce editor. Thank you.
Lets presume that your thinyMCE instance is initialized with code below
// initialize tinyMCE in page
tinyMCE.init({
mode: "textareas",
theme: "advanced"
});
and you have some kind of button somewhere in the page. For purpose of this tip, i will not give it any ID but you may. Now, using jQuery you can easily attach event handler to that button which will call through AJAX your server and take content which you want to put tinyMCE editor. Code which will do such job would look somehow like below.
$(function() {
$("button").bind("click", function() {
var ed = tinyMCE.get('content');
ed.setProgressState(1); // Show progress
$.getJSON('/page/12.json', { /* your data */
}, function(data) {
ed.setProgressState(0); // Hide progress
ed.setContent(data["body"]);
}
});
});
});
You can see that on button.click ajax will call url /page/12.json which will return JSON as response. bare minimum of that response could be:
{
title: "Page title",
body: "<html><head><title>Page title</title>......</html>"
}
I attached anonymous function as callback which will handle response from server. and hide progress indicator which is shown before ajax call.
About JSON
JSON is shorten of JavaScript Object Notation. It is JavaScript code!!! So don't be confused about it. Using JSON you can make javascript object which can have attributes you can use later in your code to access particular peace of data which that object "holds". You can look at it as some kind of data structure if it is easier to you.
Anyway, to show you how this JSON can be created by hand look at examples below
var data = new Object();
data.title = "Page title";
data.body = "<html....";
or
var data = {
title: "page title",
body: "<html...."
};
it is very same thing.
If you want to learn more about JSON point your browser to http://json.org.
===== alternative =====
Alternative to json solution could be just plane ajax call to server and response can be plain HTML (from your question I can assume that you have something like this already). So instad of calling $.getJSON you can use $.get(url, callback); to do same thing. The code at the top of my answer will not dramatically change. Instead of geting JSON in response you will get string which is HTML.
----------- BOTTOM LINE -------
I prefer JSON since it can be easily extended later with other attributes, so there is no painful code changes later ;)
Problem here will be that when you return the full page and render it using the ajax response, your tinymce instance has not been shut down before.
In order to do this you can call this small piece of code before you render the ajax response:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
In this case the editor should initialize correctly. You are not allowed to initialize a tinymce editor with the same id before shutting the first one down.
Strangely i ran into this problem yesterday. Following code should work, but YMMV. Trick is to use the correct steps in ajax events. I used the Regular TinyMCE and made use of the jQuery library already included.
Following goes into your tinyMCE initialization tinyMCE.init() . All of the below block should be outside the document.ready.
myTinyInit = {
//.......All essential keys/values ...........
setup : function(ed) {
ed.onChange.add(function( ed ) {
tinyMCE.triggerSave();
}) }
//.....................
};
// Init the tinyMCE
tinyMCE.init(myTinyInit);
This ensures the content is being saved regularly onto the textarea that holds the value. Next step is setting up the request events.
Normally tinyMCE mceAddControl before the ajax post and mceRemoveControl after the ajax success should do the trick. But I found that often does not work.
I used the form as the jQuery selector in my case.
jQuery( '.myForm' )
.find( 'textarea#myTextArea' )
.ajaxStart(function() {
// If you need to copy over the values, you can do it here.
// If you are using jQuery form plugin you can bind to form-pre-serialize event instead.
// jQuery( this ).val( tinyMCE.get( jQuery( this ).attr( 'id' )).getContent() );
}).ajaxSend( function() {
// ! - step 2
// My case was multiple editors.
myEds = tinyMCE.editors;
for( edd in myEds ) {
myEds[ eds ].remove();
}
// tinyMCE.get( 'myTextarea' ).remove();
// strangely mceRemoveControl didnt work for me.
// tinyMCE.execCommand( 'mceRemoveControl', false, jQuery( this ).attr('id'));
}).ajaxSuccess(function() {
// Now we got the form again, Let's put up tinyMCE again.
txtID = jQuery( this ).attr( 'id' );
// ! - step 3
tinyMCE.execCommand( 'mceAddControl', false, txtID );
// Restore the contents into TinyMCE.
tinyMCE.get( txtID ).setContent( jQuery( this ).val());
});
Problems i came across :
Using mceRemoveControl always gave me r is undefined error persistently.
If you get a blank tinyMCE editor, check the DOM whether the ID of the textarea is replaced with something like mce_02, this means that TinyMCE is being initialized again or something is wrong with the order. If so, the tinyMCE is duplicated with each save.
if you are new to JS, I recommend using jQuery with the form plugin, it might be easier for you. But do use the regular non-jquery tinyMCE, as it is well documented.
I fixed this problem by recalling the function after the ajax call. In this part of my ajax:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Content").innerHTML=xmlhttp.responseText;
tinymce();
Now it works fine.
I'm just reposting to make this clearer & because I've uploaded a sample of the problem...
Simply...
This fancy box plugin works great on this page http://www.websitesbyshane.co.uk/chris/portfolio.php
but NOT if the portfolio #content is pulled into the index.php via ajax. You can see for your self by going to the homepage here www.websitesbyshane.co.uk/chris and clicking 'portfolio'
Thanks for your time guys.
Shane
It looks like your ajax call is loading the entire portfolio.php page. Allowing the user to click the link and go to the portfolio page if they don't have Javascript enabled is a great thing, but loading that entire page via an ajax call is sure to cause some issues.
The portfolio.php page that you are loading via ajax includes the $(document).ready to enable the lightbox, but this code will never execute since the main page has already loaded. Your code for your fancy box plugin should be in the main web page. Then you can run that code to bind the fancy box after you have loaded the portfolio page/content into your div.
Edit: added more detail:
You currently have
$('#content').load(toLoad)
in your js.js file. according to the jQuery api docs (http://api.jquery.com/load/) you can pass a callback into it to run when it has finished:
$('#content').load(toLoad, function() {
alert('Load was performed.');
});
You could simply load your fancy box code into this callback function in the js.js file like this:
$('#content').load(toLoad, function() {
$("a#example6").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
The problem with this is that it will get called even if you're not calling the portfolio page. It won't complain, but it is easily solved by wrapping it in an "if" statement.
do you use firebug ? that could help out debugging your php/ajax code live. Just don't forget
to enable javascript debugging and watch in the ajax responses tab when issuing XMLHttpRequests to debug.