Im trying to get tinymce edit iframe to work with this wonderfull tabbifier:
http://www.barelyfitz.com/projects/tabber
I have successfully installed both of them and they work great.
In my example I have tested the following:
Load a tinymce component and save the following code inside the tinymce iframe with the HTML option:
test
The result is saved perfectly after refreshing with F5 and this code is saved in the database:
<p>test</p>
tinymce is working perfecly.
The next test I have made is with tabber:
Edit the tinymce component box and saved the following code with the HTML option:
<div class='tabber' id='tabber1'>
<div class='tabbertab' title='FIRSTTAB' >
test firsttab
</div>
<div class='tabbertab' title='SECONDTAB' >
test secondtab
</div>
</div>
The code is perfectly saved in the database, and the result is perfectly loaded in the output view, showing two tabs, each one of them with its content.
The problem is while trying to edit the content again with tinymce, the tabs are not shown. The content is perfectly loaded in the tinymce iframe, without the tabs. Its shown as below:
test firsttab
test secondtab
The HTML code inside it is good, it has the proper tabbifier html code saved before.
The problem maybe is that the iframe of tinymce is not able to load or interpret the javascript of tabber.js and its not showing the tabs.
I have tested loading the javascript of tabber.js inside the tinymce iframe with this code, and seems to load it but the tabs are not still shown:
<script type="text/javascript">
tinyMCE.init({
mode: "exact",
elements: "%s",
theme: "%s",
%s
%s
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true
%s
setup : function(ed)
{
ed.onInit.add(function(ed, evt)
{
alert("entered tiny");
// Load a script from a specific URL using the global script loader
//tinymce.ScriptLoader.load('/js/tabber/tabber.js');
// Load a script using a unique instance of the script loader
//var scriptLoader = new tinymce.dom.ScriptLoader();
//scriptLoader.load('C:\tabber.js');
// Load multiple scripts
var scriptLoader = new tinymce.dom.ScriptLoader();
scriptLoader.add('/js/tabber.js');
scriptLoader.loadQueue(function() { alert('All scripts are now loaded.'); });
});
}
});
</script>
I have also checked that /js/tabber.js is the correct path. And saw at firebug that its loading it.
The two alert messages are displayed, so it seems to load it, but the tabs inside the tinymce edit iframe are still not shown.
Any help is welcome, thank you so much.
The tinymce ScriptLoader does not load a script inside the iframe. It provide a way to load a script in the main window after the tinymce initialization. This is very confusing as not documented.
But you definitelty can load a script inside the iframe. Here is the magic :
tinymce.init( { setup : function( ed ) {
ed.on('init', function (args) {
// get the iframe DOM
var doc = args.target.contentDocument || args.target.contentWindow.document;
// inject script into the DOM
var s = doc.createElement('script');
s.type = 'text/javascript';
s.src = '/js/tabber.js';
doc.getElementsByTagName('head')[0].appendChild(s);
});
});
Several browsers have problems with spaces and tabs on paragraph start.
A workaround for spaces is to code them onSave as protected spaces if they are at the beginning. The solution for tabs is to use another character with similar behaviour and replace them when saving. It is necessary to recode the content when reloaded from databse into the editor.
Related
I am using fancy box to open various edit functions in an in line div. I use ajax to get the div contents, move it into the div, and open the div in Fancybox. Mostly works great. Some edit blocks have the ckeditor in them and that loads fine and mostly works... but the ckeditor popup/overlays (like paste from word, the color selectors or image tools) are opening underneath the fancybox window. Maybe a z-index issue, but not sure how to fix it:
Fancy box code is below:
function openEditBlock() {
$.fancybox.open({
src : '#editBlock',
type : 'inline',
touch: false
});
}
CK Editor Code below:
var editor1 = CKEDITOR.replace('editor1_content',
{
extraPlugins: 'stylesheetparser', // load the plugin
contentsCss: '../css/editor_cmsPages.css', // load custom stylesheet
stylesSet: [], // Do not load the default Styles configuration.
height: '480px',
width: '780px',
});
CKFinder.setupCKEditor(editor1, 'wysfind/' ) ;
fancybox elements have z-index values from 99992 to 99995; but 1) ckeditor places dialog elements outside the content, as last children of <body> and 2) uses quite low starting values for z-index, for example, color selector has 10006 by default.
Luckily, ckeditor allows to configure z-indexes, locate config.js file and change value of baseFloatZIndex to smth like 100001 (see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-baseFloatZIndex)
I m using gem 'ckeditor', github: 'galetahub/ckeditor' with rails admin.
I want when I post article on the homepage, images associated with article's description should be automatic responsive. I have one folder in
assets/Javascript/ckeditor
, and I posted this piece of code in this folder, but it seems not working too. please help me out. thanks in advance.
If you want inserted images in a CKEditor to be responsive you can use the following code. It creates a htmlfilter for the
image tag that replaces inline "width" and "style" definitions with
their corresponding attributes and add's (in this example) the
Bootstrap "img-responsive" class.
I believe CKEDITOR does not add the img-responsive class to those images. You can check this by adding an image with CKEDITOR and then check if the html on the page has the img-responsive class added.
The function CKEDITOR.on() the event 'instanceReady' will execute the code to add the 'img-responsive' class to the image element el
The fact is, I believe you should put a breakpoint inside that code and test if it is actually executing
CKEDITOR.on('instanceReady', function (ev) { // etc.. etc.. });
because this are the instruction on how to adapt ckeditor with turbolinks
Create a file app/assets/javascripts/init_ckeditor.coffee
var ready = function() {
CKEDITOR.on('instanceReady', function (ev) { // code });
}
$(document).ready(ready)
$(document).on('page:load', ready)
Make sure the file is loaded from your app/assets/javascripts/application.js
CKEDITOR is the API entry point. The entire CKEditor code runs under this object.
The documentation of the .on() jquery method can help you understand better why that call is not executing, basically the .on() method trigger the js code in the function(){}, when that event is triggered.
The event is instanceReady and this is the info from the API
instanceReady( evt )
Event fired when a CKEDITOR instance is created, fully initialized and ready for interaction.
Parameters
evt : CKEDITOR.eventInfo
editor : CKEDITOR.editor
The editor instance that has been created.
Method 1
Add this in your CSS file:
img {
max-width: 100%;
height: auto !important;
}
Method 2
Use Enhanced Image plugin to replace the default image widget.
Method 3
Use the snippet in your link, but remember to replace the img-responsvie to img-fluid if you use Bootstrap 4.
So, I use CKEDITOR in my application. I really like it, except one nasty thing - the toolbar disappears totally when I have some huge text and have to scroll down. So, when I scroll back there is no toolbar at all. I found a plugin
which is supposed to solve this problem. So, this is what I did - I added this plugin to my application like
<script type="text/javascript" src="/ckeditor/plugins/fixed/plugin.js"></script>
The script is loaded ok - I see it in the console. Then in the application itself I do this:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'fixed'
};
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height
});
But this plugin does not help - when I scroll down, he toolbar still disappears. So, I need some help. PS. I'm using CKEDITOR 4.
You don't have to manually add the js file itself, you just need to define the configuration properly.
Test this:
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height ,
extraPlugins : 'fixed'
});
I am using Lean Modal: http://leanmodal.finelysliced.com.au/ in a Rails app with a React front-end.
When I put the link to the modal in application.html.erb it works fine but when loaded through a React link using the same code, nothing happens.
I have jQuery loaded and checked 10 times if the code is the same. What could cause such an issue?
Here is the link code in React:
<a rel="leanModal" name="login" href="#login">
The template file (html.erb) script:
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
And I am loading the modal JS from my application.js file in Rails.
Thanks for any help!
You should wrap things that interact with DOM (e.g. jQuery plugins) in a component.
var LeanModal = React.createClass({
componentDidMount: function(){
$(this.getDOMNode()).leanModal({
top: this.props.top || 200
});
},
render: function(){
return <div>{this.props.children}</div>;
}
});
Note that you also need to provide a componentWillUnmount to handle clean up, and that the plugin can't do things like add/remove elements. Plugins that don't allow cleanup or make destructive changes are incompatible with react.
Sometimes implementing it with just the existing CSS and using react components instead of the jQuery plugin can be very simple and end up with a better result.
Hi
im trying to put all my js in external js file, for the header for my site be more light.
So in my header i have this script, wich work well :
ddaccordion.init({
headerclass: "p7ABtrig", //Shared CSS class name of headers group
contentclass: "p7ABcontent", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [<?= $set_expand_index?>], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
But when i try to move this script inside this external js like inside :
<script src="scripts/external-script.js"></script>
it doesnt launch anymore.
I cannot find a way to launch it from an external js file ?
This must be really newbie question :) but im really new to jquery.
Thank you for your help.
Thanks EMMERICH. I find why it wasn't working its coz my external script was loading before my global ddaccordion script, i switch it i put the ddaccordion first and after i load the external js with ddaccordion init inside it now all is ok. Really thanks :) you great.