search

humhub / custom-pages

Create custom pages and widgets and share them with your users. Take advantage of a wide range of editing options, including HTML and Markdown.
27 stars 51 forks source link

Add HTML WYIWYG Editor #210

Closed luke- closed 2 years ago

luke- commented 2 years ago
yurabakhtin commented 2 years ago

@luke-

Add HTML WYIWYG Editor

Do you mean to find some WYIWYG Editor instead of current RichText editor?

wysiwyg_editor

Maybe instead of HTML Source View?

I don't find "HTML Source View", what or where is it?

luke- commented 2 years ago

image

yurabakhtin commented 2 years ago

@luke- Currently we use there the widget CodeMirrorInputWidget that just highlight HTML code like this:

CodeMirror

As I understand you want to have there a switcher between some new WYSIWYG editor and the widget CodeMirrorInputWidget. If yes, I would suggest to use a solution like TinyMCE https://www.yiiframework.com/extension/yii2-tinymce, it will be looks like this:

WYSIWYG

but there default switcher allows to switch only to HTML mode (simple textarea):

HTML

If we need to keep the current CodeMirrorInputWidget and have new WYSIWYG we can try to modify the core CodeMirrorInputWidget to add the WYSIWYG switcher inside, of course it will be works only for mode text/html.

luke- commented 2 years ago

No problem if the WYSIWYG editor does not offer syntax highlighting. The important thing is that it allows a raw HTML mode.

Also important would be that functions like file uploads work.

Would you like to research which editor is most state of the art? TinyMCE, CKEditor, ....

yurabakhtin commented 2 years ago

@luke-

Would you like to research which editor is most state of the art? TinyMCE, CKEditor, ....

I think they both are enough good.

In TinyMCE I see the source mode right inside editor, so we don't need to implement the switcher buttons:

tinymce_source

CKEditor has compact modes like this https://ckeditor.com/ckeditor-5/demo/#balloon

Of course both plugins can be configured for custom toolbar. Should I choose what editor to use?

luke- commented 2 years ago

@yurabakhtin Yes, simply choose the editor.

luke- commented 2 years ago

@yurabakhtin Please see my note regarding TinyMCE in Core.

yurabakhtin commented 2 years ago

@luke- Ok, TinyMCE is included only for this module - https://github.com/humhub/custom-pages/pull/215/commits/2e58084266b7a0673e1ec2bbee57ea7c97b5bd65

luke- commented 2 years ago

@yurabakhtin Thanks, looks good so far. Open is Source Code and File Support or?

luke- commented 2 years ago

Which licence is the TinyMCE editor?

yurabakhtin commented 2 years ago

@luke-

Which licence is the TinyMCE editor?

MIT License - https://packagist.org/packages/tinymce/tinymce, https://github.com/tinymce/tinymce-dist/blob/master/license.txt.

yurabakhtin commented 2 years ago

@luke- I have completed this, please review, let me know to add or remove some toolbar option, otherwise you can merge it.

luke- commented 2 years ago

@yurabakhtin Thanks, here some issues:

luke- commented 2 years ago

Regarding the default panel/html source, if necessary we could also add two Custom Pages Types (HTML Plain / HTML Wysiwyg) to avoid backward compatibility issues.

yurabakhtin commented 2 years ago

@luke-

File Uploads should be available

For me it works:

insert_image

yurabakhtin commented 2 years ago

@luke-

  • We should automatically / per default add a white panel without the layout looks a bit broken:

Commit https://github.com/humhub/custom-pages/pull/215/commits/ee69a031754879d7341dd87249a1b36c1535c4eb:

white_bg

  • Source Code Highlighting doesn't work for me (not critical)

For me it doesn't work too. I see it works only on the demo here https://www.tiny.cloud/, probably there is some additional plugin, I will investigate how to enable the highlighting.

yurabakhtin commented 2 years ago

@luke-

  • Source Code Highlighting doesn't work for me (not critical)

For me it doesn't work too. I see it works only on the demo here https://www.tiny.cloud/, probably there is some additional plugin, I will investigate how to enable the highlighting.

The highlighting plugin https://www.tiny.cloud/docs/tinymce/6/advcode/ is paid. I have found this free plugin https://github.com/christiaan/tinymce-codemirror and added, but I had to modify it in order to adapt for TinyMCE version 6.

Commit https://github.com/humhub/custom-pages/pull/215/commits/aaabe1470ea1a712b338e332b46a66c0af37b11b:

codemirror-tinymce

luke- commented 2 years ago

@luke-

File Uploads should be available

For me it works:

insert_image

@yurabakhtin Ah thanks, I overlooked that. I think most would look for the option rather in the editor menu.

Can you try to display the "Attach file" additionally there? https://www.tiny.cloud/docs/demo/custom-menu-item/

Any idea to support backwards compability here? If someone doesn't want a panel in the HTML custom page. https://github.com/humhub/custom-pages/pull/215/files#diff-0b39d1b710da24f667e6edc81d5df5b83068556796d8a6395cb5703416b0e427R19

yurabakhtin commented 2 years ago

@luke-

Any idea to support backwards compability here? If someone doesn't want a panel in the HTML custom page. https://github.com/humhub/custom-pages/pull/215/files#diff-0b39d1b710da24f667e6edc81d5df5b83068556796d8a6395cb5703416b0e427R19

Your link doesn't highlight any line, but it seems you mean the wrapper with .panel styles from here https://github.com/humhub/custom-pages/pull/215/commits/ee69a031754879d7341dd87249a1b36c1535c4eb, if yes, then we can add new option like "[x] Display panel wrapper around HTML page content.", but this approach requires a new additional column in the table custom_pages_page, that is not good I think, because this column will be used for all other page types.

Another solution is to create a new type extended from Html, but I am not sure how to name it.

yurabakhtin commented 2 years ago

@luke-

Can you try to display the "Attach file" additionally there? https://www.tiny.cloud/docs/demo/custom-menu-item/

Commit https://github.com/humhub/custom-pages/pull/215/commits/3ed1f365ce6e6475199d4a017e5c07a64193732b:

toolbar_upload

luke- commented 2 years ago

Your link doesn't highlight any line, but it seems you mean the wrapper with .panel styles from here ee69a03, if yes, then we can add

Yes, it's about the wrapper.

Would it perhaps be possible to set the wrapper as "default" text for new content by default? How does the WYSIWYG editor behave here?

Alternatively, it would be best to create a separate content type for the WYSIWYG editor.

a.) RAW HTML (Current Content) b.) WYSIWYG HTML Editor (New Content Type)

What do you mean?

yurabakhtin commented 2 years ago

Switch here to TinyMCE:

Clipboard - 2 Juni 2022 16_37

yurabakhtin commented 2 years ago

@luke-

Switch here to TinyMCE:

Commit https://github.com/humhub/custom-pages/pull/215/commits/f72ba92de9ac34f78eea3f59a4e9e4b3f816728c

replaced_ckeditor

yurabakhtin commented 2 years ago

@luke-

Would it perhaps be possible to set the wrapper as "default" text for new content by default? How does the WYSIWYG editor behave here?

If we add the "default" html code like:

<div class="panel panel-default">
    <div class="panel-body">
    </div>
</div>

Then it may be almost hidden for eyes in tinymce editor, because there is white background.

I can suggest to create a tinymce plugin with new toolbar button text like "Panel" or "Wrapper" or just icon some fa-square-o, when the button is pressed/active then we add the wrapper around all html page, otherwise the wrapper removed. It will works like button "B"(bold) for example. I mean the plugin like this https://github.com/humhub/custom-pages/blob/enh/210-tinymce-editor/resources/tinymce/plugins/humhubtrigger/plugin.js what I already implemented for the button "Attach Files".

Do you agree?

luke- commented 2 years ago

@yurabakhtin That with the panel plugin button sounds great! But it would be good if we could still add a panel by default for new pages.

yurabakhtin commented 2 years ago

@luke- Commit https://github.com/humhub/custom-pages/pull/215/commits/5fb8cda50055b2a809529b73b5a24ac8a2cdc81a:

wrapper_text

But it would be good if we could still add a panel by default for new pages.

I will do this later.

luke- commented 2 years ago

Looks nice, can you please add text "Panel" to the icon to make it more clearer?

yurabakhtin commented 2 years ago

@luke-

Looks nice, can you please add text "Panel" to the icon to make it more clearer?

Really I forgot to display you on the previous screenshots that there is a title, but I added the "Panel" in commit https://github.com/humhub/custom-pages/pull/215/commits/51d716e49019368d3cada699a4a7670b79efdaa5, please review:

panel-text

yurabakhtin commented 2 years ago

@luke-

But it would be good if we could still add a panel by default for new pages.

Commit https://github.com/humhub/custom-pages/pull/215/commits/ecbbdca6696ef8a5ea34aa9bc22b5140e61e9d31.

luke- commented 2 years ago

@yurabakhtin Atm the editor is a bit strange, the cursor jumps always on the first position of the line. Can you reproduce this? Also the editor doesn't load correctly on Pjax Requests.

luke- commented 2 years ago

Also on my first tests, a New Line also produces a new panel-body, which is not ideal. image image

yurabakhtin commented 2 years ago

@luke-

Atm the editor is a bit strange, the cursor jumps always on the first position of the line. Can you reproduce this?

Yes, it was my bug, sorry, fixed in the commit https://github.com/humhub/custom-pages/pull/215/commits/0b59bae6bf6d5e32b6afb094634af0f2acf10fcd

I cannot reproduce two other issues yet.

yurabakhtin commented 2 years ago

@luke-

Also on my first tests, a New Line also produces a new panel-body, which is not ideal.

Fixed in commit https://github.com/humhub/custom-pages/pull/215/commits/5b08fc64ee630247687f89e76410e91fada792a1

yurabakhtin commented 2 years ago

@luke-

Also the editor doesn't load correctly on Pjax Requests.

Could you tell me step by step how to reproduce? Because I tested with left mouse click to add and to edit a html page, also to add new Richtext element for a template, so in all cases it is loaded correctly.

luke- commented 2 years ago

See error here:

https://user-images.githubusercontent.com/4736168/174858179-a25233ed-62a4-4f03-a201-9c21d535041f.mp4

luke- commented 2 years ago

@yurabakhtin Can you please also additionally allow the HTML for Snippets? image

yurabakhtin commented 2 years ago

@luke-

See error here:

Thank you for the details, fixed in commit https://github.com/humhub/custom-pages/pull/215/commits/9254ea77e4debb182df08c7bc7e1f973fb8cd73d

luke- commented 2 years ago

@yurabakhtin Thanks works nice now.

yurabakhtin commented 2 years ago

@luke-

Can you please also additionally allow the HTML for Snippets?

Commit https://github.com/humhub/custom-pages/pull/215/commits/14a5d4292a001040dcf9e47e2b592cb884a22aa8:

html_snippet