Easy BBCode Editor (Looking for people who know HTML, JS, CSS, SQL, PHP, etc)

BlockWare

Hello. I thought the other day about how easy it would be to make posts if you could just type what you want the post to look like on Word, Docs, or another text processor, then convert that document to BBCode. I thought for a second and it dawned on me that I could create something like that. A simple engine that lets you design colorful forum posts wihout getting tangled in tags. It would be invaluable to many users who find working with BBCode to be tedious.

I'm looking for people who are interested in this idea and know the languages of the Internet. If you would like to join, just comment! Thanks!
By the way I typed this up on an iPhone so it isn't the most high-quality post

ASEMAZING

Interesting idea! It would help a ton. I'm not that great at programming/making anything that has to do with a language such as C#, Python, Javascript, but I'm working on learning it! If I learn enough I'd be happy to help!

Hope you can support,
-ASEMAZING

Jrehd3

I know HTML, CSS, Javascript and a bit of Ruby. My website is back up and running so you can check it out. I also have a GitHub account.

I know what you mean about typing it up on phones, I am type this up on my Windows Mobile! (tedious…)

Last edited by Jrehd3 (May 29, 2016 10:32:50)

NDSDNS

BlockWare wrote:
Hello. I thought the other day about how easy it would be to make posts if you could just type what you want the post to look like on Word, Docs, or another text processor, then convert that document to BBCode. I thought for a second and it dawned on me that I could create something like that. A simple engine that lets you design colorful forum posts wihout getting tangled in tags. It would be invaluable to many users who find working with BBCode to be tedious.

I'm looking for people who are interested in this idea and know the languages of the Internet. If you would like to join, just comment! Thanks!
By the way I typed this up on an iPhone so it isn't the most high-quality post

Maybe…. That would be hard.

Jrehd3

I wrote a simple script in Angular that would help process inputs. Note the three buttons do not do anything. I don't know how to make that work. Could you take a look at it to see if you can make it work. Just chuck the script into a HTML Document.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<button class="button"><b>B</b></button><button class="button"><u>U</u></Button><button class="button"><i>I</i></Button>

<div ng-app="myApp" ng-controller="myCtrl">

<input type="text" ng-model="bbcode"><br>

BB Code: {{bbcode}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
   
});
</script>

</body>
</html>

Last edited by Jrehd3 (May 30, 2016 07:46:46)

NDSDNS

Jrehd3 wrote:
-snipped-

I don't know that Angular is the best way to take this, maybe

<!DOCTYPE html>
<html>
<head>
<title>BBcode Editor</title>
</head>
<body>
<button style="font-weight:bold;" id="bold">Bold</button><button style="font-style:italic" id="italic">Italic</button><button style="text-decoration:underline;" id="underline">Underline</button><br/>
<textarea id="main" style="font-family:sans-serif;"></textarea>
</body>
</html>

This is only a small snippet though, project is here.

Jrehd3

Who knows? The real problem is actually getting it to work. In theory, we can set the text as the variable and use the buttons to modify it, but I don't know how. Also, we will be limited by what languages we can use by where we host it. For example, if we post it on GitHub, we cannot use PHP. In your project I saw you were aiming to inject the bbcode tags into the text field like the scratch editor. From the original post, I gained the impression that the interface was to work somewhat like MS Word, where the text changes to bold in the editor. I have updated my code a little bit, Mainly added the CSS style sheet. I kept it internal because Angular is designed to make one page web apps. Also, I had an another idea. You know how you can get system info in scratch like this : My browser / operating system: Windows 8.1, Firefox 46.0, Flash 21.0 (release 0), well, we could add this in, and other things like IP and Language. Just a thought. Sorry I wrote like a dogs breakie.

I will be hosting this page on my website here.

<!DOCTYPE html>
<html>
<title>BB Code Reader </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<style> 
textarea {
    width: 100%;
    height: 200px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 4px solid #ccc;
    background-color: #f2f2f2;
    font-size: 12px;
    
}

p {
    width: 100%;
    height: 200px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 4px solid #ccc;
    background-color: #f2f2f2;
    font-size: 12px;
    
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">

<h3>Text</h3>
<button class="button"><b>B</b></button><button class="button"><u>U</u></Button><button class="button"><i>I</i></Button><button class="button"><del>S</del></Button><button class="button"><mark>M</mark></Button>
<form>
  <textarea ng-model="bbcode">Example... </textarea>
</form>

<h3> BB code </h3>
<p>{{bbcode}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.bbcode= "Example...";
   
});
</script>

</body>
</html>

Last edited by Jrehd3 (May 30, 2016 08:28:08)

NDSDNS

Jrehd3 wrote:
-snip-

Ha Ha Ha. You think it's gonna be that easy! Javascript is definitely what we're going to want here, although it will take extensive coding.

Jrehd3

It was always going to take extensive coding. Also, can you get onto blockware, cause as soon as I try to go to his profile it says the server is scratching its head.

NDSDNS

Jrehd3 wrote:
It was always going to take extensive coding. Also, can you get onto blockware, cause as soon as I try to go to his profile it says the server is scratching its head.

Hmm.. Not working for me either???

Jrehd3

I have tried it ob Windows with Firefox, Chome, IE, and Opera, on Linux Ubuntu With Firefox, Chrome, and the inbuilt browser. I have also tried it on Windows Phone with Edge, Uc and Opera…. Nothing?!?!?! What is going on?

Liv4pink

I know HTML and am learning JS but your probably not gonna accept cuz I'm 9..but I'm pretty good with js and html so far…
I'll give you a simple script
(Its for making a button that says hoi and PAIIIIII(hi and pie) and its called click me)

<!DOCTYPE html>
<html>
<body>

<button onclick=“tikli('hOi','PAIIIIII')”>
Click me </button>
<p id=“demo”></p>

<script>
function tikli(firstname,lastname) {
document.getElementById(“demo”).innerHTML = firstname + “————————– ” + lastname;
}
</script>

</body>
</html>

Last edited by Liv4pink (May 31, 2016 21:49:15)

NDSDNS

Liv4pink wrote:
I know HTML and am learning JS but your probably not gonna accept cuz I'm 9..but I'm pretty good with js and html so far…
I'll give you a simple script
(Its for making a button that says hoi and PAIIIIII(hi and pie) and its called click me)
<!DOCTYPE html>
<html>
<body>

<button onclick=“tikli('hOi','PAIIIIII')”>
Click me </button>
<p id=“demo”></p>

<script>
function tikli(firstname,lastname) {
document.getElementById(“demo”).innerHTML = firstname + “————————– ” + lastname;
}
</script>

</body>
</html>

It's not a thing you apply for, everyone's just working on it. Nice that you're learning!

Jrehd3 wrote:
I have tried it ob Windows with Firefox, Chome, IE, and Opera, on Linux Ubuntu With Firefox, Chrome, and the inbuilt browser. I have also tried it on Windows Phone with Edge, Uc and Opera…. Nothing?!?!?! What is going on?

The browser does not matter.
EDIT: Also, I'm 9 too! Age doesn't matter.

Last edited by NDSDNS (June 1, 2016 00:27:25)

Liv4pink

awesome

Jrehd3

Unless it is IE!! Do you want to set up a Github project or something like this to start it up, once we get onto BlockWare?

Last edited by Jrehd3 (June 1, 2016 06:09:37)

NDSDNS

Jrehd3 wrote:
Unless it is IE!! Do you want to set up a Github project or something like this to start it up, once we get onto BlockWare?

I think a codepen would be better for now, also, I'm looking in to something very easy: SCEditor just has almost everything and converts to BBcode.

Jrehd3

Alrighty. I have a question. Can code pen deliver fully fledged websites? Also, it looks like you have the editor under control, so do you think I should get started on a good looking website. I will do a better job than on my website.

NDSDNS

Jrehd3 wrote:
Alrighty. I have a question. Can code pen deliver fully fledged websites? Also, it looks like you have the editor under control, so do you think I should get started on a good looking website. I will do a better job than on my website.

No, it is for experiments. But I shall be able to send you an html document with js and css.
EDIT: Also, only keyboard shortcuts are working.

When clicked the buttons unselect the text

Last edited by NDSDNS (June 2, 2016 12:31:24)

Liv4pink

so..Can I help?

Jrehd3

Liv4pink wrote:
so..Can I help?

Of course you can! Just contribute any way you can! My source code is here, and NDSDNS's is here (his is better). It would probably be good if you have a Codepen account (like NDSDNS) or a GitHub account (like me). Also, it would be good if you could get onto blockware, because it keeps returning a 404 error for us.

NDSDNS wrote:
Jrehd3 wrote:
Alrighty. I have a question. Can code pen deliver fully fledged websites? Also, it looks like you have the editor under control, so do you think I should get started on a good looking website. I will do a better job than on my website.
No, it is for experiments. But I shall be able to send you an html document with js and css.
EDIT: Also, only keyboard shortcuts are working. When clicked the buttons unselect the text

Okay, well, to host it online, we can use GitHub pages. It is very simple to use. I can get cracking on it now. I should also probably ask you, do you have a GitHub account?

Discuss Scratch