Hello I tried to load my template as hmtlfile instead of html. But when i tried to load the template it give me error "templatesDialog.setState is not a function"
Could you provide me sample function how to use the hmtlfile function?
// Register a templates definition set named "default".
CKEDITOR.addTemplates( 'default', {
// The name of sub folder which hold the shortcut preview images of the
// templates.
imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
// The templates definitions.
templates: [ {
title: 'Image and Title',
image: 'template1.gif',
description: 'One main image with a title and text that surround the image.',
htmlFile: 'article.html' //this file is loaded in templates folder
} ]
} );
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_templates_templateDefinition.html#property-htmlFile
I tried to path the htmlFile but still not working.
Related
I'm trying to create a webshop, and having some trouble with loading in different images to different categories. Running the server locally and hard coded some category objects (for now, later it'll be coming from a database) and having all the images in the same folder I set the file name as img attribute, so my "creating my database" looks like something like this:
created() {
this.categories = [
{
id: 1,
text: 'breed category 1',
cvalue: 'cat1',
img: 'king-charles-spaniel-resting-head.webp'
},
{
id: 2,
text: 'breed category 2',
cvalue: 'cat2',
img: 'border-collie-dog.webp'
},
{
id: 3,
text: 'breed category 3',
cvalue: 'cat3',
img: 's960_Webp.net-resizeimage__2_.jpg'
},...
Then I passed the objects to the child component and tried to v-bind the img attribute into the src tag:
<img v-bind:src="'../assets/categ/'+category.img" />
When inspecting the source code, I can see that the binding was successful because the full root appears there (src="../assets/categ/king-charles-spaniel-resting-head.webp"). But the app is not recognizing the root at all and returns with 404 file not found.
(When setting the src attribute manually, in inspect mode the following root appears and can load the image: src="/img/border-collie-dog.4ca9975d.webp")
I've also attached an image: the first one is the v-binded root, the second one is when I set the src manually. Image
I hope my explanation was clear enough (I'm quite newbie to development), thank you for the help in advance!
you can use like this. # reference to src folder:
<img :src="`#/assets/categ/${category.img}`">
I want to dynamically change and load templates.How put kendo template to js file and use in html.
#(Html.Kendo().TileLayout()
.Name("tilelayout")
.Columns(100)
.RowsHeight("100%")
.Height("100%")
.ColumnsWidth("100%")
.Containers(c => {
if(#Model==1)
{
c.Add().Header(h => h.Text("Входящие документы")).BodyTemplateId("inboxdocuments1").ColSpan(75).RowSpan(2);
}
else
{
c.Add().Header(h => h.Text("Входящие документы")).BodyTemplateId("inboxdocuments2").ColSpan(75).RowSpan(2);
}
c.Add().Header(h => h.Text("Прикрепленные документы")).BodyTemplateId("attachments").ColSpan(25).RowSpan(1);
c.Add().Header(h => h.Text("Рассылка")).BodyTemplateId("distributions").ColSpan(25).RowSpan(1);
})
.Reorderable()
.Resizable()
.Events(e=>e.Resize("onTileResize"))
)
The following article is a detailed explanation of what you can do. Basically, put the templates in external files and load them as needed (say, with Ajax), and put them in the DOM. Make sure they are loaded before using them in a widget initialization though.
https://docs.telerik.com/kendo-ui/framework/templates/load-remote
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
I have a standard installation (like samples):
<meta charset="utf-8"></meta>
<script src="../ckeditor.js"></script>
With HTML content with many <div contenteditable="true"> blocks. I need to configure each editor by local or an external configTypeX.js file,
<script>
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor, element = editor.element;
if ( element.is( 'h1', 'h2', 'h3' ) ) {
editor.on( 'configLoaded', function() {
editor.config.toolbar = [
[ 'Source', '-', 'Bold', 'Italic' ]
]; // BUG: about "Source"?? NOT AT INTERFACE!
});
} else {
// WHERE PUT THIS ITEM?
customConfig: 'configType2.js';
}
});
</script>
So, my problem is
How to do a customConfig in this context?
Where the "best complete documentation", about config menus (editor.config.toolbar) without online configuration-tool, where I can understand how to put and remove menu itens with correct names? Here nothing about how to fix the bug of 'Source' in a full installation.
I do,
git clone git://github.com/ckeditor/ckeditor-releases.git
cd ckeditor-releases
cp samples/inlineall.html samples/myinline.html
and edit samples/myinline.html with the code above.
For inline editors the standard Source button is hidden, because it is not possible to have different modes other than wysiwyg. Therefore for those editors new plugin was created - sourcedialog, but it is not included in any of builds by default. You can build editor with this plugin using online CKBuilder or by using one of presets with all parameter. For example: ./build.sh full all. Remember also to load sourcedialog plugin (using config.extraPlugins = 'sourcedialog').
If you want to freely configure inline editors, then you should take a look at inlinebycode sample. First you need to disable automatic editors initialization on editable elements and then call CKEDITOR.inline() on elements you want to become editors:
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable1', {
customConfig: 'editableConfig.js'
} );
CKEDITOR.inline( 'editable1', {
toolbar: [ ... ]
} );
I am using the following code to add ckeditor to my pages.
<textarea class="ckeditor" name="editor1"></textarea>
I would like to define a few toolbar configurations as not all of the textareas in my application need a full toolbar.
I have customized the default toolbar configuration for my needs, but would like to break this down even further to a more basic toolbar for some of my textareas.
Is there a way to do this if I am using the class attribute to set ckeditor?
It's not possible to have different configurations for editors created by class name. In such case, only the global CKEDITOR.config is considered.
Still there's easy workaround for this problem. First, put this script in the top of the document:
<script>
CKEDITOR.replaceClass = null; // Disable replacing by class
</script>
Now define the data-custom-config property (as config.customConfig) for each <textarea> you want to replace like this:
<textarea class="ckeditor" data-custom-config="myCustomConfig.js">
Moo
</textarea>
Finally use the following code to manually replace editors by class name (assuming your class is ckeditor). This code will replace all textareas of the class ckeditor with CKEditor instance driven by the config defined in data-custom-config attribute:
var textareas = Array.prototype.slice.call( document.getElementsByClassName( 'ckeditor' ) ),
textarea, cfg, customCfg;
while ( ( textarea = textareas.pop() ) ) {
textarea = new CKEDITOR.dom.element( textarea );
cfg = {};
if ( ( customCfg = textarea.getAttribute( 'data-custom-config' ) ) )
cfg[ 'customConfig' ] = customCfg;
CKEDITOR.replace( textarea.getId(), cfg )
}
And now comes the cherry on the top. Put your custom toolbar config in myCustomConfig.js:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
];
};
Of course you can modify this code to involve jQuery for easier element selection, use some object literal instead of config.customConfig and so on. This is just a showcase of how the problem can be solved.