search

chishiki / perihelion

Opensource PHP Website, Webapp, Prototype Framework
MIT License
1 stars 4 forks source link

CKEditor / config.startupMode = 'source'; #21

Closed siramsay closed 3 years ago

siramsay commented 3 years ago

config.startupMode = 'source'; in ckeditor-config.js seems unneeded if you explicitly set Ckeditor to true in config.

Every time you click update the 'source' is shown instead of the WYSIWYG.

siramsay commented 3 years ago

https://github.com/chishiki/perihelion/blob/4ef575d48876a8e5509c5064710f1e01fb392c8a/deploy/src/perihelion/assets/js/ckeditor-config.js#L35

siramsay commented 3 years ago

Code on branch https://github.com/chishiki/perihelion/blob/ckeditor_config/deploy/src/perihelion/assets/js/ckeditor-config.js

chishiki commented 3 years ago

hi @siramsay this was intentional because ckeditor doesn't play well with bootstrap

what happens is:

https://user-images.githubusercontent.com/3631492/125569860-ecb8f646-ad92-49f6-a48e-3936d882abe2.mov

chishiki commented 3 years ago

@siramsay don't plan to change this unless we can find a way to make ckeditor play well in bootstrap 4.6

we leave it in there as a service to content editing newbs who can't use HTML but its suboptimal

chishiki commented 3 years ago

config.startupMode = 'source'; in ckeditor-config.js seems unneeded if you explicitly set Ckeditor to true in config,

if Config::read('ckeditor') is false the idea is not to use ckeditor at all

siramsay commented 3 years ago

Okay, I saw the message but was unsure of what that meant.

I think you need to set the Editor to allow all HTML, I think it would be a fairly simple config. It's got to do with a filter. In Drupal, you enable or disable this is a UI.

Maybe it's on this page. https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html

chishiki commented 3 years ago

Cool yeah if you can show me a better way I'm open to it. I like the sound of allowing all HTML tags. I'm not fond of a WYSIWYG overwriting everything.

siramsay commented 3 years ago

It has quite fine-grained control.

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-addRemoveFormatFilter

siramsay commented 3 years ago

Adding config.allowedContent = true; solves the issue, https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html I also added extended elements list even though it may not be need, see notes under* config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

I have tested this and works with:

<div class="many different classes okay">
<p>After a 12-year wait, the seventh-generation Nissan Z is finally here, and it looks like it&#39;ll be the Japanese sports car enthusiasts have been clamouring for. Unlike the Miata, it&#39;s got plenty of power. Unlike the GR 86, it&#39;s turbocharged.</p>
</div>

I will add detail to docs about this, maybe it could be left disabled, unsure.

If you want you can add the extended tags list above config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div'; and then config.format_div = { element: 'div', attributes: { 'class': 'row' } }; config.format_h1 = { element: 'h1', attributes: { 'class': 'overRideClassName' } }; But only one class is allowed more info https://ckeditor.com/docs/ckeditor4/latest/features/format.html

siramsay commented 3 years ago

Still writing at time of closing but here is more notes on CKEditor https://github.com/chishiki/perihelion/wiki/configuring-ckeditor