I am copying html code which has "ul","li" tags, clicking "Source" and pasting it to CKEditor. However, when i go to design, it replaces those tags with "". Is this a bug or did i configure something wrong? Below is the config.js file content.
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: ['clipboard', 'undo'] },
{ name: 'editing', groups: ['find', 'selection', 'spellchecker'] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: ['mode', 'document', 'doctools'] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
{ name: 'paragraph' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
config.filebrowserImageBrowseUrl = '/Admin/BrowseImage';
config.filebrowserImageUploadUrl = '/Admin/UploadImage';
I'm assuming that you're using latest CKEditor (4.1) which comes with Advanced Content Filter. It means that lists will be cleared out of your content unless you have either list plugin loaded with all the features (buttons and commands) or explicitly defined config.allowedContent to accept lists.
It also means that if you remove list buttons, editor assumes that you don't want list in your content and they're simply gone. Your config.toolbarGroups has no list entry and this the root of your problem. You can check whether tag is allowed by typing this in your console:
CKEDITOR.instances.yourEditorInstance.filter.check( 'li' );
>> false
When you add something like this to your config, lists will be back in the editor with UI:
{ name: 'paragraph', groups: [ 'list' ] }
If you really want to preserve your toolbar but allow lists, you can specify:
config.extraAllowedContent = 'ul ol li'.
Also read more about allowedContent rules to know more and use things intentionally.
Related
I have script "lint:prettier": "prettier --check --ignore-unknown \"**/*.*\"",. Then I run it, I get successful result but in github actions I getting erorrs
Github action lint-action workflow:
- name: Run linters
run: npm run lint:prettier
.prettierrc.js:
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
endOfLine: 'auto',
};
.eslintrc.js:
module.exports = {
parser: '#typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:react/recommended', // Uses the recommended rules from #eslint-plugin-react
'plugin:#typescript-eslint/recommended', // Uses the recommended rules from the #typescript-eslint/eslint-plugin
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
},
},
rules: {
'react/prop-types': [2, { ignore: ['children'] }],
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
};
How can I fix it?
Need help with el-dropdown to parse contents from express parsed json.
Tried https://medium.com/html-all-the-things/hatt-vue-js-2-9b34557f0305 this tutorial and seems there is no option to parse contents from JSON.
/*dropdown in index.vue, simplified*/
<el-dropdown>
<el-button type="primary" trigger="click">dropList<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu>
<el-dropdown-item command="someCommandWhichIsNotYetWritten">{{getList}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
/*script*/
export default {
data() {
return {
getList: []
}
}
/*The returning JSON is as follows*/
result {
metaData: [ { name: 'NAME' } ],
rows: [
{ NAME: '131' },
{ NAME: '132' },
{ NAME: '138' },
{ NAME: '139' },
{ NAME: '142' },
{ NAME: '193' },
{ NAME: '194' },
{ NAME: '235' },
{ NAME: '241' },
{ NAME: '44' }
]
}
PS: I know these comment lines doesn't work in all cases. Just added to clarify to what I did.
In this code I see all the contents of JSON, but I want to list those numbers (NAME) individually which connects to a command(a href) or something.
PS: As I understand el-dropdown command="someCommand" is similar to <a href> or something.
When your data is loaded you need to assign it to a local component data, f. e:
this.getList = result.rows
Dropdown items have to be created in a loop (read more about v-for directive in vue docs):
<el-dropdown-item #command="todo(item)" v-for="item in getList" :key="item. NAME">{{item.NAME}}</el-dropdown-item>
To handle command from piece of code above you'd have to create local method named todo.
Assuming that my angular app is provided data shaped as:
[
{
name: 'object1',
type: 'checkbox'
},
{
name: 'object2',
type: 'dropdown',
options: ['opt1-1', 'opt1-2']
},
...
]
The aim is to populate the DOM with these objects. The type of elements I can have (such as checkbox, dropdowns) is predefined. Also, I will need these to interact together as they will be part of an interactive form. How can I store references to these on the ts side.
I need some solution in ExtJS.I have tree store:
Ext.onReady(function(){
var storeTree = Ext.create('Ext.data.TreeStore', {
autoLoad:false,
expanded: false,
proxy: {
type: 'ajax',
url: 'getOneLevelChilds',
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true,
children:[]
},
...
]
});
and when my tree loads at the first time I load last selected child (for example yesterday I open tree and select one. I saved it's JSON on database. so now Expand my tree)
storeTree.load({
url: 'getLastSelectedChild'
});
OK, everything works! but now I need some solution.
when I load my tree at the startup (when it was loaded) I have JSON:
[
{"id":3, "text":"first",},
{"id":4, "text":"second",},
{
id:"0", text: "third", expanded: true, children:
[
{
id:"1", text: "child1", leaf: true
},
{
id:"2", text: "child2", leaf: true
}
]
},
]
but I also save selected node id in database. I know that id="2" was selected yeasterday. How can I select automatically that node at startup? (Only at startup, only when my tree will be loaded). how can I do that?
P.S when I use proxy in tree Store, selection is not workin like this:
var record = this.getStore().getNodeById('1');
this.getSelectionModel().select(record)
but it works when I dont use Proxy.
and also, I need that selection only at sturtup
Assuming by "only at startup" you mean with the store's first load event and you actually have a tree panel (otherwise you cannot select a node):
treeStore.on({
'load': function(store) {
var node = store.getNodeById(2); // your id here
treePanel.getSelectionModel().select([node]);
// alternatively, if also want to expand the path to the node
treePanel.selectPath(node.getPath());
},
single: true
});
I have a JSONStore like :
OrdersStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
OrdersStore.superclass.constructor.call(this, Ext.apply({
storeId: 'ordersStore',
url: '/ajaxSupport.action',
root: 'rows',
baseParams: {
action: 'getorderlegsearchgrid'
},
fields: [
{
name: 'orderId'
}
]
},
cfg));
}
});
new OrdersStore();
This store is attached to a grid : 'pendingOrdersGrid'.
When I do:
alert(Ext.util.JSON.encode(this.pendingOrdersGrid.getStore().getAt(0)));
I hope to get the first record. But I get 'null'
I can't give you a complete answer from this information but some hints:
don't extend a store with a fixed storeId, url or fields! That's really bad design
if possible use browser that supports a console (Firefox with firebug or IE with developer toolbar [or FF4/IE9]) and debug the content of your store in the console.
to read the content of a record try something like this.pendingOrdersGrid.getStore().getAt(0).data.orderId