How do I get the title and text separately in Vue CKEditor? (like here)
this.editor.getTitle() - this.editor.getTitle is not a function
this.editor.getBody() - this.editor.getBody is not a function
this.editor.getTitle - undefined
this.editor.getBody - undefined
piece of code:
data() {
return {
editor: ClassicEditor,
editorData: '<p></p>',
editorConfig: {
plugins: [
Image,
ImageUpload,
ImageCaption,
AutoImage,
Title,
AutoSave,
Heading,
MediaEmbed,
HtmlEmbed,
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin,
],
extraPlugins: [cuteUploadAdapterPlugin],
toolbar: {
items: [
'Heading',
'bold',
'italic',
'link',
'undo',
'redo',
'ImageUpload',
'mediaEmbed',
'htmlEmbed'
]
},
heading: {
options: [
{model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
{model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
{model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
]
},
title: {
placeholder: 'title'
},
placeholder: 'body',
},
};
},
methods: {
buttonClick() {
console.log(this.editor.getTitle())
console.log(this.editor.getBody())
It seems to work:
let getTitleAndBody = function () {
let data = {
title: '',
body: '',
}
const parser = new DOMParser();
const doc = parser.parseFromString(editorData, 'text/html');
const title = doc.getElementsByTagName('h1')[0]
data.title = title.innerText
doc.body.removeChild(title)
data.body = doc.body.innerHTML
return data;
}
let data = getTitleAndBody()
data.title // get title
data.body // get body
getTitle() and getBody() functions are not defined on editor level that's why you are getting undefined as response. It is defined on plugin Title which is defined in #ckeditor/ckeditor5-heading.
So, the correct way to get the body and title is
// for getting title
editor.plugins.get('Title').getTitle()
// for getting body of the document
editor.plugins.get('Title').getBody()
Related
I am using React with webPack with tinyMCE and I have a styling issue.
I created my own btn and on click I create my html structure with classes.
like this :
<div class="test" ><p>' + date + '</p></div><p></p>'
I tried importing the stylesheet into the file where the editor is used, but it didn't help.
How to correctly connect styles using webPack and react?
var page1Config = {
title: 'Redial Demo - Page 2',
body: {
type: 'panel',
items: [
{
type: 'input',
name: 'date',
label: 'Введите Фразу',
items: [
{ value: 'meow', text: 'Cat' },
{ value: 'woof', text: 'Dog' },
{ value: 'thunk', text: 'Rock' }
]
},
]
},
buttons: [
{
type: 'custom',
name: 'lastpage',
text: 'Done',
disabled: false
}
],
initialData: {
choosydata: ''
},
onAction: (dialogApi, details) => {
var {date} = dialogApi.getData();
// problem is here class="test"
tinymce.activeEditor.execCommand('mceInsertContent', false, '<div class="test" ><p>' + date + '</p></div><p></p>');
dialogApi.close();
}
};
tinymce.init({
force_br_newlines : true,
force_p_newlines : true,
selector: 'textarea.wizard',
toolbar: 'wizardExample',
height: '900px',
setup: (editor) => {
editor.ui.registry.addButton('wizardExample', {
icon: 'code-samplelklk',
onAction: () => {
editor.windowManager.open(page1Config)
}
})
}
})
;
Example
Are you wanting to style the content in the editor via CSS? If so you can use the content_css or content_style settings in your TinyMCE configuration to pass CSS to the editor:
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
https://www.tiny.cloud/docs/configure/content-appearance/#content_style
I am trying to use multiselector from EXTJS 6.5.2
This is the code that I am using to create multiselector with the values that I need
{
xtype: 'multiselector',
title: 'I caktohet:',
name: 'Caktohen[]',
bind: '{userfullname.value}',
fieldName: 'userfullname',
viewConfig: {
deferEmptyText: false,
emptyText: 'Askush i zgjedhur'
},
search: {
field: 'userfullname',
model: 'InTenders.model.UserModel',
store: {
type: 'users',
sorters: 'userfullname',
// proxy: {
// type: 'rest',
// limitParam: null,
// url: 'api/User'
// }
}
}
}
When I call form = win.down('form') records I can get all values except the multiselector values, they show like this on console.
Anyone can help me or guide me how to get the values?
Thank you.
//Code that I'm trying to get multiselector items and save them
saveTenderForm: function (button, e, eOpts) {
var userMultiSelector = Ext.getCmp('AssignedUsers'); //save assigned users
var selectedUsers = userMultiSelector.getStore().getData(); //get store and put them in array
var me = this,
win = button.up('window'),
form = win.down('form'),
// formApplyUpload = this.getFormApplyUpload(),
// var ko = win.items.items[0].items.items[0].value;
recordtenderUsers = Ext.create('InTenders.model.TenderSaveModel');
// recordtenderUsers = form.getRecord();
// record = form.getRecord(),
values = form.getValues();
// appFile = this.getApplicationFile(),
// callbacks;
recordtenderUsers.set(values);
recordtenderUsers.set('tenderUsers',selectedUsers.items);
// // me.showMask();
// if (form.isValid()) {
recordtenderUsers.save({
success: function (recordtenderUsers, operation) {
win.close();
me.hideMask();
},
failure: function (recordtenderUsers, operation) {
me.hideMask();
}
});
You can get value using multiselector.down('grid') this will return you the grid. And grid have method getSelection().
In this FIDDLE, I have created a demo. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'form',
renderTo: Ext.getBody(),
items: [{
xtype: 'multiselector',
title: 'Multi selector example',
fieldName: 'text',
viewConfig: {
deferEmptyText: false,
emptyText: 'No value selected'
},
search: {
field: 'text',
store: {
fields: [{
name: 'text',
type: 'string'
}],
data: [{
text: 'ABC'
}, {
text: 'ABC 1'
}, {
text: 'ABC 2 '
}, {
text: 'ABC 3'
}, {
text: 'ABC 4'
}]
}
}
}, {
xtype: 'button',
text: 'Get Value',
margin:15,
handler: function (btn) {
var multiselector = btn.up('form').down('multiselector');
if (multiselector.down('grid')) {
multiselector.down('grid').getSelection().forEach(rec => {
console.log(rec.get('text'));
});
}
}
}]
});
}
});
Here is my json file
{
id: '81224112234234222223422229',
type: 'message',
message: 'vacation',
attachments: [
{
type: 'template',
elements: [
{
id: '123123123123123',
title: 'job',
text: 'job',
properties: {
code: 'IO002',
value: 'messenger/IO001,messenger2(IO)/IO002,messenger3(IO)/IO003'
}
},
{
id: '123123123123123',
title: 'Date',
text: 'date',
properties: {
code: '2017-11-09~2017-11-09',
value: '2017-11-09~2017-11-09'
}
},
{
id: '123123123123123',
title: 'Sequence',
text: 'sequence',
properties: {
code: '1',
value: '1process/1,2process/1,3process/1'
}
}
]
}
],
module: 'temp'
}
i am using react.js and i want to extract all properties
result
job code: I0002
job value:messenger/IO001,messenger2(IO)/IO002,messenger3(IO)/IO003
date code:2017-11-09~2017-11-09
date value:2017-11-09~2017-11-09
sequence code:1
sequence value:1process/1,2process/1,3process/1
i tried to execute like this
const job=elements.filter(x=>x.text==='job');
const date=elements.filter(x=>x.text==='date');
const sequence=elements.filter(x=>x.text==='sequence');
is it proper way to use filter or another way to extract data from json file?
i am new to react.js and es6,javascript.so i have no idea to display each property.
how can i solve my problem? pz give me a tip.i want to extract properties
You can use
var yourobject=JSON.parse(jsondata);
const job=yourobject.job;
I'm using Sencha 2.3.0 and I want to have a XTemplate side-to-side to a component (textfield) on a ListItem. The code above works fine for DataView/DataItem, but I want to use the grouped property that is only available on List/ListItem.
The nested Xtemplate gets rendered fine as DataItem. How can I make it work for ListItem? I'm also receptive for solutions that drop this nested structure and use the xtemplate as tpl property directly on the ListItem (of course the textfield with listeners must be implemented as well).
list
Ext.define( 'app.view.myList', {
//extend: 'Ext.dataview.DataView',
extend: 'Ext.dataview.List',
xtype: 'mylist',
requires: [
'app.view.MyItem'
],
config: {
title: "myTitle",
cls: 'mylist',
defaultType: 'myitem',
grouped: true,
store: 'myStore',
useComponents: true,
itemCls: 'myitem',
items: [
{
// some components
}
]
}
});
listitem
Ext.define( 'app.view.myItem', {
//extend: 'Ext.dataview.component.DataItem',
extend: 'Ext.dataview.component.ListItem',
xtype: 'myitem',
config: {
cls: 'myitem',
items: [
{
xtype: 'component',
tpl: new Ext.XTemplate([
'<table cellpadding="0" cellspacing="0" class="myitemXTemplate">',
//some xtemplate content
'</table>'
].join( "" ),
{
compiled: true
})
},
{
label: 'some label',
cls : 'myitemtextfield',
xtype: 'textfield',
name: 'myitemtextfield'
}
]
}
});
Thanks in advance!
Modifed /touch-2.4.2/examples/list/index.html
The model:
Ext.define('model1', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
}
});
The CustomListItem
Ext.define('DataItem', {
extend: 'Ext.dataview.component.ListItem',
xtype: 'basic-dataitem',
requires: [
'Ext.Button',
'Ext.Component',
'Ext.layout.HBox',
'Ext.field.Checkbox'
],
config: {
dataMap : {
/* getFirstname : {
setData : 'firstName'
},*/
getLastname : {
setValue : 'lastName'
}
},
layout: {
type: 'hbox',
height:'200px',
},
firstname: {
cls: 'firstname',
xtype:'component',
data:{data:'hej'},
tpl: new Ext.XTemplate([
'<H1>',
'{data}',
'</H1>'
].join(""),
{
compiled: true
})
},
lastname: {
xtype:'textfield',
css:'lastname'
}
},
applyFirstname : function (config) {
return Ext.factory(config, Ext.Component, this.getFirstname());
},
updateFirstname : function (newName) {
if (newName) {
this.add(newName);
}
},
applyLastname : function (config) {
return Ext.factory(config, Ext.Component, this.getLastname());
},
updateLastname : function (newAge) {
if (newAge) {
this.add(newAge);
}
},
applyFirstName: function (config) {
return Ext.factory(config, 'Ext.Component', this.getLastname());
},
updateRecord: function(record) {
if (!record) {
return;
}
this.getFirstname().setData({data:record.get("firstName")});
this.callParent(arguments);
}
});
The store
var store = Ext.create('Ext.data.Store', {
//give the store some fields
model: 'model1',
//filter the data using the firstName field
sorters: 'firstName',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
groupFn: function (record) {
return record.get('firstName')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
The list
xtype: 'list',
useSimpleItems: false,
defaultType: 'basic-dataitem',
id: 'list',
ui: 'round',
//bind the store to this list
store: store
I'm new to Handlebars and while I found a workaround, I'm wondering why one registered helper works and one doesn't. The example that doesn't work is an example from the HB docs.
HTML:
<ul class="global-nav clearfix">
{{#each data}}
<li>{{text}}</li>
{{/each}}
</ul>
...
<ul class="content-nav clearfix">
{{#each data}}
<li>{{text}}</li>
{{/each}}
</ul>
Data:
var nav = [
{
name: 'global',
selector: $('.global-nav'),
data: [
{
text: 'Page 1',
href: 'page1.html'
}, {
text: 'Page 2',
href: 'page2.html'
}
],
name: 'content',
selector: $('.content-nav'),
data: [
{
text: 'Section 1',
href: '#section1'
}, {
text: 'Section 2',
href: '#section2'
}
]
}
];
Compiler:
$.each(nav, function() {
var obj = this,
src = obj.selector.html(),
template = Handlebars.compile(src),
html = template(obj.data);
obj.selector.html(html);
});
HB Helper (does not work - context is undefined):
Handlebars.registerHelper('each', function(context, options) {
var ret = "";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + options.fn(context[i]);
}
return ret;
});
HB Helper (does work using this instead of context):
Handlebars.registerHelper('each', function(context, options) {
var ret = "";
for(var i=0, j=this.length; i<j; i++) {
ret = ret + options.fn(this[i]);
}
return ret;
});
Any helps is appreciated.
Before looking at the rest of the JS, can I point out that the JSON looks wrong.
Name, selector and data are overwritten the second time they occur in your JSON. If this is just because of some bits being omitted when pasting to SO, then do ignore me ;o)
But if that is the real JSON, then it needs changing before looking at any functional stuff
<script>
var nav = [
{
name: 'global',
selector: $('.global-nav'),
data: [
{
text: 'Page 1',
href: 'page1.html'
}, {
text: 'Page 2',
href: 'page2.html'
}
]
}, // this line
{ // and this line added
name: 'content',
selector: $('.content-nav'),
data: [
{
text: 'Section 1',
href: '#section1'
}, {
text: 'Section 2',
href: '#section2'
}
]
}
];
</script>