Development

Written by Super User on 10 September 2021. Posted in Development.

Troubleshooting - Content being stripped away

The CKEditor framework (which our editor is built upon) is known for being very good at respecting and handling code however, if your code is being stripped out or transformed for some reason, here are a few things you can do to get to the bottom of it.

Test:

You can perform a quick test by switching backwards and forwards between the source code and wysiwyg mode.

And by checking if your HTML is being stripped away before or after saving your content.

If it is being stripped out after being saved to the database then it’s likely to be joomla’s Article Filtering.

This is because WYSIWUY editors are only there to format your code. They don’t have anything to do with the saving of your content to the database and for this reason the problem it’s likely to be with how Joomla’s Article Filtering is set up on your site.
Or if your code is being transformed or stripped out before saving the article, then it points towards the editor or the web browser interpreting it.

If the code is considered invalid and cannot be rendered by your web browser then it will be transformed into something that your browser can read. The issue is that different web browsers (Edge, FF, Chrome etc...) all work differently and may do something different. To standardised this we have something called HTML 5 Standard which the editor adheres to for cross browser support.

HTML 5 Standard definition from wc3

3.2.5.1.2 Flow content

Most elements that are used in the body of documents and applications are categorized as flow content.

a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time u ul var video wbr Text

As a general rule, elements whose content model allows any flow content should have either at least one descendant text node that is not inter-element whitespace, or at least one descendant element node that is embedded content. For the purposes of this requirement, del elements and their descendants must not be counted as contributing to the ancestors of the del element.

This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.

https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#flow-content-0

Often the problem is that the html tag is empty. The only exception our editor currently supports is < i >, < b > and <span> tags as they are now commonly being used for icon fonts. This means that empty tags are not designed to be empty so the HTML is invalid and is treated accordingly.

Hits: 79

Written by Super User on 10 September 2021. Posted in Development.

Troubleshooting - Image height & width

By default the editor and media manager does not insert height and width values for its images and will insert something like this:

<img alt="" id="" src="/files/images/myimage.jpg " style="" title="" />

This was decided so that the height and width wouldn’t conflict with other 3^rd party plugins which could be doing some sort of transformation to the image such as thumbnails etc… however; there are quite a few customizable options within the editor for which you can add a height, width and style attribute.

Auto image resize

The editor has an auto image resizer which you can turn on by going to Components > Ark Editor > Control Panel > and click on the ‘Options’ tab. Next you can select the Media tab and here you will find parameters to turn on Image resizing. This is especially useful if you plan on drag and drop uploading your images which is supported by our editor.

Depending upon your preference you can set the resize type but by default this is set to resize by the image width only. Along with resizing the physical image the plugin will also add a ‘width’ or ‘height’ attribute to the code as well. This is done so that the resized image is reinforced otherwise the image may not appear to change due to caching. This is especially important when editing inline as the change must happen instantly as the browsers cannot be refreshed.

<img alt="" id="" src="/files/images/modules/table.jpg" style="" title="" width="640" />

Please see video for a demo on how this works: https://youtu.be/dZLYPajVc5Q

Browser side Image resize handlers

The height and width values can happen on the browser side with the resize handlers used to resize images in your content which looks like:

This will again add a height and width attribute as seen below:

<img alt="" id="" src="/files/images/modules/table.jpg" style="" title="" height="300" width="500" />

This is done in many popular browsers (IE, FF etc.…) except for those using Webkit. So if you use Google Chrome will notice that the image resize handlers are not present. We have a plugin that mimics how Firefox works to make up for the lack of support in Webkit-based browsers, to add this back you can download this plugin: http://arkextensions.com/downloads/ark-editor/plug-ins#document-webkit-drag-and-resize-v1-0.

Adding a img style attribute

You can also define an image style attribute in the Media Manager. There’s a parameter called ‘Styles’ which comes with a set of classes for which you can define your own including height and width.

<img alt="" id="" src="/files/images/modules/usb.jpg" title="" style="width:100%;" />

Adding a default style attribute

The editor will also allow you to default globle style attribute such as a 'width' and 'height' to your images in the Ark Manager. To do this please go to 'Components' > select 'Ark Media Manager' > navigate to 'Options' > click on the 'Interface' tab > navigate to 'Edit' > and add a 'Default Style Attribute' and the 'Save'.

This will add a 'style' attribute as seen below:

<img alt="" id="" src="/files/images/modules/usb.jpg" title="" style="width:200px;" />

To learn more about this please see: http://arkextensions.com/documentation/ark-media-manager/207-adding-a-default-class-and-style-to-your-image

Hits: 81

Written by Super User on 10 September 2021. Posted in Development.

Uninstalling

To uninstall with the Ark Extension manager

To uninstall the with the Ark Extensions Manager:

Navigate to 'Components' and click on 'Ark Extension Manager'. This will take you to the 'Ark Manager' screen.

Click on the 'Uninstall' button.

The Ark Editor package will now be unistalled.

To uninstall with Joomla's Extension Manager

To uninstall the Ark Editor package with the Extension Manager:

Navigate to 'Extensions' > 'Extension Manager' and select 'Manage' from the left menu.

2. Filter for 'Package' and 'ArkEditor'.

3. Select 'Package Ark Editor' and click on the 'Uninstall' button.

Upgrading

Automatic update process

The good news is that the core ‘Ark Editor’ and ‘Component’ comes with it own 'Ark Extension Manager' which provides a simple and easy way to manage and keep your Ark software up-to-date. For more about this please see: http://arkextensions.com/documentation/ark-extension-manager

Using Joomla's Installer

If from any reason the update process fails or you need to do this manually, you still can download the package from this link (http://www.joomlackeditor.com/downloads/viewcategory/46-jck-suite) and use Joomla installer upgrade. Go to ‘Extensions’ and click on ‘Extension Manager’. Under `Upload Package File’ click on `Browse...’, navigate to the Zip file, select it and click `Upload File & Install’.

The system will now automatically update the Package Ark Editor. Once completed it will inform you that the application has been successfully installed.