Loved WYSIWYG BBCode editor

I have been looking for this exact integration (CKeditor in Kunena) for one of our client's sites. We would be willing to pay for getting this editor integration done on that site. Would that help finish up this project? Is there a way I can contact you about that?

Hi

I will take a look at it this weekend, as a heatwave is expected and I don't go outside during hot weather.

I just wanted to see if you have had a chance to work anymore on the editor. I know you mentioned earlier in the thread about posting a file with what you have so far. I did not see that attachment anywhere, if you could post that, perhaps we could get someone to finish it up so we could use it for our project.

I have had a quick look again at it, but the next stage is more than I have time for. I will bundle up the files etc and put something up here over the weekend, also with an explanation as to how it works and what needs doing.

The project, as it were, is in 2 parts. The first is to get the editor working on a dummy page where the editor replaces a textarea on the page by placing an iframe over the textarea (hiding it). What happens is that you edit in the iframe, and the editor code translates that to Kunena bbcode and puts this, as you type, in the now hidden textarea. Similarly, if you are going to edit a post, Kunena puts the bbcode into the textarea, and the editor translates this to WYSIWYG code for the iframe. A 2 way process.

Translating the Kunena bbocde into the editor WYSIWYG oode was not so hard. However, in the editor iframe, you will have html tags (like bold), paragraphs and divs. The divs are used for such things as text alignment, and the div has some inline style. It is this latter div with style code that is hard to do. the current editor, as I have it, simply strips out all divs. It needs to do a select case before doing that, to only conditionally strip out divs.

Maybe inspiration will hit me as I check over the code before uploading it.

The second stage is to then splice it all into the Kunena page code. I am sure others can do this.

OK

I have made a zip file with all the files in. Be aware that this is an edit of CKEDitor and thus for the purposes of using it JUST with Kunena, many of these files are likely redundant.

The first key file is in the root, called bbcode.html. This demos how it works. What you SHOULD see is 2 boxes. The top one has the WYSIWYG editor, as it stands to date, and in the bottom one SHOULD be the underlying Kunena bbcode. You can edit the html file to change what is in the bottom box at the time you load bbcode.html to test how the code converts this to WYSIWYG.

Each time you change the content of the top WYSIWYG box, the border of the bottom box goes green as it is processed and converted to Kunena bbcode. Note: the code to display the bottom box is a bit flaky and sometimes doesn't display as bbode but instead shows the WYSIWYG!!

Also in the bbcode.html file is how to initialize the WYSIWYG window

The real work is being done in the plugin.js file, which is inside the plugins > bbcode folder (note, I have left a copy of the original ckeditor version in the folder too, for comparison).

It has 2 main jobs to do:

1. Convert bbcode to WYSIWYG upon opening the editor (for example, editing a post, or quoting from a previous post).
2. Convert WYSIWYG to bbcode ready for posting.

To do this it swaps the tags between kunana's bbcode and html tags, and vice versa.

The issue comes when a kunena bbcode tag is not simple, or the kunena bbocde tag does not have a direct html tag replacement, but instead has a div with inline style (such as align left).

Edit: The file would not upload!!! You can instead download it from here

Hi,

How can the likes of Vbulletin and so on use a editor just fine and safely.

I am not fused about all the HTML code but a simple bb code editor that outputs it visually would be amazing to have.

Regards