Ckeditor for latest vanilla 3 is much needed

diona754

Ckeditor for latest vanilla 3 is much needed someone please help

donshakespeare

how much $$$ needed?

R_J

I totally agree that there is a strong need for a Rich Editor alternative. And why not CKEditor?

In fact I have toyed around with Pell, Trix, TrumboWygg, EasyMDE & ProseMirror in the last weks/months. But everytime I start with something like that I face some most probably trivial JavaScript problems that I cannot overcome.

I tend to prefer small scripts that's why I never would have given CKEditor a chance. But it might be good for getting into that new JavaScript-land. I have started working on it. But some basic things are not working yet, most notably the editor content must be cleared after a comment is posted.

I would like to have that all jQuery free. Just because I guess there is no need for jQuery.

What's working:

• Vanillas BodyBox is replaced with CKEditor (even for editing comments)

Open ToDos:

• Free from jQuery
• Delete editor content after posting
• File Upload
• Smilies?
• Mentions
• Tags
• Ensure CKEditor is only loaded if format is HTML
• Increase heigth of editor window on startup
• Make it work on Activity comments

There are a lot of things to do. But maybe some JS-savvy person can support me in some of the problems...

rbrahmson

JQ is great! and we mix it with JS. We use JQ as well as JQUI (datepicker!) and JQMobile.

Shadowdare

Good job, @R_J. Does CKEditor itself require jQuery? As long as Vanilla still requires jQuery and loads it on the page, I suppose it's okay to mix it in when necessary. Also, I believe CKEditor's license is compatible with GPL2 so that's good.

I actually checked out Trumbowyg and EasyMDE for a non-PHP project recently too. Rich Editor is nice for forums, but for some applications like writing news articles or most blog posts, a full WYSIWYG HTML editor is much nicer. For example, integrated media manager (some WYSIWYG only provide it as a paid plugin), special HTML blocks for image galleries, and aligning and resizing images (images should not always be centered/featured in my opinion).

On a related note, block editors like WordPress' new Gutenberg and Ghost's editor aren't bad at all for blogging. In a forum, the feature set can be simplified, but fuller editors can be beneficial for certain types of content.

rbrahmson

Here's a code snippet from a function with JQ and JQUI:

if (c('EnabledPlugins.jqueryui',false) && $dropdown == false) {

      echo $sender->Form->TextBox($field, ['maxlength' => 10, 'id' => $field, "placeholder" => $tip,

             "value" => $value, "class"=> $class, "title" => $title]);

      $id = '$("#'.$field.'")';

      echo '<script Type="text/javascript"> '.$id.'.click(function(){'.

         $id.'.datepicker({dateFormat:"yy-mm-dd",minDate:-366,maxDate:"+1Y +1D",changeMonth: true,

   changeYear: true }).datepicker("show"); }); </script>';

    }

charrondev

https://open.vanillaforums.com/discussion/comment/259466#Comment_259466

Just to give some tips here:

Delete editor content after posting

We have an event that fires when comments have been submitted. Listen to that you can clear the bodybox. It might be named for comments, but it happens to be used for all bodyboxes. Here's kind of how Rich Editor does it

        const form = quill.container.closest("form");
        form && form.addEventListener("X-ClearCommentForm", () => {
            // Implement your clearing logic here.
        });

Mentions

This is one of the more complex pieces of Rich Editor and advanced editor. Placing the mention box is really, really hard. Placing and and announcing properly to screen-readers that it's available and it's state is even harder.

If you just want the completion results though, you might want to take a look at UserSuggestionsActions and UserSuggestionsModel. That has:

• Fetching data from the /api/v2/users/by-names endpoint.
• Lots of local caching.
• Normalizing names with accents and special characters.
• Sorting by most recently active users.
• Preventing unnecessary extra requests if we already have all of the possible results for a character combination and can just narrow them.

Ensure CKEditor is only loaded if format is HTML

This is best to do in PHP gdn_form_beforeBodyBox_handler.

About the state of Rich Editor

If you actually want a WYSIWYG editor, but just take issue with some decisions made in the Rich Editor implementation, I'm happy assist anyone that wants to contribute. The following items our on the roadmap, but have not been implemented due to lack of time and manpower.

• A standard toolbar option for Rich Editor ("following" paragraph and inline menus are static and always visible).
• Selecting specific paragraphs from within a quote.
• Deleting embeds on mobile (I'm actually working on this one myself this week).
• Any bugs that might exist.
• Shift-Enter to create single line breaks.
• Setting to text to specific theme-defined colours.

If you just have opposition to a WYSIWYG editor in general, I would recommend continuing to use Advanced Editor. Personally I really like markdown, but I understand a lot of non-technical people prefer a WYSIWYG editor.

R_J

Thanks for the feedback! CKEditor is a good choice since there are a lot of plugins which make implementing other features quite easy. Mentions is really easy. I'm quite happy with what I have right now: https://github.com/R-J/rj-ckeditor/wiki

It has been very easy to do the uploads with the media api, but the result in the Media table is very unsatisfying right now and i also would like to see thumbnails being created automatically. That's why I think I have to invest some time in that

donshakespeare

I just bypass the whole vanillaF upload process altogether. But that is just me. I use elFinder

R_J

@charrondev that by-names() endpoint is very much what I need. But pulling in all those requirements from UserSuggestions-Modules is beyond my knowledge and I would assume that they would blow up the code very much. Furthermore integrating them with what CKEditor offers is beyond my capabilities, too.

Since the result of the endpoint isn't exactly what I need and I would like to add a field to the result, I tried to write a wrapper for it like that:

       $usersApiController = new UsersApiController(
           GDN::getContainer()->get(UserModel::class),
           GDN::getContainer()->get(Gdn_Configuration::class),
           GDN::getContainer()->get(CounterModel::class),
           GDN::getContainer()->get(ImageResizer::class),
           GDN::getContainer()->get(ActivityModel::class),
       );

       $search = 'syst';
       return $usersApiController->index_byNames(['name' => $search]);

But the result is always:

Fatal Error in Vanilla\Web\Controller.permission();

Session not available.

The error occurred on or near: /usr/share/nginx/html/vanilla/library/Vanilla/Web/Controller.php

79:      * @param int|null $id The ID of the record we are checking the permission of.
80:      */
81:     public function permission($permission = null, $id = null) {
82:         if (!$this->session instanceof SessionInterface) {
83:             throw new \Exception("Session not available.", 500);
84:         }
85:         $permissions = (array)$permission;
86: 

Can you see what I am missing?

R_J

Ah, whatever... I see I added a complexitiy layer to it.

       $usersApiController = GDN::getContainer()->get(UsersApiController::class);
       $search = 'r*';
       $result = $usersApiController->index_byNames(['name' => $search]);
       echo $result->render();
       return;

That works, I just have to find out how to work with the Data object, but I assume that will be no problem, with the getData and setData methods

R_J

@diona754 Here is a version which might not work a 100% but there is not much missing, I'd say: https://github.com/R-J/rj-ckeditor 😎

There is an ugly CSS glitch with the "type here" placeholder and I would be thankful if someone could assist with that.