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
Related
Does anyone know how to test vuetify v-select with laravel dusk?
I've tried $browser->select('size', 'Large'); without success
this is one of the v-selects that i want to test
<v-flex class="form__item">
<v-select
id="estatus"
dusk="estatus"
v-model="form.id_estatus"
label="Estatus"
:items="estatus"
item-text="nombre"
item-value="id"
v-validate="{ required:true }"
data-vv-name="estatus"
data-vv-as="estatus"
:error-messages="(errors.collect('estatus'))"
required
></v-select>
</v-flex>
And this the generated HTML
When v-select is clicked, shows the option list in other part of the HTML
Click on the .v-select element and wait for the select to open up:
$browser->click('.v-select');
$browser->waitFor('.v-menu__content');
Then you can select an option by index:
$browser->elements('.v-menu__content a')[2]->click();
Or by text (using XPath):
$selector = "//div[#class='v-menu__content menuable__content__active']//div[text()='State 3']";
$browser->driver->findElement(WebDriverBy::xpath($selector))->click();
(1) In the Vue template:
Wrap the <v-select> with a <div id="selectStatus"></div>
(2) In the Dusk test, use:
$browser->click('#selectStatus .v-select');
$browser->waitFor('.menuable__content__active');
$browser->elements('.menuable__content__active a')[1]->click();
$browser->waitUntilMissing('.menuable__content__active');
$browser->assertSeeIn('#selectStatus .v-select','theStatusIExpectToSee');
— OR —
The <v-select> can be tested without wrapping it in a <div id="foo"></div> if we use a slightly more complicated strategy.
Instead of putting the id on a div wrapper, we can put the id directly on the v-select or even rely on text content contained within the v-select with the following strategy (involving xpath):
use Facebook\WebDriver\WebDriverBy;
public function keyOfParentContainingItem($elements, $itemName, $itemValue = null){
$elWithItemKey = null;
$itemNamePrefix = ($itemName !== 'text()') ? '#' : '';
$itemValueMatchString = ($itemValue !== null) ? '="'.$itemValue.'"' : '';
foreach($elements as $k=>$v){
$xpath = './/*['.$itemNamePrefix.$itemName.$itemValueMatchString.']';
if(!empty($v->findElements(WebDriverBy::xpath($xpath)))){
$elWithItemKey = $k;
}
}
return $elWithItemKey;
}
public function testMyVSelect(){
$this->browse(function (Browser $browser) {
$browser->visit('/myAddress');
$els = $browser->elements('.v-select');
$els[$this->keyOfParentContainingItem($els,'id','idOnVSelect')]->click();
$browser->waitFor('.menuable__content__active');
$menuEls = $browser->elements('.menuable__content__active a');
$menuEls[$this->keyOfParentContainingItem($menuEls,'text()',"some text")]->click();
$browser->waitUntilMissing('.menuable__content__active');
$els = $browser->elements('.v-select');
$key = $this->keyOfParentContainingItem($els,'text()',"some text");
$this->assertTrue($key !== null);
});
}
Using Vuetify 1.5.14.
Click on the v-select element for it to list the options, then wait for the dropdown-menu class to be present before selecting an element from the list (2 in the example below) by clicking on the third tag in the menu list.
Finally, wait until the dropdown-menu class disappears before moving onto the next part of the test.
$browser->click('#region')
->with('#region', function ($vSelect) {
$vSelect->waitFor('.dropdown-menu')
->elements('.dropdown-menu a')[2]->click();
})
->waitUntilMissing('.dropdown-menu');
I'd like to use the CKEditor 5 Inline or Balloon editor on a form submission, but I'm having difficulty.
I can get the submission to work perfectly w/ Classic Editor but the Inline Editor prevents me from typing in the field.
Here is my code:
<script type="text/javascript">
InlineEditor.create( document.querySelector( '#ck' ) );
</script>
Here is the HTML:
<div class="form-group">
<label>Comment</label>
<textarea cols="80" rows="10" name="comment" class="form-control" id="ck">foo
</div>
On the page, the editor shows up, but I am unable to type into it on Safari (Mac).
I looks like this was possible in CKEditor 4, it is possible in 5?
Unfortunately, InlineEditor and BalloonEditor are not meant to replace <textarea> element. ClassicEditor works in this case because it just replaces the whole element with its own containers, but this is not the case for other editors.
CKEditor 4 was kind of one solution to suit all the needs. There were a lot of things happening under the hood. With CKEditor 5 we give you builds and an API, but the integration needs to be done by the outside developer. I am not saying this will never change, although this is the status for now.
Additionally, at the moment, neither editor will replace <textarea> value as you type.
If you want to use ClassicEditor, you might want to replace <textarea>'s value with editor data on form submission.
const textarea = document.querySelector( '#ck' );
ClassicEditor
.create( textarea )
.then( editor => { window.editor = editor } );
document.getElementById( 'submit' ).onclick = () => {
textarea.value = editor.getData();
}
If you would like to use InlineEditor or BalloonEditor, you need to use <div> instead of <textarea>. You could create a hidden input field and set its value to editor data in a similar fashion as above.
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 am somewhat new to Angular and trying to learn how to use Kendo Grid without jQuery using Angular. I get the jQuery code that is used for the widget configuration is written in javascript but i am not getting the HTML directives.
<kendo-grid options="mainGridOptions">
What does "options" attribute mean ? I am assuming its an attribute that the kendo-grid (as defined by the directive) widget has ? But when i go the documentation, I don't see it in the configuration of fields drop-down ?
You should use k-options like this...
<kendo-grid k-options="mainGridOptions"></kendo-grid>
... and then on your controller scope you can expose your options object as so.
...
$scope.mainGridOptions = {
dataSource: {
data: myData
},
height: 550
};
...
This is how you reference the options object.
In jQuery based Kendo UI it is passed into the constructor like this...
$('myGrid').kendoGrid({
dataSource: {
data: myData
},
height: 550
});
As a side note, most if not all configuration options are available directly on the directive with the k- prefix.
For Example...
<kendo-grid
k-data-source="myData"
k-height="550"
></kendo-grid>
.. and then you would just expose your data on the controller...
...
$scope.myData
...
Another note is that if you use the directive as an attribute like this...
<div kendo-grid="myGrid"
k-data-source="myData"
k-height="550"
></div>
... you are assigning it a reference allowing you to access the widget's Kendo object in the controller's scope.
...
$scope.myGrid.resize();
...
The attribute k-options can be used to store the whole widget configuration in the controller. This attribute can also be used in other Kendo components like scheduler, date picker etc.
Here an example for Kendo datepicker implemented with the k-options attribute:
<div ng-app="app" ng-controller="MyCtrl">
<input kendo-date-picker k-options="monthPickerConfig">
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
$scope.monthPickerConfig = {
start : "year",
depth : "year",
format : "MMMM yyyy"
};
});
</script>
When a form with a textarea using CkEditor is submitted using ajax the post is empty on the server side.
If I remove CkEditor, the value is posted. Any ideas?
On submit, run this code:
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
.. basically for AJAX, you need to force CKEditor to update your textareas so they contain the data you see in the CKEditor windows. See this question for more details.
You don't really need to update anything with JS. All you have to do is to make sure your textarea (the one you replace with CKEDITOR.replace() on $(document).ready()) has the same name as the property you want to set value of, e.g.:
<textarea id="editor" name="Body">#Model?.Body</textarea>
This works for me:
CKEDITOR.replace( 'content' );
function updateAllMessageForms()
{
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}