Please tell me how to upload the text image of Summernote - asp.net-core

The frontend uses angular 6 and the api uses asp.net core.
When you add an image to the body, it asks the api to save the file on the server.
By the way, when data is saved, it is saved as base64 bytes.
The database should be stored under 4000 bytes using Oracle.
Is there any way to upload an image via the image path?
I hope you can tell me how to write the uploadImagePath callback function in the angular example.
config: any = {
airMode: false,
tabDisable: true,
placeholder: '내용을 입력하세요.',
tabsize: 2,
height: '300px',
uploadImagePath: this.REST_API_ADDR + 'File/summernote',
popover: {
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
],
image: [
['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']],
],
link: [['link', ['linkDialogShow', 'unlink']]],
air: [ ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear',],],],
},
toolbar: [
['misc', ['codeview', 'undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontsize', ['fontname', 'fontsize', 'color']],
['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
['insert', ['table', 'picture', 'link', 'video', 'hr']],
],
fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times'],
}

Related

How to change react-native-mathjax default background white color?

I want to change the background color of the MathJax component. How can I do it? I tried few different solution but they won't work for me. I added custom style for 'mathJaxOptions' but it will changed only formula area color.
My code as follows, please help me to resolve this problem.
const mmlOptions = {
styles: {
'#formula': {
'background-color': '#212121',
color: '#000000',
padding: 8,
},
},
messageStyle: 'none',
extensions: ['tex2jax.js'],
jax: ['input/TeX', 'output/HTML-CSS'],
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)'],
],
displayMath: [
['$$', '$$'],
['\\[', '\\]'],
],
processEscapes: true,
},
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js'],
},
};
<MathJax
html={props?.tnode?.init?.domNode?.children[0].data}
mathJaxOptions={mmlOptions}
hasIframe={true}
enableBaseUrl={true}
color={'red'}
/>
change the background color of react-native-mathjax library

QRCodeVue3 - Load image into center of QR Code

Trying to load an image in the center of a QR Code on a Vue3 project. Been reading through the API documentation online and it appears I'm supposed to load it as a string through the "image" parameter, but every time I try to load the image by QR Code disappears entirely.
The page I'm specifically working through is here: https://www.npmjs.com/package/qrcode-vue3
Below is the current working of the code:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
image="https://cryptologos.cc/logos/ravencoin-rvn-logo.png"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
End goal I would prefer to load the image from my assets folder but I can't even get a simple image that works to load. I know it's possible because I see the examples QR codes on the npm page but no example code to demonstrate it.
Realized I needed to add the crossOrigin = 'Anonymous' as well as I implemented a v-bind to a url of my local image. Final working solution is as follows:
New component:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
v-bind:image="iconUrl"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 3, crossOrigin: 'Anonymous' }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
Loading image:
export default {
name: "HomeView",
components: {
QRCodeVue3,
},
data() {
return {
iconUrl: require('../assets/ravencoin-rvn-logo.png')
};
},

Cloudinary - add overlay text to thumbnailTransformation in image upload widget

I am using the upload image widget and I want to add a text overlay but don't know how, can someone answer me?
thumbnailTransformation: [{ width: 300, height: 300, crop: 'fill', border: "2px_solid_red" }],
You'll need to include an overlay key that's an object with overlay parameters, in this case, text specific.
For example -
thumbnailTransformation: [
{
width: 300,
height: 300,
crop: 'fill',
border: "2px_solid_red"
},
{
overlay: {
font_family: "Arial",
font_size: 20,
text: "Test"
},
gravity: "north_east"
}
]
Below is a JSFiddle you can try: https://jsfiddle.net/rhdvgy19/
All the other available text styling options can be found here -
https://cloudinary.com/documentation/image_transformations#styling_parameters

angular ag grid not working with angular 5

I want to use ag-grid in my angular 5 application
but I am unable to use as it throws an exception in my console.
My component code:
columnDefs = [
{headerName: "First Name", field: "first_name", width: 100, editable: true},
{headerName: "Last Name", field: "last_name", width: 100, editable: true},
{
headerName: "Gender",
field: "gender",
width: 90,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Age",
field: "age",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Mood",
field: "mood",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Country",
field: "country",
width: 100,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Address",
field: "address",
width: 502,
cellEditor: 'mySimpleCellEditor'
}
];
rowData = [
{
first_name: 'Bob', last_name: 'Harrison', gender: 'Male',
address: '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401)
747-0763',
mood: "Happy", country: 'Ireland'
},
];
My html code:
<div>
<ag-grid-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="rowData"
enablecolresize
enablesorting
enablefilter
rowheight="22"
rowselection="multiple">
</ag-grid-angular>
</div>
My app.module.ts code:
import { AgGridModule } from "ag-grid-angular/main";
imports: [
AgGridModule.withComponents([])
],
I am still getting the below error in my console and I am unable to run my application.
(anonymous) # bootstrap.min.js:6
compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'columndefs' since it isn't a known property of 'ag-grid-
angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'columndefs'
input, then verify that it is part of this module.
2. If 'ag-grid-angular' is a Web Component then add
'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to
suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas'
of this component. ("id-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[ERROR ->][columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="): ng:///AppModule/GridtestComponent.html#3:21
Can't bind to 'showtoolpanel' since it isn't a known property of 'ag-
grid-angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'showtoolpanel'
input, then verify that it is part of this module.
I tried almost everything but still not able to resolve this issue.
How about instead of using...
[columndefs]="columnDefs"
[rowdata]="rowData"
You use...
[columnDefs]="columnDefs"
[rowData]="rowData"
Also, basically nothing - except address - in your rowdata matches the field names of your headers. AgGrid won't render data when it has no matching header for those. Please don't try to simply insert code at random. The main page has an easily accessible Get Started page.
You need import in app.module this:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '#angular/core';
#NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
],
...

Background image link by data array

I get this error in cytoscape.js:
"Do not assign mappings to elements without corresponding data (e.g. ele p for property background-image with data field linkImagem); try a [linkImagem] selector to limit scope to elements with linkImagem defined"
Look data array:
{ data: { id: 'atr1', classificacao : '1', backgroundColor : '#F79646', nomeAtributo : 'Bancos desconfortáveis', angulo : '0', valign : 'top', halign : 'right', linkImagem : 'http://www.fec.unicamp.br/~confterm/imagens/background/nodes/8.png' }, position: { x:220, y: 300 }, selected: false, selectable: false, locked: false, grabbable: false }
Look script style options:
.selector('node')
.css({
'label': 'data(nomeAtributo)',
'text-valign': 'data(valign)',
'text-halign': 'data(halign)',
'color' : '#000',
'font-size': '11px',
'background-fit': 'fit',
'background-color': 'data(backgroundColor)',
'background-image': 'data(linkImagem)',
})
How I can solve this?
The solution is given to you in the error message. Either don't use mappers if you're not going to define the data for each matching element, or adjust your selectors so that they only match elements with the data defined.