(Possible duplicate: CKEditor - No toolbars)
I'd like to create a CKEditor instance without a toolbar. I tried defining an empty toolbar to use in the instance's config
oConfigName.toolbar = 'Custom';
oConfigName.toolbar_Custom = [];
but I get a small empty toolbar by my instance, instead of no toolbar.
I am using inline editing with CKEditor4.
Wow :) This is something that we haven't thought of while implementing toolbar. But I've just checked that you can remove toolbar plugin, because it isn't required by any other plugin.
So build your own CKEditor package without toolbar or use removePlugins configuration - e.g.:
var editor = CKEDITOR.inline( 'editable', {
removePlugins: 'toolbar'
} );
Update: In CKEditor 4.1 the Advanced Content Filter was introduced. In its automatic mode it is configured by buttons which are loaded to toolbar. Without toolbar plugin ACF is not configured, so one need to do this on his own:
var editor = CKEDITOR.inline( 'editable', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );
In CKEditor 4.9.2:
When you instanciate the editor, set toolbar option:
CKEDITOR.replace( 'editor1', {
...
toolbar: []
});
I do this in ckeditor5:
ClassicEditor
.create( document.querySelector( '.editor' ), {
licenseKey: '',
toolbar: [],
} )
.then( editor => {
window.editor = editor;
editor.isReadOnly = true;
} )
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: efxy8wt6qchd-qhxgzg9ulnyo' );
console.error( error );
} );
if you want to remove border around ckeditor 5 do this:
<style>
.ck{
border:0px !important;
}
</style>
I've turned off everything except italics, bold and underlined with this config:
CKEDITOR.editorConfig = function( config ) {
config.autoParagraph = false;
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
];
config.removeButtons = 'Strike,Subscript,Superscript,RemoveFormat';
};
There are two ways I have seen:
1) Using the removePlugins option and just remove the toolbar:
CKEDITOR.inline( 'textarea', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );
2) Using CSS - Not the standard approach: (little tricky)
Just make css to display:none the toolbar, like
.cke_inner {
display: none;
}
In version 4.13, you can hide the entire top bar containing the toolbar:
.cke_inner .cke_top {
display: none;
}
or hide only the toolbar but keep a strip of color at the top:
.cke_inner .cke_top .cke_toolbox {
display: none;
}
Hope it will help someone.
Add this this line in to config.js file
config.removePlugins= 'toolbar'
I have added new function into my project for hide/show of the toolbar.
function onClickToolbarButton() {
var bar = document.getElementById("cke_1_top");
if(bar.style.display == "none"){
bar.style.display = "block";
}else{
bar.style.display = "none";
}
//resize web page
//onresize();
}
Call this function every time, if you want hide/show toolbar.
In CKEditor 5 the easiest way without changing configuration or editor behaviour is to hide the toolbar using CSS:
.ck.ck-editor__top {
display: none;
}
Try display: none using CSS with their ids or their class:
Example:
#cke_19, #cke_18, #cke_22, #cke_46, #cke_45 {
display:none;
}
#cke_45 is for link and #cke_46 for unlink
To turn them off one by one
More correct way in CKEditor 5:
editor.ui.view.panel.element.setAttribute('style', 'display:none');
I would suggest looking at official documentation when using CKEditor 5. It covers hiding toolbar especialy when using read-only mode.
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
} )
.then( editor => {
const toolbarElement = editor.ui.view.toolbar.element;
editor.on( 'change:isReadOnly', ( evt, propertyName, isReadOnly ) => {
if ( isReadOnly ) {
toolbarElement.style.display = 'none';
} else {
toolbarElement.style.display = 'flex';
}
} );
} )
.catch( error => {
console.log( error );
} );
Related
I want to extend the WordPress (Gutenberg) default block
Paragraph to give editors the possibility to add tooltips without writing code.
Goal:
Add block paragraph and add some text
Make a text selection and click on a (new) button (should appear next to text styles)
Tooltip button should work exactly like the link button, only that it should be possible to enter text instead of a link
Working:
I added a button (Text-Style)
I can select text and I can add a class (.kf-tooltip)
I know how to add a Tooltip via JS
Missing:
How to add the Popover to enter the text for the tooltip
How to store / save this data
How to output this data as attribute (for example: data-tooltip="Lorem ipsum")
Any help would be awesome!
WordPress Plugin
<?php
/*
Plugin Name: KF Custom
*/
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'kf-custom-script',
plugins_url( 'kf-custom-script.js', __FILE__ ),
array('wp-blocks', 'wp-rich-text')
);
});
add_action( 'enqueue_block_assets', function () {
wp_enqueue_style( 'kf-custom-style', plugins_url( 'style.css', __FILE__ ) );
});
kf-custom-script.js
(function(wp){
console.log(wp);
// Create Popover
const { Popover } = wp.components;
var MyCustomButton = function( props ) {
return wp.element.createElement(
wp.blockEditor.RichTextToolbarButton, {
icon: 'editor-code',
title: 'Tooltip',
onClick: function() {
console.log('Open Popup on this event');
props.onChange( wp.richText.toggleFormat(
props.value,
{ type: 'my-custom-format/kf-tooltip' }
) );
},
isActive: props.isActive,
}
);
}
var clickHandler = function( props ) {
console.log('Open Popup on this event');
return 'test';
}
wp.richText.registerFormatType(
'my-custom-format/kf-tooltip', {
title: 'Tooltip',
tagName: 'span',
className: 'kf-tooltip',
edit: MyCustomButton,
click: clickHandler
}
);
})(window.wp)
In CKEditor5 I am creating a plugin to insert a span element to show a tooltip. The idea is to show a tooltip with a (foot)note inside of it while the element itself will display an incremental number. In CKEditor4 I made something like this with:
CKEDITOR.dialog.add( 'footnoteDialog', function( editor ) {
return {
title: 'Footnote Properties',
minWidth: 400,
minHeight: 100,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'text',
id: 'content',
label: 'Content of footnote',
validate: CKEDITOR.dialog.validate.notEmpty( "Footnote field cannot be empty." )
}
]
}
],
onOk: function() {
var dialog = this;
var footnote = editor.document.createElement( 'span' );
footnote.setAttribute('class', 'footnote');
footnote.setAttribute('data-toggle', 'tooltip');
footnote.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'content' ) );
footnote.setText('[FN]');
editor.insertElement( footnote );
}
};
});
[FN] would be transformed in an incremental number.
Now I try to make this plugin with in CKEditor5, but with no success. There are two issues I run in to. Fist, I can't manage to insert the element inside the text. Second, when I want to use the attribute data-toggle this doesn't work because of the - syntax. This is my current code:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
import pilcrowIcon from '#ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
import ButtonView from '#ckeditor/ckeditor5-ui/src/button/buttonview';
export default class Footnote extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'footnote', locale => {
const view = new ButtonView( locale );
view.set( {
label: 'Insert footnote',
icon: pilcrowIcon,
tooltip: true
} );
view.on( 'execute', () => {
const source = prompt( 'Footnote' );
editor.model.schema.register( 'span', { allowAttributes: ['class', 'data-toggle', 'title'] } );
editor.model.change( writer => {
const footnoteElement = writer.createElement( 'span', {
class: 'footnote',
// data-toggle: 'tooltip',
title: source
});
editor.model.insertContent( footnoteElement, editor.model.document.selection );
} );
} );
return view;
} );
}
}
How can I make sure my span element is inserted and also contains data-toggle="tooltip"?
For anyone who comes across this, there is a good description of how to set up inline elements in the model and view and then map between them here - How to add "target" attribute to `a` tag in ckeditor5?
Based on my experience, you will also need to set up Javascript code for a command that is run when a button is pressed. The command will insert the new information into the model, then this mapping code will convert it to the view (HTML) for display.
I am aware with the tweaks required for enabling focus inside the tinymce pop up when in bootstrap modal.
But currently I am working with a vuetify dialog. Which does'nt seem to focus the pop up fields of tinymce.
I have gone through this question but it does not work in context to vuetify
TinyMCE 4 links plugin modal in not editable
Below is my code I have removed some methods just for clean up and have kept basic things that I have tried in mounted event & editor init.
<no-ssr placeholder="Loading Editor..">
<tinymce
id="content"
:toolbar2="toolbar2"
:toolbar1="type=='BASIC'?'':toolbar1"
:plugins="plugins"
:other_options="other_options"
v-model="content"
#input="handleInput"
v-on:editorInit="initCallBack"
/>
</no-ssr>
</template>
<script>
//https://dyonir.github.io/vue-tinymce-editor/?en_US
export default {
props: {
value: { type: String },
type: { type: String }
},
data() {
return {
content: this.value,
plugins: this.getPlugins(),
toolbar2: "",
toolbar1: this.getToolbar1(),
other_options: {
menubar: this.getMenubar(),
height: "320",
file_browser_callback: this.browseFile,
auto_focus: '#content'
}
};
},
mounted(event) {
// window.tinyMCE.activeEditor.focus();
// window.tinymce.editors["content"]
console.log(this.$el, event);
let list=document.getElementsByClassName("mce-textbox");
for (let index = 0; index < list.length; ++index) {
list[index].setAttribute("tabindex", "-1");
}
// if ((event.target).closest(".mce-window").length) {
// e.stopImmediatePropagation();
// }
// this.$refs.refToElement ..$el.focus())
// this.el.addEventListener('focusin', e => e.stopPropagation());
},
methods: {
handleInput(e) {
this.$emit("input", this.content);
},
initCallBack(e) {
window.tinymce.editors["content"].setContent(this.value);
window.tinymce.editors["content"].getBody().focus();
// console.log(this.$refs);
// const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
// focusable.length && focusable[0].focus()
document.getElementById("content").addEventListener("onfocusin", console.log("fucssed"));
// tinymce.activeEditor.fire("focus");
this.$el.querySelector(".mce-tinymce").addEventListener('focusin', e =>{ e.stopImmediatePropagation();console.log('event',e)});
const element = this.$el.querySelector(".mce-tinymce");
let _this=this;
if (element)
this.$nextTick(() => {
element.focus();
console.log("FOCUSED",element,_this);
// element.stopImmediatePropagation();
});
// window.tinyMCE.activeEditor.focus();
// console.log(this.$el,e);
// if ((e).closest(".mce-window").length) {
// e.stopImmediatePropagation();
// }
}
};
</script>```
I am using the component : https://github.com/dyonir/vue-tinymce-editor
But fields of the pop are not getting focussed/edited.
From vuetify 2.0 onwards there is a new prop 'retain-focus' which you can set to false in order to fix the above issue.
<v-dialog :retain-focus="false">
Tab focus will return to the first child of the dialog by default. Disable this when using external tools that require focus such as TinyMCE or vue-clipboard.
Edit:
Here is the link to retain-focus prop implementation GitHub:
https://github.com/vuetifyjs/vuetify/issues/6892
Modify the z-index of v-dialog:
Current:
z-index: 202
Modified:
<style>
.v-dialog__content {z-index: 203 !important;}
</style>
Do not forget the !important to give priority to style.
I'm new to WP's gutenberg and React(but not WP/PHP). I'm trying to add a series of custom controls that show up on all core blocks. Using the WP documentation, I was able to add a new inspector section with a simple toggle:
var el = wp.element.createElement;
const { ToggleControl, PanelBody, PanelHeader, BaseControl } = wp.components;
var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
return function( props ) {
return el(
wp.element.Fragment,
{},
el(
BlockEdit,
props
),
el(
wp.editor.InspectorControls,
{},
el(
PanelBody,
{
title: 'Section Controls'
},
el(
ToggleControl,
{
label: 'Full Width Section',
checked: props.attributes.full_width_section,
onChange: function(value){ props.setAttributes( { full_width_section: value } ); }
}
),
)
)
);
};
}, 'withInspectorControls' );
wp.hooks.addFilter( 'editor.BlockEdit', 'brink/with-inspector-controls', withInspectorControls );
What I can't do is figure out the proper way to utilize blocks.getSaveContent.extraProps to save the new full_width_section toggle.
I know I'll then need to figure out how to manipulate the block output after this, but one problem at a time!
I finally figured this out by dissecting a few Gutenberg plugins. In this case, before adding controls to the inspector I had to create attributes for all blocks:
// Attributes
const backgroundSettings = {
fullWidthSection: {
type: "boolean",
},
};
function addAttributes(settings) {
const { assign } = lodash;
settings.attributes = assign(settings.attributes, backgroundSettings);
return settings;
}
wp.hooks.addFilter( 'blocks.registerBlockType', 'brink/add-attributes', addAttributes ); // Add Attributes
From here all you have to do is add any attributes you want and their settings, default, etc. in backgroundSettings.
I want to create a button like the one that inserts your signature. How to do this?
After doing some research I figured out that I can insert custom buttons with the User:MYUSERNAME/common.js page.
I saw several examples. But the wiki references and informations are often splittet across multiple pages and out dated. So I try here if I am lucky and find someone who tried similar things.
Who can help me with this:
var customizeToolbar = function() {
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'advanced',
group: 'format',
tools: {
"comment": {
label: 'Comment',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/3/37/Btn_toolbar_commentaire.png',
action: {
type: 'encapsulate',
options: {
pre: "<!-- ",
post: " -->"
}
}
}
}
});
};
When I do it like this, nothing happens because customizeTooblar most likely gets never called. When I remove it, it says that wikiEditor is not defined.
I already enabled $wgAllowUserJs = true; in LocalSettings.php.
I saw this question: Creating custom edit buttons for MediaWiki Is this still the way we should do this kind of things? This is possibly not a dublicate question because I am already asking about my particular issue here.
The problem was that the initiation code was missing.
This code should directly add a smiley label to your advanced toolbar:
var customizeToolbar = function() {
/* Your code goes here */
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'section': 'advanced',
'group': 'insert',
'tools': {
'SimpleComment': {
label: 'Comment',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png',
action: {
type: 'encapsulate',
options: {
pre: "preText",
post: "postText"
}
}
}
}
} );
};
/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
mw.loader.using( 'user.options', function () {
// This can be the string "0" if the user disabled the preference ([[phab:T54542#555387]])
if ( mw.user.options.get( 'usebetatoolbar' ) == 1 ) {
$.when(
mw.loader.using( 'ext.wikiEditor.toolbar' ), $.ready
).then( customizeToolbar );
}
} );
}
// Add the customizations to LiquidThreads' edit toolbar, if available
mw.hook( 'ext.lqt.textareaCreated' ).add( customizeToolbar );
Can be added to wiki/User:YOUR_USRNAME/common.js
In LocalSettings.php this option must be enabled $wgAllowUserJs = true;