I recently came across this BBCode (Bulletin Board Code) editor named SCEditor. It's the first one that I found so I started using this one, but i am not really familiar with parsers and stuff. I need it for showing news on my website. So basically:
Admin types the news content using the editor.
Now it gotta save (I don't know how to save its output (for example images?)).
The main page loads it and shows as news (how do I load it and then convert to BBCode again?)
Here's the simple code i am using:
<form action="add-news.php" method="post">
<input
type="text"
name="newssubject"
placeholder="Subject"
required="required field"
class="form-control" style="width: 98%">
</input> <br>
<textarea
id="newsenter"
cols="110"
rows="20"
name="newsbody">
</textarea><br>
<button
style="float:right; margin-right: 10px;"
type="submit"
name="newsset"
class="btn btn-success">
Post
</button>
<a href="mod.php">
<button
type="reset"
style="float:right; margin-right: 10px;"
class="btn btn-danger">
Cancel
</button>
</a>
</form>
<script>
var textarea = document.getElementById('newsenter');
sceditor.create(textarea, {
format: 'bbcode',
style: 'minified/themes/content/default.min.css'
});
</script>
webpage image
You can use SBBCodeParser. SCEditor and this class were coded by the same person. So it would be more compatible.
from this answer : https://stackoverflow.com/a/17900286/5902691
Related
I am working on a job-listing project that fetches jobs based on the selected country, now I am trying to create a search box that changes my text to tags just like StackOverflow's way of adding tags. I already have the figma design but implementing is the problem.
Here is the figma link: https://www.figma.com/proto/UE9D4alg1970WXIDnLAfVzHz/listing-by-country?node-id=96%3A0&scaling=min-zoom
<div class="input-group input-group-search">
<input id="search-text" value="" type="search" class="form-control" placeholder="Enter Job listing according to Countries">
<div class="input-group-btn">
<button class="btn btn-primary ml-2" id="search-submit" type="submit">Search</button>
</div>
</div>
I expect the result to produce tags immediately after or inside the search box. Thanks in advance
You could use something like: https://github.com/yairEO/tagify
or even:
https://selectize.github.io/selectize.js/
Google is your friend.
I'm stuck here. I want a button (in this case; the Send-email button) to trigger mailto without opening an email client, I want it to automatically send (in JS, smtp) . I don't know if I asked too much and if this is even possible.. This is my form:
<form id="form">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
<input id="username" type="text" class="form-control blender-pro-book form-text" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
<input id="message" type="text" class="form-control blender-pro-book form-text" placeholder="Message" aria-describedby="basic-addon1">
</div>
<p class="error-holder"><span id="error" class="error blender-pro-book"><i class="fa fa-exclamation-triangle"></i>Try again please!</span></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
<button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>
</div>
</div>
</form>
I've tried putting in several codes but they all result in opening an email client. Then, I discovered SmtpJS.com. I have put the script code in my index file, but I have no clue where to put this code:
Email.send("from#you.com",
"to#them.com",
"This is a subject",
"this is the body",
"mx1.hostinger.nl", */ That's my hosting SMTP /*
"username",
"password");
I just want this button to send an email:
<button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>
Can you please tell me where to put it in my form?
Thank you a lot!
#Ty Q.'s answer is the best approach, but after reviewing SmtpJS, this is how you'd use it:
<html>
<head>
</head>
<body>
<form id="form">
<!--form goes here-->
<input type="submit" value="Submit" />
</form>
<script src="http://smtpjs.com/smtp.js"></script>
<script>
function sendMail(e){
event.preventDefault();
console.log('This will send the mail through SmtpJS');
Email.send("from#you.com",
"to#them.com",
"This is a subject",
"this is the body",
"smtp.yourisp.com",
"username",
"password");
}
function init(){
document.getElementById('form').onsubmit = sendMail;
}
window.onload = init;
</script>
</body>
</html>
Why use some JavaScript Emailing service? Just use PHP.
PHP is a server-sided language. Using commands like $To = $_POST['to']; and $From = $_POST['from'];, you can acquire data sent from a form element.
I recommend you read the PHP manual on the Mail function in order to learn how to send an e-mail using PHP. PHP Mail function It's quite simple actually. If you don't know much of PHP, just go to W3Schools.com's PHP tutorials.
<form method="POST" action="mymail.php">
<input name="to" type="text" placeholder="To:" value="" />
<input name="from" type="text" placeholder="From:" value="" />
<input name="cc" type="text" placeholder="CC:" value="" />
<!-- Blah Blah Blah, your code goes here, I'm not very good at this site -->
<input type="submit" value="Submit" />
</form>
In the above code, it uses a form element with the attributes method and action. Method tells the client that it's going to run in POST, or the more secure version of GET. GET can be seen in a URL like this: https://mywebsite.co/index.php?input=Hi
Unlike GET, POST cannot be seen in the URL, thus it is harder to interfere with. In other words, POST is safer to use. Action represents the file the data is going to be sent to. The server will process the data and it will interpret it into the code (if provided). INPUT tags must have a "name" in order for them to be receivable by the server. The "type" represents whether the INPUT will be just regular "text", a "password", or a "submit". Submit is a button which'll tell the form to send the data when clicked. Placeholder is an input attribute for TEXT and PASSWORD which will show the specified input when the value is null. Value is the attribute which basically contains the parts you want the server to receive. Except for the button, SUBMIT. The value for the SUBMIT button is just the text the button will show. You do not gather data from the button itself.
I use Roxy Fileman to manage images and files in my CMS. The filemanager has a custom option to insert files from a text field with a button. When the button is clicked the filemanager open. This option is based on the text field ID. My problem is that I have multiple text fields so I have made the ID:s unique. But how can I add these ID to txtFieldId in the path?
This is the first text field with ID 1
<input type="text" name="img" id="txtSelectedFile1" class="textfield" >
<button class="btn btn-default" onclick="openCustomRoxy2()" type="button">Select image</button>
The second one with ID 2
<input type="text" name="document" id="txtSelectedFile2" class="textfield" >
<button class="btn btn-default" onclick="openCustomRoxy2()" type="button">Select image</button>
Here's the div with the iframe that opens the filemanager when the button is clicked. This is where I need to add the ID:s to the txtFieldId.
<div id="roxyCustomPanel2" style="display: none;">
<iframe src="/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile" style="width:100%;height:100%" frameborder="0">
</iframe>
So i finally manage to solved it with help from thedarkone. The different from the answer in the link is that I left the ID in the text field unchanged and added the src function to the button.
<script>
function go(pth) {
document.getElementById('roxy').src = pth;
}
</script>
<div id="roxyCustomPanel2" style="display: none;">
<iframe id="roxy" src="about:blank" style="width:100%;height:100%" frameborder="0"></iframe>
</div>
<input type="text" name="img" id="txtSelectedFile1" class="textfield">
<button class="btn btn-default" onclick="openCustomRoxy2(); go('/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile1');" type="button">Select image</button>
<input type="text" name="document" id="txtSelectedFile2" class="textfield">
<button class="btn btn-default" onclick="openCustomRoxy2(); go('/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile2');" type="button">Select image</button>
What I could get from your use case, would probably be best solved by this answer. It has both a JS solution and an pure html solution. I would prefer JS as you wouldn't have to write the whole src in each, and you are already doing that, seeing that your are using functions.
Changing iframe src with Javascript
I have been trying to put a font awesome or glyphicon (or even an image) inside a submit button. This quickly falls apart, and I need to implement another option. I have seen a few ways of doing this, but I don't know which is the "right" or better way.
The three contenders I've seen are:
divs
links
buttons
Which is the best way to get an image / icon inside a "submit" button?
Wouldn't all three need a JS component?
This is how bootstrap add glyphicon to button object:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bootstrap button with glyphicon
The button option does not need JS. I have tested it and you can see a working example using Font Awesome here https://jsfiddle.net/mikhailjan/sf9s28et/5/ or just see the code below:
<form action="add_person.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" class="button">
<i class="fa fa-user-plus"></i> Add Person
</button>
</form>
Jonathan Anctil is correct, the button needs to have type="submit" for the form to work normally.
I work for a news company, and we want to be able to submit breaking news to reddit easily. I'm trying to create something that will login and post a link to reddit from just a url on our website.
Anyway, I am trying to use Javascript to click the buttons to login and I'm having problems.
Here's the button code right here:
<button class="btn" tabindex="4" type="submit">login</button>
which seems to submit this form:
<form class="login-form-side" onsubmit="return post_user(this, 'login');" action="http://www.reddit.com/post/login" id="login_login-main" method="post"><input type="hidden" value="login-main" name="op"><input type="text" tabindex="1" maxlength="20" name="user"><input type="password" tabindex="2" maxlength="20" name="passwd"><div style="display: none;" class="error WRONG_PASSWORD field-passwd">invalid password</div><span style="display:none" class="error RATELIMIT field-ratelimit"></span><span style="display: inline;" class="error RATELIMIT field-vdelay">you are doing that too much. try again in 1 minute.</span><div class="status error" style="display: none;"></div><div id="remember-me"><button tabindex="4" type="submit" class="btn">login</button><input type="checkbox" id="rem-login-main" tabindex="3" name="rem"><label for="rem-login-main">remember me</label>recover password<div class="clear"></div></div></form>
Anyone have any idea how to do this?
Reddit has an extensively documented API that can be accessed with POST and GET requests. Also, is there any reason you're using JS to manipulate the DOM? You could use one of the wrappers instead of manually changing the HTML DOM.