I am using the shared spaces plugin with Ckeditor to load a shared toolbar for multiple ckeditors but it still loads individual toolbar for all editors.
Here is a fiddle with the code that I am using: https://jsfiddle.net/7Lrcup3L/
HTML:
<div id="topSpace"></div>
<textarea id="editor1" name="editor1"></textarea>
<textarea id="editor2" name="editor2"></textarea>
<div id="bottomSpace"></div>
JS:
CKEDITOR.replace('editor1',{
sharedSpaces: {
top: 'topSpace',
bottom: 'bottomSpace'
}
})
CKEDITOR.replace('editor2',{
sharedSpaces: {
top: 'topSpace',
bottom: 'bottomSpace'
}
})
Need help with the same!
Shared Space is an optional plugin that is not included in the Standard preset. You should add it to your build first and/or enable with config.extraPlugins.
Check the source code of the Shared Toolbar and Bottom Bar SDK sample - just scroll down to the "Get Sample Source Code" to see a working sample for classic and inline editors.
Related
I have an html fragment that looks like this:
<style>
.r {
display: flex;
}
.d-flex {
display: flex;
align-items: center;
}
</style>
<div class="r">
<input type="radio" disabled="disabled" value="1">
<div class="d-flex">
<span class="answernumber">1) </span>
<div class="answer"><p>One</p></div>
</div>
</div>
When I render this in a browser the radio button, the "1)" and the "One" are all aligned nicely. But when I render this html in a pdf the radio button is not aligned with the text. I have tried multiple alternative style definitions for the classes r, d-flex, answernumber and answer and also for the input[type="radio"] and every time it looks good in a browser, the result is no good in the pdf.
Interestingly, check boxes work just fine. Is there a way to get the html to render in the pdf aligned? Or is this something that needs to be fixed inside iText?
The html inside the div.answer may be much more complex and I have no control over it as it is delivered to me by an external system, so I am limited as to what I can do with the html. What I am in control over, is the style definitions and any configurations to be done to iText (perhaps some ConverterProperties).
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
Now I am using Summernote text editor. It is so easy and customizable. But I want to customize width. Example:
$("#editor").summernote({
'width':200px,
});
Above code is not effect. How can I do it?
you can use width like below.
$('.editor').summernote({
width: 150, //don't use px
});
For me it helped to wrap editor with another div with style
<div style="width: 80%;">
I am using Joomla for my websites and I have added SlideShowPro to multiple websites with success.
However for some reason when I add the extension to one of my particular sites, something is going wrong.
I'm using JCE and under Editor Parameters > Advanced, I have all of the following turned on:
Allow Javascript
Allow CSS
Allow PHP XHTML Inline Scripts
Under the tab Plugin Parameters then Media Support, I have all of the following turned off:
Strict XHTML Flash
Allow HTML5 Audio
Allow HTML5 Video
Allow OBJECT Elements
Allow EMBED Elements
and Allow Iframes
When I add the following code:
<!-- START EMBED CODE -->
<script type="text/javascript" src="http://www.colmandesigns.co.nz/colmangallery/m/embed.js"></script>
<div id="album-6">
</div>
<script type="text/javascript">
SlideShowPro({
attributes: {
id: "album-6",
width: 550,
height: 400
},
mobile: {
auto: false
},
params: {
bgcolor: "#000000",
allowfullscreen: true
},
flashvars: {
xmlFilePath: "http://www.colmandesigns.co.nz/colmangallery/images.php?album=6",
paramXMLPath: "http://www.colmandesigns.co.nz/colmangallery/m/params/chrome.xml",
contentScale: "Crop to Fit All"
}
});
</script>
<!-- END EMBED CODE -->
It ends up coming out like this once I click save:
<!-- START EMBED CODE -->
<p>
<s-cript type="text/j-avascript" src="http://www.colmandesigns.co.nz/colmangallery/m/embed.js"></s-cript>
</p>
<div id="album-6"> </div>
<p>
<s-cript type="text/j-avascript"> SlideShowPro({ attributes: { id: "album-6", width: 550, height: 400 }, mobile: { auto: false }, params: { bgcolor: "#000000", allowfullscreen: true }, flashvars: { xmlFilePath: "http://www.colmandesigns.co.nz/colmangallery/images.php?album=6", paramXMLPath: "http://www.colmandesigns.co.nz/colmangallery/m/params/chrome.xml", contentScale: "Crop to Fit All" } });
<!-- END EMBED CODE -->
</s-cript>
</p>
<p> </p>
What do I need to do differently?
Yes, WYSIWYG editors will mess your embedded scripts and styles. What I do on my sites is configure JCE to not appear by default.
Go to "Components > JCE Editor > Profiles > Default > Features and Layout > Editor State" and set it to "Off".
This will give you a generic text area for editing your articles (by default) and a link to turn on WYSIWYG editing. This way it will not mess up your JavaScript / CSS.
You can also try "Flexi Custom Code" module, which works similarly to "Custom HTML" module but is intended to be used for JS / CSS instead.
Good luck.
Disabling text filters for super users might help:
Go do administrator / global config / text filters and choose no filters next to Super Users
I have tried everything but no luck. I am using Watin and C# .NET
What I am doing is going to:
https ://adwords.google.com/o/Targeting/Explorer?__u=1000000000&__c=1000000000&ideaRequestType=KEYWORD_IDEAS#search.none
Note: There's no space between https and ://, but I had to add it because of a markdown problem
Entering the captcha manually (typing the text from Watin).
After you search for keywords, you will see that in the bottom of the page you have a Next and a Previous button.
I would like from WatiN to go to page 2, 3,...
It sounds simple, click on the div (with id gwt-debug-aw-paging-next ) and it will go to next page, but it does not happen.
I tried FireEvent, click, KeyDown, everything ... but it's not working.
I also tried to select 100 results from the Selectlist, but again, it does not work.
I tried it in all ways:
browser.DomContainer.SelectList("gwt-debug-aw-paging-list-box").Option("100").Select();
Nothing seems to work when talking about the buttons from the bottom right of the page.
I managed to "simulate" the click on Broad or Exact results, but not with the bottom buttons.
Any suggestions?
Edit 1:
I uploaded an image so you can see exactly the button I am talking about:
Click here to view it larger.
<div id="gwt-debug-aw-paging-next" class="goog-button-base goog-inline-block goog-button aw-btn aw-pagination-button" tabindex="0" title="Next page">
<input type="text" tabindex="-1" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="goog-button-base-outer-box goog-inline-block">
<div class="goog-button-base-inner-box goog-inline-block">
<div class="goog-button-base-pos">
<div class="goog-button-base-top-shadow"> </div>
<div class="goog-button-base-content">
<span id="gwt-debug-aw-paging-next-content" class="aw-pagination-next"> </span>
</div>
</div>
</div>
</div>
Please paste the markup of the element you would like to click, including a parent element or two.
This will help in suggesting solutions.
Thanks.
So the following does not work?
using(IE ie = new IE("your-page's-url"))
{
// ... any steps needed to bring up the page in question ...
ie.Element("gwt-debug-aw-paging-next").Click();
}
If not, maybe try clicking on the span gwt-debug-aw-paging-next-content.
I managed to solve the problem. Another programmer gave me this tip, so the credits go to him.
The idea is that there are more spans with the same ID in google adwords (strange, I know), so what we need to do is click on every span, not only at the first span.
Here is the final code that needs to be added:
var pagination = browser.Spans.Where(e =>
e.IdOrName == "gwt-debug-aw-paging-next-content").ToList();
foreach (var item in pagination)
item.Click();