如何在放置光标的文本中间进行签名？
import React from 'react';
import { Link } from 'react-router';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import CKEditor from "react-ckeditor-component";
import SignaturePad from "./index";
import Dropzone from 'react-dropzone';
import request from 'superagent';
import './imageupload.css';
import Dialog from 'material-ui/Dialog';
const CLOUDINARY_UPLOAD_PRESET = 'bmzjbxoq';
const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/react-cloudinary/upload';
import FontAwesome from 'react-fontawesome';
class ContractDetails extends React.Component {
textBoxIds= ['Subscription Amount', 'Agent Name', 'NRIC/Passport Number',
'No of Preference Shares', 'Monthly Profit pay by Company', 'Contract Value',
'Contract Start Date', 'Contract End Date', 'First Pay out Date', 'Last Pay out Date',
'Subscription Amount Payback Date', 'Client (shareholder) Name','Client NRIC number','Client address','Client email','Client attn','Quarter percentage','Total Profit percentage','Profit amount','Monthly profit percentage','Additional profit percentage','Extension amount','Additional profit Amount','Company email','Company attn','Witness 1 NRIC number','Witness 2 NRIC number', 'Agent Signature', 'Client Signature', 'Witness-1 Signature', 'Witness-2 Signature'];
currentActiveTextBox;
activeEditor;
constructor(props) {
super(props);
var today = new Date(),
date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
this.state = {
date: date,
Companyemail: '',
Companyattn: '',
FirstWitnessNRICnumber: '',
SecondWitnessNRICnumber: '',
currency: '',
clientname: '-1',
templatename: '-1',
orgName: '-1',
uploadedFile: null,
picture: '',
content: "",
openSignatureDialog: false,
organizationlist: {
organizations: []
},
templatelist: {
templates: []
},
clientdetails: {
clients: []
},
singletemplate: {
template: {},
},
editorContent: ''
};
this.handleCompanyemailChange = this.handleCompanyemailChange.bind(this);
this.handleCompanyattnChange = this.handleCompanyattnChange.bind(this);
this.handleFirstWitnessNRICnumberChange = this.handleFirstWitnessNRICnumberChange.bind(this);
this.handleSecondWitnessNRICnumberChange = this.handleSecondWitnessNRICnumberChange.bind(this);
this.handleContractValueChange = this.handleContractValueChange.bind(this);
this.handleClientNameChange = this.handleClientNameChange.bind(this);
this.handleTemplateNameChange = this.handleTemplateNameChange.bind(this);
this._createContractDetails = this._createContractDetails.bind(this);
this.handleOrgNameChange = this.handleOrgNameChange.bind(this);
this._openSignatureDialog = this._openSignatureDialog.bind(this);
this.replaceText = this.replaceText.bind(this);
this.ckeditorInstanceReady = this.ckeditorInstanceReady.bind(this);
this.updateEditorData = this.updateEditorData.bind(this);
this._templateStoreChange = this._templateStoreChange.bind(this);
this._contractStoreChange = this._contractStoreChange.bind(this);
this._clientStoreChange = this._clientStoreChange.bind(this);
this.handleImageUpload = this.handleImageUpload.bind(this);
this.handleEditorChange = this.handleEditorChange.bind();
this.onChange = this.onChange.bind(this);
this.logSig = this.logSig.bind(this);
}
componentDidMount() {
TemplateAction._getOrganizationList();
TemplateAction._getTemplateList();
ClientAction._getClientList();
}
ckeditorInstanceReady(e) {
this.activeEditor = e.editor;
}
updateEditorData() {
this.state.content = _.cloneDeep(this.state.editorContent);
this.textBoxIds.forEach((id) => {
let element = document.getElementById(id);
if (element != undefined) {
if (element.value != undefined && element.value != '') {
this.replaceText(id, element.value);
}
}
})
this.activeEditor.setData(this.state.content);
}
replaceText(textboxId, value) {
var templatesToReplace = [];
const myRegexExp = /\$\$(.*?)\$\$+/g;
let findResults = myRegexExp.exec(this.state.content);
while (findResults != null) {
templatesToReplace.push(findResults);
findResults = myRegexExp.exec(this.state.content);
}
templatesToReplace.forEach(line => {
if (line[1] == textboxId) {
this.state.content = this.state.content.replace(line[0], value);
}
})
}
handleEditorChange() {
console.log("varma");
let singletemplate = TemplateStore._getSingleTemplate() || {};
console.log("inside editor", singletemplate);
this.setState({ singletemplate });
this.setState({ editorContent: singletemplate.templates.html });
}
handleOrgNameChange(e) {
this.setState({ orgName: e.target.value });
console.log(e.target.value);
}
onChange(evt) {
var newContent = evt.editor.getData();
this.setState({ editorContent: newContent });
console.log("CKEditor content", newContent);
}
onImageDrop(files) {
this.setState({
uploadedFile: files[0]
});
this.handleImageUpload(files[0]);
}
handleImageUpload(file) {
let upload = request.post(CLOUDINARY_UPLOAD_URL)
.field('upload_preset', CLOUDINARY_UPLOAD_PRESET)
.field('file', file);
upload.end((err, response) => {
if (err) {
console.error(err);
}
if (response.body.secure_url !== '') {
this.setState({
picture: response.body.secure_url
});
}
});
}
logSig = () => {
const signaturedata = this.signaturePad.toDataURL();
let oldContent = this.state.editorContent;
let elem= oldContent ? oldContent + '<img alt src=' + signaturedata + ' />' :'<img alt src=' + signaturedata + ' />';
this.setState({
openSignatureDialog: false,
editorContent:elem
})
console.log("signaturedata", signaturedata);
}
_closeDialog() {
this.setState({
openSignatureDialog: false
})
}
_openSignatureDialog() {
this.setState({
openSignatureDialog: true,
});
}
render() {
return (
<div>
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<div class="sidebar-mobile-menu-handle" id="sidebar-mobile-menu-handle"></div>
<div class="mobile-menu-handle"></div>
<div className="title-block">
<div className="row">
<div className="col-md-12 d-flex align-items-center">
<h3 className="title mr-auto"> Create/Edit Contract </h3>
<div>
<button type="submit" className=" ml-2 mr-0 btn btn-primary" onClick={this.updateEditorData}> Insert into Contract </button>
<button type="submit" className=" ml-2 mr-0 btn btn-primary" onClick={this._createContractDetails}> Save </button>
<Link to="/contractlist" type="submit" className=" ml-2 mr-0 btn btn-primary"> Close </Link>
</div>
</div>
</div>
</div>
<form name="item">
<div className="card card-block">
<div className="row">
<div className="col-md-4">
<div className="form-group d-flex">
<label className=" form-control-label text-xs-right"> Contract ID: </label>
<div className="col-sm-8 ml-2">
<input type="text" className="form-control box_ip" placeholder="Contract ID" onChange={this.handleContractIdChange} name='' value={this.state.contractId} />
</div>
</div>
</div>
<div className="col-md-4">
<div className="form-group d-flex">
<label className="form-control-label text-xs-right"> Created Date: </label>
<div className="col-sm-8 ml-2">
<input type="text" className="form-control box_ip" placeholder="Created Date" value={this.state.date} />
</div>
</div>
</div>
<div className="col-md-4">
<div className="form-group d-flex">
<label className="form-control-label text-xs-right"> Last Edited Date: </label>
<div className=" col-sm-8 ml-2">
<input type="text" className="form-control box_ip" placeholder="Last Edited Date" />
</div>
</div>
</div>
</div>
<div className="form-group row">
<label className="col-sm-2 form-control-label text-xs-right"> Last Pay out Date: </label>
<div className="col-sm-3">
<DatePicker
className="form-control box_ip"
selected={this.state.lastpayoutDate}
onChange={this.handleLastPayoutDateChange}
id="Last Pay out Date"
/>
</div>
<label className="col-sm-2 form-control-label text-xs-right"> Subscription Amount Payback Date: </label>
<div className="col-sm-3">
<DatePicker
className="form-control"
selected={this.state.subscriptionamountpayDate}
onChange={this.handleSubscriptionamountPayDateChange}
id="Subscription Amount Payback Date"
/>
</div>
</div>
<div className="form-group row">
<label className="col-sm-2 form-control-label text-xs-right"> Agent Signature: </label>
<button type='button' style={{ height: '30px' }} id ="Agent Signature" className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}>Click For Signature</button>
<label className="col-sm-2 form-control-label text-xs-right"> Client Signature: </label>
<button type='button' style={{ height: '30px' }} id='Client Signature' className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}>Click For Signature</button>
</div>
<div className="form-group row">
<label className="col-sm-2 form-control-label text-xs-right"> Witness-1 Signature: </label>
<button type='button' style={{ height: '30px' }} id='Witness-1 Signature' className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}>Click For Signature</button>
<label className="col-sm-2 form-control-label text-xs-right"> Witness-2 Signature: </label>
<button type='button' style={{ height: '30px' }} id='Witness-2 Signature' className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}>Click For Signature</button>
</div>
<div className="form-group row">
<label className="col-sm-2 form-control-label text-xs-right"> Contract Editor: </label>
<div className="form-group col-sm-12">
<br />
<CKEditor id="currentCKEditor" activeClass="editor" key={this.state.editorContent} content={this.state.editorContent} events={{ "change": this.onChange, "instanceReady": this.ckeditorInstanceReady }} />
</div>
</div>
<div className="form-group row">
<label className="col-sm-2 form-control-label text-xs-right"> Uploaded File: </label>
<div className="col-sm-3">
{/*<a className="btn btn-primary ml-0 mr-2" href="#" data-toggle="modal" data-target="#modal-media">Upload Docs</a>*/}
<div className="col-sm-8 d-flex justify-content-end">
<div className="images-container">
<div className="FileUpload" >
<Dropzone
onDrop={this.onImageDrop.bind(this)}
multiple={false}
accept="image/*">
<div>Drop an image or click to select a file to upload.
</div>
</Dropzone>
</div>
<div>
{this.state.picture === '' ? null :
<div>
<p>{this.state.uploadedFile.name}</p>
<img src={this.state.picture} />
</div>}
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<Dialog
title={
<div className="savedchart_header dashboard_savedchart">
<ul className="top_row_right list-inline clearfix" style={{ width: '100%' }}>
<li className="pull-left" > Signature </li>
<li className="pull-right"><a className="ml-2 mr-0 btn btn-primary " onClick={this._closeDialog.bind(this)}>Close</a></li>
<button type='button' style={{ float: 'right' }} className="ml-2 mr-0 btn btn-primary" onClick={this.logSig.bind(this)}>submit</button>
</ul>
</div>}
className=""
open={this.state.openSignatureDialog}
modal={false}
autoScrollBodyContent={true}
contentStyle={{ maxWidth: 'none' }}
onRequestClose={this._closeDialog} >
<div className="" style={{ height: '200px' }}>
<div style={{ backgroundColor: '#f1f1f1', width: '300px', height: '150px' }}>
<SignaturePad clearButton="true" ref={ref => this.signaturePad = ref} />
</div>
</div>
</Dialog>
</div>
)
}
}
export default ContractDetails;
为了制作签名，我创建了一个对话框，在点击提交后签名后，签名位于内容的末尾而不是放置光标的位置。
我正在使用react-signature-pad组件和react-CKEditor制作签名我无法根据文本中间编辑器中放置的光标替换签名。 请任何人帮助我在两天内完成这项功能的尝试。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？