Jquery 如何在光标所在的文本中间签名？
Jquery 如何在光标所在的文本中间签名？,jquery,reactjs,ckeditor,signature,Jquery,Reactjs,Ckeditor,Signature,从“React”导入React； 从“反应路由器”导入{Link}； 从“react DatePicker”导入日期选择器； 导入'react datepicker/dist/react datepicker.css'； 从“反应CKEditor组件”导入CKEditor； 从“/index”导入SignaturePad； 从“react Dropzone”导入Dropzone； “超级代理”的进口请求； 导入“/imageupload.css”； 从“材料界面/对话框”导入对话框； const
从“React”导入React；
从“反应路由器”导入{Link}；
从“react DatePicker”导入日期选择器；
导入'react datepicker/dist/react datepicker.css'；
从“反应CKEditor组件”导入CKEditor；
从“/index”导入SignaturePad；
从“react Dropzone”导入Dropzone；
“超级代理”的进口请求；
导入“/imageupload.css”；
从“材料界面/对话框”导入对话框；
const CLOUDINARY_UPLOAD_PRESET='bmzjbxoq'；
const CLOUDINARY\u UPLOAD\u URL='1https://api.cloudinary.com/v1_1/react-cloudinary/upload';
从“react FontAwesome”导入FontAwesome；
类ContractDetails扩展了React.Component{
textBoxID=['订阅金额'，'代理名称'，'NRIC/护照号码'，
‘优先股数量’、‘公司每月利润支付’、‘合同价值’，
“合同开始日期”、“合同结束日期”、“首次付款日期”、“最后付款日期”，
“认购金额偿还日期”，“客户（股东）名称'，'客户NRIC编号'，'客户地址'，'客户电子邮件'，'客户收件人'，'季度百分比'，'总利润百分比'，'利润金额'，'月度利润百分比'，'附加利润百分比'，'延期金额'，'附加利润金额'，'公司电子邮件'，'公司收件人'，'见证人1 NRIC编号'，'见证人2 NRIC编号'，'代理人签名'，'客户签名“，”证人-1签名“，”证人-2签名“]；
currentActiveTextBox；
activeEditor；
建造师（道具）{
超级（道具）；
var today=新日期（），
date=today.getFullYear（）+'-'+（today.getMonth（）+1）+'-'+today.getDate（）；
此.state={
日期:日期:，
公司邮箱：''，
公司名称：“，
FirstWitnessNRICnumber:“”，
第二个见证人编号：“”，
货币：''，
客户端名称：'-1'，
templatename:“-1”，
组织名称：'-1'，
上载文件：null，
图片：''，
内容：“，
openSignatureDialog:错误，
组织名单：{
组织：[]
},
样板画家：{
模板：[]
},
客户详情：{
客户：[]
},
单一模板：{
模板：{}，
},
编辑器内容：“”
};
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.\u createContractDetails=this.\u createContractDetails.bind（this）；
this.handleOrgNameChange=this.handleOrgNameChange.bind（this）；
this.\u openSignatureDialog=this.\u openSignatureDialog.bind（this）；
this.replaceText=this.replaceText.bind（this）；
this.ckeditorInstanceReady=this.ckeditorInstanceReady.bind（this）；
this.updateEditorData=this.updateEditorData.bind（this）；
this.\u templateStoreChange=this.\u templateStoreChange.bind（this）；
this.\u contractStoreChange=this.\u contractStoreChange.bind（this）；
this.\u clientStoreChange=this.\u 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（）；
模板操作。_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（元素！=未定义）{
if（element.value！=未定义&&element.value！=''）{
this.replaceText（id，element.value）；
}
}
})
this.activeEditor.setData（this.state.content）；
}
替换文本（textboxId，值）{
var templatesToReplace=[]；
常量myregexxp=/\$\$（.*？\$\$\$+/g；
让findResults=myRegexExp.exec（this.state.content）；
while（findResults！=null）{
templatesToReplace.push（findResults）；
findResults=myRegexExp.exec（this.state.content）；
}
templatesToReplace.forEach（行=>{
if（第[1]行==textboxId）{
this.state.content=this.state.content.replace（第[0]行，值）；
}
})
}
handleEditorChange（）{
console.log（“varma”）；
让singletemplate=TemplateStore._getSingleTemplate（）| |{}；
log（“内部编辑器”，singletemplate）；
this.setState（{singletemplate}）；
this.setState（{editorContent:singletemplate.templates.html}）；
}
handleOrgNameChange（e）{
this.setState（{orgName:e.target.value}）；
console.log（如target.value）；
}
onChange（evt）{
var newContent=evt.editor.getData（）；
this.setState（{editorContent:newContent}）；
console.log（“CKEditor内容”，newContent）；
}
onImageDrop（文件）{
这是我的国家({
上载的文件：文件[0]
});
此.handleImageUpload（文件[0]）；
}
handleImageUpload（文件）{
let upload=request.post（CLOUDINARY\u upload\u URL）
.field（'uplo
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;