I am using "ckeditor4-react" editor to add content for an email. I want to add tokens or tags list in it. Is this possible to add custom token select list inside toolbar.
package link:: https://github.com/ckeditor/ckeditor4-react
Please suggest how can I add custom toolbar select list field inside react ckeditor 4.
You can define
const editorToolbar = [
{
name: "basicstyles",
groups: ["basicstyles", "cleanup"],
items: [
"Bold",
"Italic",
"Underline",
"Strike",
"Subscript",
"Superscript",
"-",
"RemoveFormat",
],
},
{
name: "paragraph",
groups: ["list", "indent", "blocks", "align", "bidi"],
items: ["NumberedList", "BulletedList", "-", "Outdent", "Indent"],
},
{ name: "links", items: ["Link", "Unlink"] },
{
name: "insert",
items: ["Image", "SpecialChar"],
},
];
and then use that in config
<CKEditor
name="editor"
config={{toolbar: editorToolbar}}
/>
Related
enter image description here
This is my api response.So I have network data like this :
const data = {
nodes: [
{
id: "ETH",
svg:
"https://cdn-icons-png.flaticon.com/512/2891/2891526.png",
},
{
id: "BTC",
svg:
"https://cdn-icons-png.flaticon.com/512/3033/3033143.png",
size :400
},
],
links: [
{ source: "ETH", target: "BTC" },
]
};
What I want to do is the response of persons(persons.personalData) object that is the name of person I want that to be nodes of network. I cant make it work. Any idea?
i want users to bold, highlight text only but not text typing
i want to disable text typing from ckeditor 5
i am using ckeditor 5 with react.js to build writing plateform but i want from users to use bold, highlight, comment features and stop users from typing extra text
toolbar: [
"undo",
"redo",
"heading",
"bold",
"italic",
"link",
"bulletedList",
"|",
"imageUpload",
"insertImage",
"insertImageFromUnsplash",
"blockQuote",
"code",
"codeBlock",
// "insertTable",
"mediaEmbed",
"removeFormat",
],
config.toolbar = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }#something like this
]
i tried to remove all plugin from toolbar but it did not stop from adding and typing extra text
image
Try 'restricted editing mode'
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Bold, RestrictedEditingMode, ... ],
toolbar: [ 'bold', '|', 'restrictedEditing', ... ],
restrictedEditing: {
allowedCommands: [ 'bold' ]
}
} )
I am learning to build a blog using Sanity CMS and React. I am new to Sanity.
I should be able to insert code snippets in my blog posts. So, I have installed the code-input plugin.
According to the link here, after I install the plugin I have to use the following code in my schema types.
I have no idea where do I insert the code.
Please help.
My folder structure is as follows:
sanityblog/blockContent.js
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* {
* name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
*/
export default {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
// Styles let you set what your user can mark up blocks with. These
// correspond with HTML tags, but you can set any title or value
// you want and decide how you want to deal with it where you want to
// use your content.
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" },
],
lists: [{ title: "Bullet", value: "bullet" }],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" },
],
// Annotations can be any object structure – e.g. a link or a footnote.
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url",
},
],
},
],
},
},
// You can add additional types here. Note that you can't use
// primitive types such as 'string' and 'number' in the same array
// as a block type.
{
type: "image",
options: { hotspot: true },
},
],
};
sanityblog/schema.js
// First, we must import the schema creator
import createSchema from "part:#sanity/base/schema-creator";
// Then import schema types from any plugins that might expose them
import schemaTypes from "all:part:#sanity/base/schema-type";
// We import object and document schemas
import blockContent from "./blockContent";
import category from "./category";
import post from "./post";
import author from "./author";
// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
// We name our schema
name: "default",
// Then proceed to concatenate our document type
// to the ones provided by any plugins that are installed
types: schemaTypes.concat([
// The following are document types which will appear
// in the studio.
post,
author,
category,
// When added to this list, object types can be used as
// { type: 'typename' } in other document schemas
blockContent,
]),
});
If you installed the plugin correctly, it's now available as a schema type to be used in any of your other schemas. So, to answer your question, you can put that code anywhere you want code blocks in your Sanity studio. I'd strongly suggest going over the content modelling documentation 😉
Specifically to your question, assuming you use the sanityBlog/blockContent.js field for the content of your posts, you can add it there. Here's how that would look like:
export default {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
// ...annotations, styles, lists and marks you already have
},
{
type: "image",
options: { hotspot: true },
},
// Add the code block here 👇
// it'll show up as one of the blocks available in your
// Portable Text Editor
{
type: "code",
title: "Code block",
}
],
};
For specifics on the portable text / rich content field (type: "block"), refer to the block type documentation. If you want to take it one step back, refer to the general block content documentation.
Hope this helps 🙌
I want to create a tree view with search nodes using ul/li from JSON data in react js without using any external library.
Here is the sample of my JSON data.
-
[ { value: "General", label: "General", count: "12 / 30", }, { value: "Accounting", label: "Accounting", count: "17 / 30", }, { value: "Labour Management", label: "Labour Management", count: "05 / 30", children: [ { value: "Labour ManagementChild", label: "Labour ManagementChild", children: [ { value: "Labour ManagementSub Child", label: "Labour ManagementSub Child", }, ], }, { value: "Labour ManagementChild2", label: "Labour ManagementChild2", }, ], }, ]
Suppose your JSON data is stored in a variable called tree
and you have some random format of your data in the li tags
then you can go with
const traverseNode = (node) => {
return (
<li key={node.label}>
{node.label}:{node.value} {node.count}
{node.children
? node.children.map((childNode) => (
<ul>{traverseNode(childNode)}</ul>
))
: null}
</li>
);
};
return <ul>{tree.map((node) => traverseNode(node))}</ul>;
Recursive solutions are helpful with such problems. I suggest taking a look again at data structures and algorithms for them (for example on programiz). Your structure is not exactly a tree, but a polytree.
Just started using Quill and find it very useful. My projects require plain text editing. Specifically I'm using quill as a form to enter YAML code. The dash, "-", is a key item in YAML. The problem is Quill automatically formats the line as a bullet.
Is there a way to disable automatic bullets?
Kevin
As mentioned in the comments, whitelist things you'll allow in the "formats" option (not the toolbar area)
var editor = new quill("#someElemId", {
modules: {
toolbar: [
'bold',
//{ 'list': 'bullet' },
{ 'indent': '-1'},
{ 'indent': '+1' },
{ 'color': ['black', 'red', 'blue', 'green'] },
'link',
'clean'
]
},
formats : [
"background",
"bold",
"color",
"font",
"code",
"italic",
"link",
"size",
"strike",
"script",
"underline",
"blockquote",
// "header",
"indent",
// "list", <-- commented-out to suppress auto bullets
"align",
"direction",
"code-block",
"formula",
"image",
"video"
],
theme: 'snow', // snow bubble
});
Quill's built in Keyboard module is responsible for auto formatting lists. You can override or disable this behavior by importing and extending the keyboard module like so.
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: undefined,
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
If you still list detection for other input ("* " for example), you can change the regex that the 'list autofill' binding matches like so
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: {
...Keyboard.DEFAULTS.bindings['list autofill'],
prefix: /^\s*?(\d+\.|\*|\[ ?\]|\[x\])$/
},
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
Here is a working example: https://codepen.io/josephdangerstewart/pen/dyNEGoj
Further documentation on Modules can be found on the Quill website: https://quilljs.com/docs/modules/#extending
Looking at https://quilljs.com/docs/formats/ there doesn't appear to be a way to disable a specific format, but you may be able to simply create a list of all formats and remove the list format.
Just write:
modules: {
keyboard: {
bindings: {
'list autofill': {
prefix: /^\s*()$/
}
}
}
}
This will ignore automatically ordered lists.
However, you still use bullets manually, by clicking the indent command or using the tab key.