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
Related
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 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 need to integrate map chart using fusion chart library in my react application. after install fusion chart library through yarn configured component including fusion chart library, but when i render the map chart it shows me below error
After having error i just watch the node modules and check the existence of file, but seems like its not there, but my fusion chart installed successfully with no error then how this happened?
Here is my code
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
class MapChart extends Component {
state = {
dataSource: {
"chart": {
showCanvasBorder: true,
canvasBorderColor: "#000000",
canvasBorderThickness: 1,
showBorder: true,
borderColor: "#000000",
fillColor: "#f1f1f1",
caption: "* USA traffic not displayed on Heat Map",
includevalueinlabels: "1",
showHoverEffect: false,
showEntityHoverEffect: false,
theme: "fusion",
},
data: [
{
"id": "27",
"value": "8",
"color" : "#f65122"
},
{
"id": "159",
"value": "3",
"color" : "#fcc50b"
},
{
"id": "142",
"value": "3",
"color" : "#f65122"
},
{
"id": "141",
"value": "9",
"color" : "#f3172d"
},
{
"id": "173",
"value": "9",
"color" : "#f3172d"
},
{
"id": "113",
"value": "5",
"color" : "#f65122"
},
{
"id": "193",
"value": "5",
"color" : "#f65122"
},
{
"id": "122",
"value": "9",
"color" : "#f65122"
}
]
}
}
render() {
return (
<React.Fragment>
<div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
<div style={{ textAlign: 'center' }}>
<ReactFC
type="worldwithcountries"
width="80%"
height="500"
dataFormat="JSON"
dataSource={this.state.dataSource} />
</div>
</React.Fragment>);
}
}
export default MapChart;
Any help on this issue would be greatly appreciated. Thanks!
Fusion Maps XT offers interactive maps to plot geographical data like revenue by regions, population by state, survey and election results effectively. You can also drop markers on the map to pinpoint places like office locations and flight routes. It has over 1000 maps including all continents, major countries and all the US states.
Fusion chart library initially not provided any collection of maps. Whenever you install fusion chart library on initial base it has only few maps file in map folder of package. Due to that reason you're file is not available in the whole package. They provided the link on their official page for download all the map related to fusion map chart.
To render these maps, you need to download the map definition files from here and copy-paste the maps folder within your fusion charts directory.
Please follow the steps
open link https://www.fusioncharts.com/download/map-definition-files
click on Download Map Definition Files(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip) which contains collection of all the maps available in Fusion Maps XTall the maps available in Fusion Maps XT
after download copy the /maps folder from this download package and paste it in your fusion charts folder.
now run you're existing application the file will be found and your react application will work as expected.
Every information already defined on it official site of fusion chart but not in proper way so with the help of link which earlier defined you'll be directly redirect to that instruction page.
On GitHub i created one repository with map chart using fusionchart library, so you can download that repository and check exact functionality of map chart.
GitHub Repository
Since you are rendering the world with countries map in your app, you need to import fusioncharts.worldwithcounties.js, however, if you install FusionCharts via npm it does not have worldwithcountries file in the map folder, to get the file you need to install fusionmaps, here is the link - https://www.npmjs.com/package/fusionmaps
This will install all the map definition files, then you can use the following command:
import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';
I'm trying to add youtube plugin plugin to Ckeditor4, anyway the plugins works fine but the icon in the toolbar is not shwoing at all.
This is the first part of code inside /youtube/plugin.js that define the youtube button on the toolbar:
CKEDITOR.plugins.add('youtube', {
lang: [ 'en', 'bg', 'pt', 'pt-br', 'ja', 'hu', 'it', 'fr', 'tr', 'ru', 'de', 'ar', 'nl', 'pl', 'vi', 'zh', 'el', 'he', 'es', 'nb', 'nn', 'fi', 'et', 'sk', 'cs', 'ko', 'eu' ],
init: function (editor) {
editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube', {
allowedContent: 'div{*}(*); iframe{*}[!width,!height,!src,!frameborder,!allowfullscreen]; object param[*]; a[*]; img[*]'
}));
editor.ui.addButton('Youtube', {
label : editor.lang.youtube.button,
toolbar : 'insert',
command : 'youtube',
icon : this.path + 'images/icon.png' //here console.log(this.path) return http://cdn.ckeditor.com/4.9.0/standard/plugins/youtube/
});
Normally when we add a new plugin such as the youtube plugin All we need is to change the path is to add these part of code into configuration:
CKEDITOR.plugins.addExternal('youtube', '../../node_modules/ckeditor-youtube-plugin/youtube/');
$rootScope.ckEditorOptions = { //ckEditorOptions represent my config variable
allowedContent : true,
extraPlugins: 'youtube',
toolbar_full: [
{name: 'youtube', items: ['Youtube']},
],
language: 'fr',
I noticed then, unfortunately the CKEDITOR.plugins.addExternal in the first line is not working right and because that line role is to define our path this.path who should not point to the CDN.
I'm sure that i'm missing something because when I try to edit manually the icon : this.path to icon : http://anylink.png the icon is showed.
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!