CKeditor: How to enter a protected space between words

Using Concrete / Help
1

We have a dentist website and don’t want their titles, names and specialisation break onto another line. In Drupal there is such a button in the text editor interface. Is there one in CKeditor?
Thanks for help.
Roger M.

2

The best way to achieve this would be to add a style to the style drop down on the editor. Then in CSS add a white-space: nowrap.

It explains it here.

You need to add something like this to the page_theme.php in you theme.

public function getThemeEditorClasses()
{
    return array(
        array('title' => t('No line break'), 'menuClass' => '', 'spanClass' => 'no-line-break')
    );
}
3

Thanks Tim
That works, great!
How, on the other hand can I force a non breaking hyphen?
Some names have a hyphen, like “Dr. Claudia Menotti-Barbara DDS”?

4

I would you a html hyphen or

Or try

word-break: keep-all;
-webkit-hyphens:none;
-moz-hyphens: none;
hyphens: none;

5

You may be able to specify a <nobr> ... </nobr> tag in the same way as you specify headings such as <h3>...</h3> in getThemeEditorClasses.

6

Thanks to all.
I’m still experiencing problems using any of above mentioned solutions. When I add the class to the space or hyphen it formats it in strange way. It only works when done directly in the HTML. It drives me nuts, - so many mouse trips to achieve something I have to use all the time.
BTW: In Drupal CKeditor I only have to click on an icon to add either “no-break” or “protected hyphen”
Maybe somebody has an idea.
Thanks
Roger

7

can you show us the Drupal site that you have done this on can you take the css off that?

8

Hi Roger

I guess you have to apply the class to the whole span “Dr. Claudia Menotti-Barbara DDS” in order to keep it together.
Be aware that in small columns or phone view, it would overlap column border or overlapping part is not visible on phone view.
For typesetting we made a small spacing snippet package, containing 10 spacing characters. PM me if you’re interested.

9

I cannot find any css. Asking our IT person how it is done, he told me that a plugin is adding «&nbsp» in html and it should be there in Concrete as well but I don’t see it in the settings page.

10

You could try adding special characters

image
image2359×1264 171 KB

11

Thanks for all the suggestions.

@TMDesigns: unfortunately in special charcters there’s no nbsp. But that would be the dashboard page where the nbsp plugin should appear in order to activate it. I just found out, that my colleague @Coda_zrh was already battling this problem a while ago.

If class «white-space: nowrap;» is applied to all words that works fine.
@blinkdesign thanks for mailing the snippet package. That is fast and super useful. I wonder why is this not in the marketplace.

12

If it’s important and worth the effort , someone developed a 3rd party plugin for adding a &nbsp option to RKeditor. I’ve never tried, but I’m guessing it could somehow be added to the ConcreteCMS editor if desired.

The other CKeditor plugins are at concrete/js/ckeditor/plugins

13

A long time ago, I had a conversation about that with another user. The code should still work: How to add a plugin to CKeditor with a package ? - concrete5

If you don’t want to bother with coding you can use my package instead: Content Editor Pluginator - Concrete CMS

Having said so, if all you want is to install one plugin, I suggest you use the code rather than pay $45

14

Hello
Thanks for the info. I have found those pages a while ago, but I couldn’t manage. Because of old forum settings, there were problems showing important information like seeing the full code (screenshot 1).
When I click “view entire code block” nothing happens, 2 lines are missing.

Trying to download corrected code (screenshot 2). Clicking on that link does nothing.

I do have some coding know-how, but for some reasons it didn’t work. I think it’s because scripts do not work anymore.

1
1978×522 80.3 KB

2
21000×343 116 KB

15

The code is still the same and works. Here it is complete:

use Concrete\Core\Editor\Plugin;
use Concrete\Core\Asset\AssetList;
use Concrete\Core\Support\Facade\Application;

$app = Application::getFacadeApplication(); 
$editor = $app->make('editor'); 
$pluginManager = $editor->getPluginManager(); 
$al = AssetList::getInstance(); 
$al->register('javascript', 'editor/ckeditor4/pluginHandle', 'js/plugins/pluginHandle/register.js', [], 'package_handle'); 
$al->registerGroup('editor/ckeditor4/pluginHandle', [['javascript', 'editor/ckeditor4/pluginHandle']]); 
$plugin = new Plugin();
$plugin->setKey('pluginHandle'); 
$plugin->setName('Plugin Name');
$plugin->requireAsset('editor/ckeditor4/pluginHandle'); 

if (!$pluginManager->isAvailable($plugin)) {
    $pluginManager->register($plugin); 
} 

if (!$pluginManager->isSelected($plugin)) { 
    $key = $plugin->getKey();
    $pluginManager->select($key);
}

You still have to follow the other steps to make it work.
Also make sure you follow the explanation in the other post to know where to put your plugin in your package and what to edit in the code above to make it work for your specific package and CKeditor plugin.

16

Thanks for reposting.
To properly install as a package, it needs this library as well:
use Concrete\Core\Package\Package;

As you said it installs one package unless piped. If multiple plugins are needed, your package would be the better choice.

For our particular text/typography needs we’re happy to use the @blinkdesign 's snippets package. It offers many typographic spaces.

18

For others who find it difficult to install plugins for the editor.

Here are two examples of packages of Ckeditor 4 plugins you can install, both with complete and working code.

For v.9 you might need to tweak some lines.

2 Likes
19

This one is v9 ready