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' ]
}
} )
Related
I want the editor to let the user change the editor's content text colour.
Here is my code:
import { CKEditor } from 'ckeditor4-react';
export default function Editor() {
let config={
toolbar: [
[ 'Source' ],
[ 'Styles', 'Format', 'Font', 'FontSize' ],
[ 'Bold', 'Italic' ],
[ 'Undo', 'Redo' ],
['TextColor', 'BGColor'],
[ 'About' ]
],
extraPlugins: 'easyimage',
removePlugins: 'image',
cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
cloudServices_tokenUrl:
'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt'
}
let hello=()=>{
console.log("hoi");
}
return (
<CKEditor
config={config}
initData="<p>Hello from CKEditor 4!</p>"
onBlur={hello}
onInstanceReady={() => {
console.log('Editor is ready!');
}}
/>
)
}
However, the font colour setting button does not show in the Ckeditor4 toolbar.
Would you tell me how to solve the problem?
extraPlugins: ['easyimage', 'colorbutton'],
What the .....
Just add the following statement to enable the color button.
config.extraPlugins = 'colorbutton';
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}}
/>
I'm using react-summernote in my application with the following configuration. I want to implement table add, remove column and row feature through popover functionality. I have added popover settings as given in documentation but somehow it is not reflecting any popover for the table. The following image will show more details of the issue
Expectation:
Current table not showing any popovers which are marked in yellow in the above image.
I'm using react-summernote: 2.0.0 & I used popover configurations in react editor option
<ReactSummernote
className="rich_text_global"
value={this.props.value.toString()}
onChange={this.props.onChange}
options={{
lang: 'en-EN',
height: 350,
insertTableMaxSize: {
col: 20,
row: 20
},
popover: {
image: [
['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']]
],
link: [
['link', ['linkDialogShow', 'unlink']]
],
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
],
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
]
},
dialogsInBody: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link']]
]
}}
/>
The table popover doesn't display simply because there is no such code to initialize and display it in the js file of react-summernote (The latest version of react-summernote still depends on summernote version 0.8.3 which doesn't support this feature at all)
In order to have the popover, you can checkout the source code of react-summernote and rebuild it with summernote version 0.8.12 or later versions
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.
I am trying to display math-equations in a Sencha view component (extends: Ext.Container), using a Ext.Label Component and MathJax JS. (As was suggested answering my other question: Display math symbols in Ext.js / Sencha Touch)
This is the initialization of the view component:
Ext.define('TIQuiz3.view.Question', {
extend: 'Ext.Container',
...
requires: ['Ext.Label', ...],
config: {
fullscreen: true,
...
layout: {
type: 'vbox',
align: 'stretch'
}
},
initialize: function() {
this.callParent();
...
var questionLabel = {
xtype: 'label',
style: {
'border':'1px solid black',
'background':'white'
},
margin: 10,
padding: 10,
html: "<div>Es sei $L = \{011, 01, 11, 100\}$ \"uber dem Alphabet $\Sigma = \{0,1\}$.</div>",
flex: 1
};
...
this.add([...,questionLabel,...]);
}
I have included a local copy of MathJAX in the app.json file:
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "resources/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
"update": "delta"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
],
MathJax indicates to be loaded successfully.
But the output of the label does not display math properly. Instead it simply looks like this:
Es sei $L = {011, 01, 11, 100}$ "uber dem Alphabet $Sigma = {0,1}$.
Is displaying math with MathJax and HTML possible using a Sencha Label Component?
Any advice appreciated!
Thanks,
Thomas
Ok, thanks Peter, that brought me to the solution.
The problem was indeed the rendering of the content after the onload-event of the page.
For these cases MathJax holds a method to invoke the typesetting manually at a later time. So what I did was adding the following afterPainted-Listener to the rendered view component:
listeners : {
order : 'after',
painted : function() {
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}
Note that, as Peter pointed out, in order for the upper to work one has to configure $ to be accepted as math delimiter from MathJax - which is not default behaviour.
Thanks for the advice!