By Mist on Thursday, 29 January 2015
Posted in General Issues
Replies 7
Likes 0
Views 1.5K
Votes 0
Current BBcode Editor for Komento has a layout that does not accomodate my needs.
Can you guys point me to there right file where i can style it ?

I want to move things around and play a little bit with the editor interface.
Thanks noobster. If this is usefull for anybody, here is what i did and how i achieved what i wanted.

1. I disabled the bbcode editor from Komento backend settings
- i don't need the entire text formatting stuff like italic, bold, underline, lists ... and so on
- i just needed the basic stuff: insert link, insert video, insert custom smileys, insert attachments.

2. I figure out the shortcode "structure" from the bbcode editor for video, link and custom emoticons

3. Custom emoticons shortcode (are the ones defines in Komento backend)

4. Next, i customized the Komento form template file (/html/com_komento/comment/form.php) and play with it until i obtained the designed i liked.

5. Now, we must figure out a way to insert the attachments, links, videos and emoticons into textarea, without cluttering the entire design.
I figure out that the best thing to do this is within my own modal boxes that are launched from the custom form footer (see attachments)

6. I designed the modal boxes content and setup modal box "launch" from it's corresponding button

7. Now, we must figure out a way to "insert" the shortcodes into textarea, in our own custom way.
For this, i put together some javascript that will read the "input" field from modal box, take the inserted text and "translate" it in a shortcode format inside the textarea of comment form.

This my be a little complicated for an average user, but here is a code example for inserting the video shortcode into textarea

 
<script>
$(document).ready(function(){
$( '#insert_video' ).on('click', function(){
var VDO = document.getElementById('vdo');
var video = '[video]' + VDO.value + '[/video]'
var cursorPos = $('#commentInput').prop('selectionStart');
var v = $('#commentInput').val();
var textBefore = v.substring(0, cursorPos );
var textAfter = v.substring( cursorPos, v.length );
$('#commentInput').val( textBefore+ video +textAfter );
$('#vdo').val("");
});
});
</script>


This will "read" the video link inserted by user in the input field (our custom modal box for inserting videos), apply the shortcode format to it, insert it to textarea ... and clear the input (maybe user wants to add many videos, not just one, so we need to clear the input after we inserted the video into textarea)

Obviously, we will have different javascript code, for each modal (insert simley, insert link, insert video) ... since the shortcode formatting is different for each type.

Anyway, it may be a little difficult for an average user, but i managed to put it together the way i want it. It needs just a little bit more layout touch-ups , but it looks good
·
Sunday, 01 February 2015 21:53
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Mist,

You can see the options for BBCode here: http://screen.stackideas.com/2015-01-29_1022.png in Komento>Layout>BBCode.
·
Thursday, 29 January 2015 10:23
·
0 Likes
·
0 Votes
·
0 Comments
·
Right, but i want to "re-interface" it to a much more modern minimal "flat" design.
Current design is giving me some headaches because i have a pretty long list of custom simleys and the editor is getting too clutterd.

I pretty much started out a new custom design within form.php komento template file ... but the entire bbcode editor is loaded within textarea of the form. So i need to style the loaded BBcode editor aswell
·
Thursday, 29 January 2015 10:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Mist,

It is not a simple edit I can say. It requires JS file. You can see in this file: ../media/com_komento/scripts/markitup.js. Make sure you are in Development mode. http://screen.stackideas.com/2015-01-29_1814-1.png
·
Thursday, 29 January 2015 18:15
·
0 Likes
·
0 Votes
·
0 Comments
·
Mist wrote:I pretty much started out a new custom design within form.php komento template file ... but the entire bbcode editor is loaded within textarea of the form. So i need to style the loaded BBcode editor aswell

awesome, stackteam should take advantage of your design!!
less is more!
·
Thursday, 29 January 2015 23:40
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello noobster,

Thanks for the suggestion. Couldn't agree more.
·
Thursday, 29 January 2015 23:58
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for sharing this Mist
·
Sunday, 01 February 2015 23:39
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post