I have integrated a tinymce editor in a rails project with active admin.
I spent almost a couple of hours looking for a way to align the editor to the right of my available space, as currently it's hiding the labels for it.
I have the following init js:
$(document).ready(function() {
tinyMCE.init({
mode: 'textareas',
align: 'right',
width: '80%',
height: 200,
autoresize_min_height: 200,
autoresize_max_height: 400,
resize: 'both',
plugins : 'advlist autolink link image lists charmap print preview'
});
});
Read much of the TinyMCE4 documentation and couldn't find a way to align the window to the right. My attempts to override the css class for this are as well no successful.
Could you please give me an advice. Does someone know how to deal with the alignment via the js init?
Here's the screenshot: http://betasve.com/wp-content/uploads/2014/09/TinymceProblemAA.png
Thank you in advance.
Try this in active_admin.css.scss:
.mce-tinymce {
margin-left: 215px !important;
+
Complementing the answer make by nistvan, works better with:
.mce-tinymce { margin-left: 20% !important;}
Related
I found this wonderfull tooltip called qTip2. Loving it so far but has gotten myself into a problem using it.
I was able to install and get qTip2 running with my Rails 3.1 setup. However I'm running into a problem when I'm using qTip2's ajax functionality.
qTip2 ajax request requires a link to the script to be executed before displaying it in the tooltip content div (which is automatically generated by qTip2). You can look at the code I'm referring to here.
http://www.craigsworks.com/projects/qtip2/demos/#ajax
The problem with it is that it does not really go well with RoR. An ajax request declared using RoR is more explicit, where I can explicitly tell rails which div id I would like to update.
Given the following circumstances I needed to do the following things:
the tooltip content must be dynamic
I needed to use the qTip2 ajax functionality so that I could create a custom layout for the tooltip content.
I did try the followings though:
Put the html snippet to be loaded to the content div in the public folder. The content loaded with the right format but I can't have dynamic content. html.erb files didn't seem to work in this folder. Is there any alternative to this folder that would work but with dynamic content?
Tried to use qTip2 ajax request with RoR but was not successful. What I did was I tried to explicitly define the ajax update id in the .js respond file (going through the controller and views etc.). But figuring out the exact id that was generated by qTip2 plugin was a little too overwhelming for me.
here is what I have
html
<a id="editor1" href="/deals_details.html.erb">
javascript
$(document).ready(function()
{
$('#editor1').each(function()
{
$(this).qtip(
{
content: {
text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />',
ajax: {
/*once: false*/
url: $(this).attr('href')
},
title: {
text: 'qTip2 Test',
button: true
}
},
position: {
at: 'center',
my: 'center',
viewport: $(window),
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
}
})
})
// Make sure it doesn't follow the link when we click it
.click(function(event) { event.preventDefault(); });
});
CSS
.ui-tooltip-wiki{
max-width: 440px;
}
.ui-tooltip-wiki .ui-tooltip-content{
padding: 10px;
line-height: 12.5px;
}
.ui-tooltip-wiki h1{
margin: 0 0 7px;
font-size: 1.5em;
line-height: 1em;
}
.ui-tooltip-wiki img{ padding: 0 10px 0 0; }
.ui-tooltip-wiki p{ margin-bottom: 9px; }
.ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }
Please help me!! :) Apology if this post looks stupid, this is my first question on stackoverflow.
I think you're making it too complicated. The qTip ajax functionality simply requests a URL, and the return value is HTML content within a div tag. If you look at the source of the demo you mentioned, you'll see a request for http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php. If you look at what that produces, it is simply a div tag with some content (the style looks different because it is further transformed by the page's CSS).
So the question becomes: can you provide your dynamic content in a div in response to a URL in Rails? Of course! Perhaps you want to set up a SnippetController with a show action and then using pretty standard Rails conventions/routes your URL might be /snippet/show/[ID] and you simply have the view produce the required div content.
On my CMS I have a list of thumbnails (Sortable). The thumbnails work great and now I'm writing a plug-in to drag-them to a tinyMCE window.
As the tinyMCE window has an iFrame it doesn't work that well.
jQuery has an option for Draggables called iframeFix that works exactly as I need. However that list must be a Sortables. I've looked quite extensively on Google and found no-one with my requirements. Has anyone here on StackOverflow done it?
Apply the iframeFix to a Sortables?
If not... I'm on my way to a jQuery plug-in.
Thank you in advance!
I've done it.
You need to have a DIV on top of the iFrame to let the Draggable/Sortable flow without problems. So I used jQuery to create a DIV right on top of the iframe. Then it show's it when you grab the element and destroys it when you drop it. Works like a charm. If anyone is in need of something like that let me know.
update (by popular request):
On my specific scenario I use the following DIV:
<div id="iframeDivFixer" class="ui-draggable-iframeFix" style="background-color: rgb(255, 255, 255); display: none; width: 665px; height: 665px; position: absolute; opacity: 0.001; z-index: 1000; left: 362px; top: 290px; background-position: initial initial; background-repeat: initial initial;"></div>
And, as soon as I grab the thumbnail javascript is used to set the display property to block. The process is reversed when you release the dragabble.
A seriously old question here, but there's another way to do it using css - pointer-events:none; which is supported on all the currently supported browsers (IE11 and above - caniuse.com)
$("#sortable").sortable({
start: function() {
$("iframe").css("pointer-events", "none");
},
stop: function() {
$("iframe").css("pointer-events", "");
},
});
I have the following in my sifr-config.js file:
sIFR.replace(avenir_book, {
selector: 'p:first-child',
css: '.sIFR-root { color: #782221; font-size:22px; }',
wmode: 'transparent'
});
But it doesn't work. I've verified that the same CSS works by testing it in my normal stylesheet. Does sIFR not understand this pseudo element, or does it need to be called in a special way?
Assuming you are using sIFR 3, :first-child is not supported as indicated by this page. However, sIFR can be made jQuery compatible, read more here.
Steps to replace parseSelector with
jQuery:
1 - Make sure you include the jQuery
JavaScript file.
2 - Remove all of the parseSelector
code at the bottom of sifr.js
3 - Add the following line:
var parseSelector = $;
I have tried using sIFR on a test page http://www.irwinassociates.eu/test.php without success. I have checked and re-checked but can't find what's wrong. I figure it's something simple. Can anyone help please? Thanks guys
I looked at the source of the page you linked to and didn't see any javascript code in place that calls the sIFR activate() or replace() functions. Follow the methods used on the official sIFR 3 demo page (view source) http://dev.novemberborn.net/sifr3/beta2/demo/
var font = { src: 'gillsans.swf' };
sIFR.activate(font);
sIFR.replace(font, {
selector: 'h1'
, css: ['.sIFR-root { color: #CCCCCC; }' ]
});
I'm having trouble finding usage/syntax for the text-align feature of sifr. This feature goes inside the flashvars parameter correct? So would it be something like:
sIFR.replace(fontname, {
selector: 'h1',
wmode: 'transparent',
flashvars: 'textalign=center'
});
I tried the above with no luck using r436 build.
Apparently you only need to edit the all.css file. Here's someone talking about this.
If you don't want to change the css styling of a root element, then you can specify what CSS selection you are applying your sifr is referring to with the sSelector
You're confusing sIFR 2 and 3 syntax. flashvars no longer exists, for sIFR 3 specify it in the replacement CSS:
sIFR.replace(fontname, { selector: 'h1', css: '.sIFR-root { textalign: center; }' });
You can also specify background-color here, so you don't need to use transparency.