(also on their demo page http://ckeditor.com/demo#inline)
Why is this the case? Even if I take their inline sample (http://nightly.ckeditor.com/13-02-08-08-51/standard/samples/inlineall.html) and remove the js code for separate toolbars for heading blocks, I still don't get the alignment option.
I'd like to give users the option to align headings. What am I missing?
I'm also not getting other "block" options like BulletedList, but that's less of an issue.
UPDATE: To repeat the issue you need to have contenteditable="true" applied to a heading element. So, one fix is to wrap the heading in a div with the contenteditable="true". But this doesn't help my case.
You need the Justify plugin since CKEditor 4.
Download Justify plugin here
Paste it into ckeditor/plugins/
Add the plugin to your ckeditor.
Here is the javascript code :
$(function() {
CKEDITOR.config.extraPlugins = 'justify';
});
You don't have anything more to do, Justify plugin will be automatically added to the paragraph toolbarGroup
EDIT
By alignment, I thought you were talking about right|center|left align.
Here, for h tags, we've got those groups :
if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
editor.on( 'configLoaded', function() {
editor.config.removePlugins = 'colorbutton,find,flash,font,' +
'forms,iframe,image,newpage,removeformat,scayt,' +
'smiley,specialchar,stylescombo,templates,wsc';
editor.config.toolbarGroups = [
{ name: 'editing', groups: [ 'basicstyles', 'links' ] },
{ name: 'undo' },
{ name: 'clipboard', groups: [ 'selection', 'clipboard' ] },
{ name: 'about' }
];
});
}
['basicstyles', 'links', 'undo', 'selection', 'clipboard', 'about'], there's no align group, simply add it.
You don't event have to modify anything after a new CKEditor install, this group is already in the inline basic configuration
It's impossible to enable align buttons on h2 editable. CKEditor cannot modify editable container, because that change simply wouldn't be visible in data got from editor, because editor.getData() returns innerHTML not outerHTML.
I'm also afraid that simple bypass doesn't exist. You can wrap h2 with editable div, set enterMode=BR, remove buttons like format combo from toolbar, but that would be still incomplete solution, because user will be able to remove that h2, split it by pasting some block elements or leave it somehow and write outside it. This issues may be fixed, but I guess that you don't want to spend on this another month :).
So, one year later I came back and handled it differently. I took the justify plugin, and made a copy of it that only works the elements with which the original plugin doesn't. I had to modify it to suit my needs, but commenting the following out was a start(plugin.js):
if ( editor.blockless )
return;
I don't know how interesting this is, but if anyone needs it, leave a comment and I'll post the entire source. It basically adds the text-align css to the editor element, instead of the inner block elements.
ensure you are using Full CKEditor version
Related
We work with a backend that tags words like Persons or locations. I send text to the backend and it tags me words. I have to create tags in the ckeditor frontend.
So I have the task to create editable inline elements, means they should be addable to where text is addable.
The tag must be editable.
The tag should also be visible if its empty (should be a own tree node not text attribute).
The tag should have visual highlighting, like a background-color and border radius.
If the tag is empty, its type should be added via css' ::before pseudo class and content property.
It would be nice if you can toggle it's edtiable part. Since we also need readonly tags, their are developed as seperate elements so far.
My approach so far was using text attributes applying:
writer.createText('my tag', {tag: tagType})
I was basically creating tags like you would create bold text. I was applying css styles like background-color and border radius to make it look like a tag, but this approach came to it's limits. Also with this approach you cannot have editable and non-editable tags be the same ckeditor entity, since you cannot have non-editable text, I guess.
Then I found editableElement's in the view side. The Problem is you cannot have emtpy tags since empty text is nothing. You also cannot modify the "tag" at index 0 because then you are outside of the tag, see bold behavior for this. I mean I could somehow fix it all, but I would like the tags to be their own element on model side. so I have tried this approach:
// in editingDowncast conversion:
viewWriter.createEditableElement('div', {class: 'inline'})
// this is the whole code in the ui:
this.editor.model.schema.register( 'test-tag', {
allowChildren: '$text',
allowWhere: '$text',
allowAttributesOf: '$text',
isObject: true
});
// if it is isInline: true it behaves mostly like my approach with text attributes
this.editor.conversion.for('editingDowncast').elementToElement({
model: 'test-tag',
view: (modelItem, conversionApi) => {
let { writer: viewWriter } = conversionApi;
const tagView = viewWriter.createEditableElement( 'div', {
class: 'inline'
});
return tagView;
}
})
basically EdtiableElement's work only with block elements, so I have tried to make them inline via css, setting their display property to inline-block. Here I have again the problem that when the element is empty you cannot access it anymore via cursor. So it will stay empty forever. Generelly it seems that it's behavior is kind of buggy because I guess you should not use it as inline. Basically I have many similiar issues like with the approach above.
I will keep implementing it with the first solution but I wanted to ask the community if there is any other way, maybe a less hacky way to create inline editable elements that are actual nodes in the model. Something like a span tag but on model side.
Any Ideas?
The puzzle
I'm working on a custom WordPress theme. I've created custom post types and custom taxonomies, some of which are tag style (rather than category style). All is working as it should, and the appropriate taxonomies show up where they should in their matching content types ('show_in_rest' => true).
BUT I would like to add a list of the currently existing tags to the description in the tags block.
Right now, the instructions for tags say: "Separate with commas or the Enter key." I'd like to append something along the lines of "Existing Tags: " and then the list of tags. Ideally, this would be dynamically generated, so that as clients add new tags it would update the list. For the specific site I'm working on though, even static text would be better than nothing.
What I've got so far
I found someone asking a somewhat similar question and tried using the code from one of the responses. I'm taking a modular approach, so I've put the enqueue_script in a separate php file which I'm require_once-ing...
In functions.php, I've got:
...
require_once("lib/gutenberg/tag_options.php");
...
In tag_options.php I've got:
<?php
/**
* Add a list of available tags to tag panels in the gutenberg editor.
*/
function radicati_tag_options() {
wp_enqueue_script(
'gutenberg-tag-options',
get_stylesheet_directory_uri() . '/lib/gutenberg/tag_options.js',
['wp-blocks', 'jquery'],
1.0,
false
);
}
add_action('enqueue_block_editor_assets', 'radicati_tag_options');
And in tag_options.js I've got:
window.onload = function() {
// This is code I found on the internet,
// aimed at creating a custom panel...
var el = wp.element.createElement;
function customizeProductTypeSelector(OriginalComponent) {
console.log(OriginalComponent);
return function(props) {
console.log(props.slug);
// The slug of one of my custom tag-style taxonomies is "topic"
// That's what I'm seeing in console.log, so I feel like I might
// be on the right track!
// Once I get this figured out, if need be I can write custom code
// for each of my custom tag-style taxonomies :)
if (props.slug === "topic") {
return el("div", {}, "Product Type Selector");
HELP! THIS IS WHERE IT ALL FALLS APART!
I CAN *REPLACE* THE CONTENTS OF THE TAG BLOCK
(AND THUS RENDER IT NOT A TAGS BLOCK ANYMORE)
BUT I JUST WANT TO ADD A PARAGRAPH CONTAINING
SOME TEXT, INCLUDING A LIST OF EXISTING TAGS
TO THE OTHERWISE PERFECTLY FUNCTIONAL BLOCK!
} else {
return el(OriginalComponent, props);
}
};
}
wp.hooks.addFilter(
"editor.PostTaxonomyType",
"my-custom-plugin",
customizeProductTypeSelector
);
};
TIA
Unfortunately, the documentation for messing with Gutenberg stuff is still pretty patchy, so this is as far as I've been able to get. I'll admit that my React is equally sketchy, so it's a pitiful combination :laughing: If any of you have any clues to throw my way, I would really appreciate your help!
I'm testing out CKEditor
I'm trying to get the display in the editor, to match my sites css style for displaying the end result.
What I'm trying to do is style the "wrap code" button to match the css of my site, by adding in a class.
I've seen on this page of the manual, that you can do stuff like this:
config.format_pre = { element: 'pre', attributes: { 'class': 'editorCode' } };
However, doing the same for a code block like so:
config.format_code = { element: 'code', attributes: { 'class': 'someclass' } };
Doesn't actually do anything. Anyone got a pointer on what I might be missing?
I've tested it working on other elements, so I know the config file changes are being picked up.
The one important thing is that every tag which is formatted via config.format_tagname should be also included in config.format_tags. However, this two settings (config.format_tagname and config.format_tags) works only form Block-Level elements (as stated in the manual page you referenced ).
As code element is considered as an inline one by CKEditor (see DTD), it is not possible to use this config here.
However, the easiest way to modify the elements added via Style dropdown is to edit styles.js file which is present in CKEditor directory. The dropdown styles are based on this file, so you can easily modify code element there. You can also define your custom stylesSet.
I've looked through several questions in this forum and the CKEditor site about this topic, but nothing's helped so far. First of all, I'm running CKEditor 4.3.2 on a SharePoint 2010 site, using inline editors within a jQuery UI modal dialog. Adding CKEditor to the dialog was painless, but I can't say the same for setting up a slimmer toolbar. Here's what I've done so far:
slimConfig.js
CKEDITOR.editorConfig = function(config) {
config.toolbar = [
{name: "basicstyles", items: ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]},
{name: "paragraph", items: ["NumberedList", "BulletedList"]}
];
}
Source JavaScript
setToolbar("notes");
setToolbar("access");
//. . .[several other fields]. . .
function setToolbar(divName) {
CKEDITOR.replace(divName, {customConfig: "/customConfigs/slimConfig.js"});
}
Additionally, I've set up the target fields as divs using contenteditable set to true, like this:
<div id="notes" contenteditable="true"></div>
The script seems to run well until it hits an exception on ckeditor.js line 308, where the error text is "The editor instance is already attached to the provided element." After a few more steps, it returns to the same area on line 308, at which point I get a terminal exception with the message, "Exception thrown and not caught."
I believe I have everything set up properly right now, but don't know what to make of this error. Does anyone have experience with getting customized toolbars set up?
By default CKEditor replaces all elements of contenteditable="true" with inline editors. So when you try to replace it once again, it will throw an error because it doesn't make sense.
If you want to take a full control over your editors, set CKEDITOR.disableAutoInline to false and take care of all instances manually. Of course, you can always find your instance in CKEDITOR.instances object and call editor.destroy() if you want to.
See http://docs.ckeditor.com/#!/guide/dev_inline
I'm trying to create a tooltip for a few radio button options on a page. I've got the tooltips displaying the [title] attribute easily enough, but I want to selectively format the tooltip text in a couple elements. I know I can provide content as HTML, and I've created some classes to style the content, but now the tooltips are no longer showing. I think my problem is that I am not specifying the "items" option properly. In fact, I'm not quite sure how to define my html "content" option as an item at all. Halp plays!
JS
$('#tooltip').tooltip({
tooltipClass: "tooltip-class"
items: what do?
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
});
HTML selected by JS
Thanks for reading. :)
UPDATE:
Ok! I figured it out... kinda. I was encasing my strings improperly: "<>"bad code"<>" . The solution to my problems with the content option was to put my html inside a variable and set it to content. JQuery seems to have liked that much better. My styles are showing up properly for the tooltip, but for some reason it is only working on one of three items selected for tooltips. There's nothing in the console that indicates it shouldn't work. No syntax errors, I'm selecting the correct id. I'm so confused.
I think I know what you are running into. When you use the content option you still have to include the title attribute on the element OR specify the items option as something different.
I have NO IDEA why the jQuery team decided to do this, as it seems the selector you are applying the tooltip to, would be the same thing used for the items option. Quite duplicative.
Anyway, you can change the content but make sure the element you are applying a tooltip to has the title attribute or you specify the items option with a selector which could simply match the selector you are applying the tooltip to. Odd indeed.
Example:
$('#selector').tooltip({ content: 'your content', items: '#selector' });
when you have problems with quotes, you have many options, like you said:
use another variable as you finally did
escape the "inner" qoutes with backslashes like this:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: "<div class=\"tooltip-header\">header</div><div class=\"tooltip-description\">text</div>"
});
combine single and double quotes:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: '<div class="tooltip-header">header</div><div class="tooltip-description">text</div>'
});
you second problem after UPDATE:
if you have created your link with id and you are applying tooltip with id selector
there can be only one link with same id in one html page! so if you declared more links with the same id, most likely it wont work.
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
This produces a syntax error.
Please do the following:
learn how to use your browser’s JS error console
learn the absolute basics of the JS syntax, and how to operate with strings/text literals