Using Froala editor in Wagtail 2.14 - wagtail

I have been using Froala within Wagtail v1.13 and it works great, using the following:
https://github.com/jaydensmith/wagtailfroala
Now upgraded to Wagtail 2.14. But the above plugin doesn't support v2 but there is a fork and a pull request that say they support Wagtail v2+
So I've tried manually implemented the changes from each of the following:
https://github.com/namespace-ee/wagtailfroala
https://github.com/jaydensmith/wagtailfroala/pull/5/commits/d64d00831375489cfacefa7af697a9e76fb7f175
The editor seems to works apart from trying to insert an image, it shows the image library, but then when you try to select an image rather than allowing you to select image formats it loads the following URL:
http://127.0.0.1:8000/admin/images/chooser/133/select_format/
Which returns the following JSON:
html: "\n\n\n\n\n<header class=\" \">\n \n <div class=\"row nice-padding\">\n <div class=\"left\">\n <div class=\"col header-title\">\n <h1>\n Choose a format</h1>\n </div>\n \n </div>\n <div class=\"right\">\n \n \n \n </div>\n </div>\n</header>\n\n\n<div class=\"row row-flush nice-padding\">\n <div class=\"col6\">\n <img alt=\"Photo\" class=\"show-transparency\" height=\"450\" src=\"/media/images/Photo.max-800x600_zft9HEG.png\" width=\"800\">\n </div>\n <div class=\"col6\">\n <form action=\"/admin/images/chooser/133/select_format/\" method=\"POST\" novalidate>\n <input type=\"hidden\" name=\"csrfmiddlewaretoken\" value=\"5q5yNdUY3xt8BPbIbrulWQopP6bp7iqGYRDuzQQpee4LhJ0eMxRxM1xOaxpufXo8\">\n <ul class=\"fields\">\n \n \n<li class=\"required label-above \">\n \n<div class=\"field choice_field radio_select \" data-contentpath=\"format\">\n <label for=\"id_image-chooser-insertion-format_0\">Format:</label>\n <div class=\"field-content\">\n <div class=\"input \">\n \n <ul id=\"id_image-chooser-insertion-format\">\n <li><label for=\"id_image-chooser-insertion-format_0\"><input type=\"radio\" name=\"image-chooser-insertion-format\" value=\"fullwidth\" required id=\"id_image-chooser-insertion-format_0\">\n Full width</label>\n\n</li>\n <li><label for=\"id_image-chooser-insertion-format_1\"><input type=\"radio\" name=\"image-chooser-insertion-format\" value=\"left\" required id=\"id_image-chooser-insertion-format_1\">\n Left-aligned</label>\n\n</li>\n <li><label for=\"id_image-chooser-insertion-format_2\"><input type=\"radio\" name=\"image-chooser-insertion-format\" value=\"right\" required id=\"id_image-chooser-insertion-format_2\">\n Right-aligned</label>\n\n</li>\n</ul>\n \n\n \n <span></span>\n </div>\n \n\n \n </div>\n\n \n</div>\n\n</li>\n \n \n<li class=\" label-above \">\n \n<div class=\"field boolean_field checkbox_input \" data-contentpath=\"image_is_decorative\">\n <label for=\"id_image-chooser-insertion-image_is_decorative\">Image is decorative:</label>\n <div class=\"field-content\">\n <div class=\"input \">\n \n <input type=\"checkbox\" name=\"image-chooser-insertion-image_is_decorative\" id=\"id_image-chooser-insertion-image_is_decorative\">\n \n\n \n <span></span>\n </div>\n \n\n \n </div>\n\n \n</div>\n\n</li>\n \n \n<li class=\" label-above \">\n \n<div class=\"field char_field text_input \" data-contentpath=\"alt_text\">\n <label for=\"id_image-chooser-insertion-alt_text\">Alt text:</label>\n <div class=\"field-content\">\n <div class=\"input \">\n \n <input type=\"text\" name=\"image-chooser-insertion-alt_text\" value=\"Photo\" id=\"id_image-chooser-insertion-alt_text\">\n \n\n \n <span></span>\n </div>\n \n\n \n </div>\n\n \n</div>\n\n</li>\n \n <li><input type=\"submit\" value=\"Insert image\" class=\"button\" /></li>\n </ul>\n </form>\n </div>\n</div>\n"
step: "select_format"
Also trying to click on "next page" within the image library dialog doesn't work either, instead it seems to send the click to the main page under the dialog.
Any idea's?

Related

How can I get ckeditor to format the html when I view source in Drupal 7

When I edit a page and view the source in a page it does not indent the code.
<p><img alt="" src="/sites/climateactionnow.ca/files/images/Canada-CO2-emissions-2018.png" style="width: 100%;" /></p><p class="rtecenter"><span style="font-size:8px;"><em>Canada per capita CO2e emissions</em></span></p>
Another site shows the source like this
<p><img alt="" src="/sites/climateactionnow.ca/files/images/Canada-CO2-emissions-2018.png" style="width: 100%;" /></p>
<p class="rtecenter"><span style="font-size:8px;"><em>Canada per capita CO2e emissions</em></span></p>
How can I fix this?

Print case find empty parameter

How to display a message if the parameter is empty ?
I have a variable " parameters":{}, where I check if it has variables . If you separates the ng -switch . I need you to print a message " no data " if he finds the " parameters":{}.
<div ng-repeat="p in ctrl.currentreport.parameters" ng-switch="p.dataType">
<div ng-switch-when="Integer">
<reportinteger parameter="p"></reportinteger>
</div>
<div ng-switch-when="DateTime">
<reportdate parameter="p"></reportdate>
</div>
<div ng-switch-when="Boolean">
<reportboolean parameter="p"></reportboolean>
</div>
</div>
Just add this:
<div ng-hide="Object.keys(ctrl.currentreport.parameters).length">No data</div>
Wherever you want
EDIT: even better
<div ng-show="angular.equals({}, ctrl.currentreport.parameters)">No data</div>

Finding Element in ext JS from WebDriver (From C# code)

This is the below Extjs code for my webpage
<div id="dataViewPanel" class="x-panel">
<div id="ext-gen76" class="x-panel-header x-unselectable" style="-moz-user-select: none;">
<div id="ext-gen168" class="x-tool x-tool-refresh "> </div>
<div id="ext-gen164" class="x-tool x-tool-add " style="position: relative;">
<div id="ext-gen189" class=""></div>
</div>
<div id="ext-gen160" class="x-tool x-tool-edit x-item-disabled " style="position: relative;">
<div id="ext-gen188" class=""></div>
</div>
When I search with below command in the Firefox console, I can locate the correct output
window.frames['abFrame'].contentDocument.getElementById('dataViewPanel').childNodes[0].childNodes[1]
As I am new to handling of ext.js objects in Web-driver, I am unable to locate the element with class="x-tool x-tool-add and unable to click on this.
Could any one please help me with this.

Get value of SPAN - Selenium-WebDriver

I want to get the value of SPAN using Selenium-WebDriver. The value that I want get is this: 00000632/14
My code HTML is this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div>
<div>
<h3 class="subTitulo"></h3>
</div>
<div style="margin-top: 20px;">
<strong>
Tu nĂºmero de contacto es:
</strong>
<span>
**00000632/14**
</span>
</div>
Is there any method in Selenium-Webdriver to get "00000632/14" ? Thanks in advance.
Agustin
If this is the only <span> element in the HTML document, then you can simply use:
String text = driver.findElement(By.tagName("span")).getText();
If you have several <span> elements, and you want to get the text from all of them, then you can use:
List<WebElement> spans = driver.findElements(By.tagName("span"));
for (WebElement span : spans)
{
String text = span.getText();
...
}
The following will work,
String text = driver.findElement(By.cssSelector(".span9 > div > div > span")).getText();

Jquery - Cannot post form that contains live data appended using jquery

I have a form that I use to post Live data that is appended to the form using Jquery. The data that is appended contains an input box containing the value of the data I want the form to post. Everything works in Chrome, Firefox and IE8 but not IE7.
Why can't IE7 post live data. What am I doing wrong is there anyway to get around this???
See code below:
<!--Start Cartbox-->
<form method="get" name="register" action="process.php">
<div id="cart" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-cart">Your Devices</span> Your Products</h4>
<ul id="cartbox" class="cart ui-helper-reset ui-helper-clearfix">
<!--EXAMPLE OF LIVE DATA-->
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">product 1</h5>
<img src="product1.png" alt="product1"/>
<input type="hidden" name="devicetype[]" value="product1" />
<div class="draggableicons">
<a style="float:left" href="#" title="<b>Product 1 ($150.00)</b><br />" class="vtip ui-icon ui-icon-info">More info...</a>
Add to cart
</div>
</li>
<!--EXAMPLE OF LIVE DATA-->
</ul>
</div>
<button class="addbutton">Add the product to your cart</button>
</form>
<!--End Cartbox-->
I don't see an ending </form> tag
I also dont think jQuery plays well with '[]' in field or id/class names

Resources