I have a problem with the initialization of images in CKEditor 4.5.4 with the Enhanced Image plugin (image2). The first time a CKEditor instance is being loaded, the images don't get initialized correctly. See picture image not correctly initialised. The caption field does work correctly, but I cannot move or select the picture.
However, if I navigate to another web page in my web application, and then navigate back to the page where we use CKEditor, everything works fine. In other words if the CKEditor instance has been loaded before, everything works perfectly.
We are using AngularJS 1.4.4 together with ng-ckeditor. This is the editorOptions we use:
$scope.editorOptions = {
language: 'no',
customConfig: '/statisk/app/common/ckeditor/ckeditor-config.js',
extraPlugins: 'sharedspace,image2,widget,lineutils,uploadimage,uploadwidget,filetools',
extraAllowedContent: 'a(*); span(*); figure(align_center, align_left); div{*}; figure; figcaption; img[alt,!src]{width,height};',
toolbar: [
{name: 'paragraph', items: ['BulletedList', 'NumberedList']},
{name: 'links', items: ['Link']},
{name: 'insert', items: ['Image']}
],
sharedSpaces: { top: 'toolbar_hovedtekst' }
};
HTML:
<div id="hovedtekst" data-ng-show="modus.showEditorControls()">
<div id="toolbar_hovedtekst"></div>
<div class="ck_editor_hovedtekst test_hovedtekst" ckeditor="editorOptions" data-ng-model="hovedtekstCtrl.content"></div>
</div>
What could be wrong?
Related
I have a Vue3 SFC with 3 images, which I initially load as per docs:
<script setup>
...
import screenshot1 from '#/Images/Landing/Screenshots/1.png';
import screenshot2 from '#/Images/Landing/Screenshots/2.png';
import screenshot3 from '#/Images/Landing/Screenshots/3.png';
import {TabGroup, TabList, TabPanels, TabPanel, Tab} from "#headlessui/vue";
...
const images = [
{
title: 'Image 1',
image: screenshot1,
},
{
title: 'Image 2',
image: screenshot2,
},
{
title: 'Image 3',
image: screenshot3,
},
];
</script>
As noticed, I am also using Tabs from headlessui/vue.
Then, in my template:
<template>
...
<TabPanels>
<TabPanel v-for="image in images" :key="image.title">
<h1>{{ image.title }}</h1>
<img :src="image.image" alt="" />
</TabPanel>
</TabPanels>
...
</template>
Everything is working as expected, but when I change the tab, not always but sometimes, image reloads from server (I see an XHR call in the network tab of the browser's dev tools), and the screen rapidly blinks until the corresponding image is loaded again.
I need these images to be "static", i.e., loaded at the beginning once and never again, because that page blinking causes a bad user experience.
Any ideas?
Thanks.
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");
i have two buttons,How i can make alignment right and left based on below code Add entity is left and excel export is right.
CONFIG.JS
toolbar: [
{
template: kendo.template('<a href="" class=\'k-button k-button-icontext k-grid-add\' ng-click=\'addNewRole();\'><span class=\'k-icon k-add\'></span>Add Entity</a>')
},
{"name":"excel"}
],
I play around little bit and got the soultion.I added excel button into template and it worked.
template: '<button class="k-button k-grid-excel pull-right">Export to Excel</button>'
I have configured a no toolbar and ReadOnly instance of CKEditor to show formatted HTML on a web page.
This was working well with V3.5 of CKEditor with:
<script language="javascript" type="text/javascript">
$('.CKEditorRTE').ckeditor(function () { }, { readOnly: true, toolbar: 'ReadOnly',toolbarStartupExpanded: false, toolbarCanCollapse: false, toolbar_Custom: [],uiColor: '#edeff1', resize_minHeight : 100, height: 125, resize_minWidth : 100, width: 600 })
</script>
With V4.4.5 The formatting goes, unless I put the following in the "Config.js"
config.toolbar_ReadOnly = [{items: ['Format']}];
Now I actually do not want this format icon, but I do want the preformatted text. So how can I have preformatted HTML text with no toolbar icons with CKEditor 4.4.5 ?
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>