I'm trying to build cutsom plugin based on ckeditor5-horizontal-line
and using following code for dataDowncast conversion
conversion.for('dataDowncast').elementToElement({
model: 'cut',
view: ( modelElement, { writer } ) => {
return writer.createEmptyElement( 'cut' );
}
});
my tag is rendered as <cut></cut>, meanwhile if I use <hr> tag it is rendered without closing tag.
How to render <cut> tag without closing tag?
Related
I'm having some trouble using pass to pass variables to my CKFinder3 (ASP) connector when using CKEditor4.
I create my editor instance with:
CKFinder.setupCKEditor( myEditor, {
pass: 'testVar',
testVar: 'nooice',
...
});
but the variable just doesn't seem to make it over to CKFinder.
If I add this code to the CKFinder config directly it does work though:
config.pass = 'testVar';
config.testVar = 'nooice';
That's great, but the values I want to pass will be dynamic, so I need to pass them in when I call .setupCKEditor() on the page. I've also tried using connectorInfo: 'testVar=nooice', but that doesn't work either.
Has anyone run into this? I found a great answer and example on this question, How to pass query string parameters in ckeditor for the picture (ckfinder) button?, but the described solution is basically what I'm doing and has no affect for me.
I have been able to get this working in a CKEditor5 test using:
ClassicEditor.create( document.querySelector( '#bodyContent' ), {
ckfinder: {
uploadUrl: '/ckfinder3/connector?command=QuickUpload&type=Images&responseType=json',
options: {
pass: 'testVar',
testVar: 'nooice'
}
},
...
} );
But I cannot figure it out in CKEditor4.
You pass them like so:
var editor = CKEDITOR.replace( 'editor1', {
language : 'en',
} );
CKFinder.setupCKEditor( editor, {
test : 'testvalA',
token : '7901a26e4bc422aef54eb45A',
pass : 'token,test'
});
In the example above you are passing test and token parameters.
If you are using manual integration method, you need to attach parameters to filebrowserXYZBrowseUrl configuration settings as shown below:
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: '../ckfinder/ckfinder.html?id=abc&foo=bar&test=custom',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images&id=abc&foo=bar&test=custom',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&id=abc&custom=test',
filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&id=abc&custom=test',
} );
Now the problem is that CKFinder will only pass a predefined set or URL parameters: id, type, resourceType, langCode, CKEditor and CKEditorFuncNum. If you would like to use more parameters, you need to pass them manually as CKFinder configuration settings and you need to do that in ckfinder/ckfinder.html file (you need to modify it) e.g.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>CKFinder 3 - File Browser</title>
</head>
<body>
<script src="ckfinder.js"></script>
<script>
function getUrlParams() {
var vars = {};
window.location.href.replace( /[?&]+([^=&]+)=([^&]*)/gi, function( match, key, value ) {
vars[ key ] = value;
} );
return vars;
}
var params = getUrlParams(),
config = { pass : '' },
ckfServicedParams = [ 'id', 'type', 'resourceType', 'langCode', 'CKEditor', 'CKEditorFuncNum' ];
for( var key in params ){
if ( ckfServicedParams.indexOf( key ) < 0 ) {
config.pass = config.pass.concat( config.pass ? ','+key : key);
config[key] = params[key];
}
}
CKFinder.start( config );
</script>
</body>
</html>
NOTES:
If you would like extra parameters to be sent when you upload files using CKEditor Image Dialog Upload Tab, you need to add them to filebrowserXYZUploadUrl configuration settings as well (you can use different parameters as shown in example above).
Please note these parameters aren't exactly dynamic. You define them once per editor load and can't change them afterwards unless you destroy/create editor instance or reload page with the editor.
I just started using vue-i18n and tried to use the v-on-directive (shorthand: #) in my language specific text.
What i tried to do:
// locale definition
let locale = {
en: {
withEventListener: 'Some HTML with <a #click="onClickHandler">event handling</a>'
}
}
and the vue template:
<!-- vue template be like -->
<p v-html="$t('withEventListener')" />
This doesn't throw an error but unfortunately it does not get evaluated by vue-js either. This would result to Plain-HTML like:
<p>
Some HTML with <a #click="onClickHandler">event handling</a>
</p>
So my question is if there is a way to make Vue 'evaluate' the text and thus 'translate' the directives within the text.
You can use Vue.compile to do something like this if you are including the standalone build script. I'm not familiar with vue-i18n, but this might put you on the right path.
Note that I had withEventListener to wrap it in a div because of the rules around templates.
let locale = {
en: {
withEventListener: '<div>Some HTML with <a #click="onClickHandler">event handling</a></div>'
}
}
const res = Vue.compile(Vue.t("withEventListener"));
Vue.component("internationalized", {
methods:{
onClickHandler(){
alert("clicked")
}
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
new Vue({
el:"#app"
})
With the template
<div id="app">
<internationalized></internationalized>
</div>
Working example.
This is my first time asking a question so I am a true SO newbie. I am currently working on a mobile app and I am using Parse React and Ratchet to build it. I have read the React documentations on FB github and apparently do not understand all enough to solve some problems. One of my problems is using the results of a Parse Query in the observe function of the declared ParseComponent as a value of a rendered react component, which in turn attempts to render the passed value as HTML. Below is the parent object:
export default class CategoryPage extends ParseComponent
{
observe(props,state){
return{
category: new Parse.Query('BusinessCategory').equalTo("objectId", this.props.categoryId)
};
}
render() {
return (
<div>
<Header text={this.data.category.objectId} back="true"/>
<div className="content">
<BusinessList categoryId={this.data.category.objectId}/>
</div>
<NavBar />
</div>
);
}
};
Notice I am passing the objectId of the category found in the Query as a text attribute of the Header React component. I am expecting Header as a child to use the passed property as follows:
var Header = React.createClass({
render: function () {
return(
<header className="bar bar-nav">
<h1 className="title">{this.props.text}</h1>
</header>
);
}
});
However the h1 is not rendering anything! I am thinking that this.data.category.objectId is a string and therefore should be rendered in the h1 tag as a string.
I do appreciate your answers very much.
I have a form page where the user selects a filter and a table on the bottom of the page updates. Each line in the table has a hyperlink in column one that associates a line item to an item in the database. I am not using GORM.
I need to be able to send the current filters to the controller via AJAX (functioning). Then I need to render a partial template (to a div) that loads the data created by a query based on the client's request parameters.
GSP:
....
<button onClick="generate_table()" class="pure-button">Generate Table</button>
...
<div id="selection_table">This should load with data</div>
...
JS:
//Link for AJAX
var url = "${g.createLink(action:'generate_table', controller: "statusReports")}";
//The actual call
$.getJSON(url, {
period: JSON.stringify($("#period").val()),
...
...
}, function(data) {
$('#selection_table').empty();
}).done(function(data) {
//I need to load the template at this point?
})
Controller:
def generate_table(){
def table_data = statusReportsService.generate_titles(params)
// Table data is already a map
// What do I need to render here? The template is named _selectionTable.gsp and should use table_data to generate html.
}
Partial:
I still haven't written the code for this yet. For now it is just some random text to see if I can even load the template when I press the button
In your controller:
render(template: 'selectionTable', model: table_data)
In your GSP/HTML you need to use $.get and use the following:
$('#selection_table').html(data)
That should do the trick!
So I have a page with several textareas for a custom form I made. I am able to target an individual textarea by it's ID but I would like to know if theres an easy way to have the CKeditor inline target all textareas elements or have editor select elements by their class instead. At the moment I have setup ID for each other but they are each unique, trying to figure out the best aproach but im not good with javascript and would like some assistance with this.
Current code:
<script>
CKEDITOR.inline( 'ID');
</script>
Looking for a code that would target all text areas or at lease target class instead of IDs.
Use CKEDITOR.document.find:
var elements = CKEDITOR.document.find( '.foo' ),
i = 0,
element;
while ( ( element = elements.getItem( i++ ) ) ) {
CKEDITOR.inline( element );
}
You can also use the official jQuery adapter:
$( '.foo' ).ckeditor( function() {
// Callback function code.
}, {
// Config options here
} );
You can use this:
$(".ckeditor").each(function () {
CKEDITOR.replace( $(this).attr("name") );
});
This sample shows how to automatically replace all <textarea> elements of a given class with a CKEditor instance.
To replace a <textarea> element, simply assign it the ckeditor class, as in the code below:
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
<textarea class="ckeditor" name="editor1"></textarea>
<textarea class="ckeditor" name="editor2"></textarea>
<textarea class="" name="editor3"></textarea>
Note that other attributes (like id or name) need to be adjusted to your document.
ckeditor replacebyclass