I work with drupal 4.4.7 and ckeditor, I want to use slideshow, plugin of ckeditor.I have installed ckeditor and ckfinder correctly, also i have installed slideshow and turn on this plugin on configuration page, but there is no icon in CKeditor settings "SHOWEDITOR APPEARANCE" tab.
Can anybody help me?
I had the same problem and found a solution!
In "sites\all\modules\ckeditor\plugins\slideshow\plugin.js" I added the path to the icon image (line 91):
// Create a toolbar button that executes the above command.
editor.ui.addButton('Slideshow', {
// The text part of the button (if available) and tooptip.
label: lang.insertSlideShow,
command: 'slideshow',
// The button placement in the toolbar (toolbar group name).
toolbar: 'insert',
icon: this.path + 'icons/slideshow.png'
});
The button now appears in the configuration CKEditor :)
Related
I've been attempting to add custom i tags as blots into a Quill editor. Basically I need a way for a user to specify a FontAwesome icon and the editor handle it.
<i class="fa-thin fa-address-book"></i>
My previous attempt included adding a custom toolbar button that allows you to edit raw html, however when pasting this back to the editor the class (<i class=) is stripped.
When I try to add link to very left text in quill editor the popUp opened is hiding in the left side.And I am using Snow theme.
The below image shows my issue.
Not the most elegant solution, but you may need to override the css:
.ql-tooltip {
left: 0!important;
}
Sometimes quilljs doesn't play nice with theming libraries like certain versions of bootstrap (which was the issue in my case).
I need to change the css style of the default context menu but I couldn't inspect the classes because it's closed when it out of focus, so if any one knows the classes or know how to adjust the style using javascript can help.
Press F12 to show the console. Input the code and press enter.
setTimeout(() => {debugger;}, 1000);
You may open the context menu in 1 second before the browser paused. Then you can inspect the element.
.monaco-menu > .monaco-action-bar.vertical {
color: red !important;
}
But since 0.12 the context menu is under shadow-root and the there is no element declare part attribute. So in the host there is no way to rewrite the style.
I had similar issue, where I needed to replace the icons that appear in the completion menu.
From the Network tab of the browser, I opened the file editor.main.css.
There, you can see the css selectors, and the embedded svg-xml for the icons.
For example, to replace the icons used for 'methods' or 'functions' in the completion menu, add this to your html (after the Monaco stylesheet is loaded)
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.method::before,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.function::before
/* copied from lightbulb */
{ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS42NzA4IDguNjU4MDZDMTEuMzMxOSA4Ljk5MTYgMTEuMDcxNiA5LjM2Mjc4IDEwLjg4ODYgOS43NzE3MkMxMC43MTA1IDEwLjE3OTIgMTAuNjIxIDEwLjYyMTkgMTAuNjIxIDExLjEwMDlWMTIuNzAxMkMxMC42MjEgMTIuODgwNyAxMC41ODcyIDEzLjA1MDMgMTAuNTE4OSAxMy4yMDkxQzEwLjQ1MTMgMTMuMzY2MSAxMC4zNTg2IDEzLjUwMzggMTAuMjQwNyAxMy42MjEzQzEwLjEyMjggMTMuNzM4OCA5Ljk4NDY0IDEzLjgzMTEgOS44MjcyMyAxMy44OTg0QzkuNjY4MDYgMTMuOTY2MyA5LjQ5ODA2IDE0IDkuMzE4MjMgMTRINy43MTIwNUM3LjUzMjIzIDE0IDcuMzYyMjMgMTMuOTY2MyA3LjIwMzA2IDEzLjg5ODRDNy4wNDU2NCAxMy44MzExIDYuOTA3NTMgMTMuNzM4OCA2Ljc4OTYxIDEzLjYyMTNDNi42NzE2OCAxMy41MDM4IDYuNTc4OTUgMTMuMzY2MSA2LjUxMTQxIDEzLjIwOTFDNi40NDMxMSAxMy4wNTAzIDYuNDA5MjcgMTIuODgwNyA2LjQwOTI3IDEyLjcwMTJWMTEuMTAwOUM2LjQwOTI3IDEwLjYyMiA2LjMxNzcyIDEwLjE3OTUgNi4xMzU1MyA5Ljc3MjA5QzUuOTU2ODMgOS4zNjMzNiA1LjY5ODMyIDguOTkxNTYgNS4zNTk1MyA4LjY1ODA2QzQuOTI0NjggOC4yMjkwMyA0LjU4ODk2IDcuNzUwMDMgNC4zNTM2MSA3LjIyMTM0QzQuMTE3NTYgNi42OTEwNyA0IDYuMTE2NzIgNCA1LjQ5OTUzQzQgNS4wODY2NCA0LjA1MzQyIDQuNjg4MDIgNC4xNjA0OCA0LjMwMzk3QzQuMjY3MjggMy45MjA4OSA0LjQxOTA3IDMuNTYyODYgNC42MTU5NSAzLjIzMDE4QzQuODEyNTcgMi44OTM3NyA1LjA0Nzc3IDIuNTg5MTEgNS4zMjE0NiAyLjMxNjQxQzUuNTk1MDMgMi4wNDM4MyA1Ljg5ODU4IDEuODA5NTMgNi4yMzE5NSAxLjYxMzY0QzYuNTY5NzkgMS40MTc2NCA2LjkzMTQ2IDEuMjY2MiA3LjMxNTc4IDEuMTU5ODNDNy43MDEwNiAxLjA1MzIgOC4xMDA5NCAxIDguNTE1MTQgMUM4LjkyOTM0IDEgOS4zMjkyMyAxLjA1MzIgOS43MTQ1MSAxLjE1OTgzQzEwLjA5ODggMS4yNjYyIDEwLjQ1OCAxLjQxNzM5IDEwLjc5MTggMS42MTM1MUMxMS4xMjk0IDEuODA5MzggMTEuNDM1MSAyLjA0MzcgMTEuNzA4OCAyLjMxNjQxQzExLjk4MjUgMi41ODkxIDEyLjIxNzcgMi44OTM3NiAxMi40MTQzIDMuMjMwMTZDMTIuNjExMiAzLjU2Mjg1IDEyLjc2MyAzLjkyMDg4IDEyLjg2OTggNC4zMDM5N0MxMi45NzY5IDQuNjg4MDIgMTMuMDMwMyA1LjA4NjY0IDEzLjAzMDMgNS40OTk1M0MxMy4wMzAzIDYuMTE2NzIgMTIuOTEyNyA2LjY5MTA3IDEyLjY3NjcgNy4yMjEzNEMxMi40NDEzIDcuNzUwMDMgMTIuMTA1NiA4LjIyOTAzIDExLjY3MDggOC42NTgwNlpNOS42MjE2MiAxMC41SDcuNDA4NjdWMTIuNzAxMkM3LjQwODY3IDEyLjc4MjMgNy40MzcyIDEyLjg1MTIgNy40OTg4OCAxMi45MTI3QzcuNTYwNTggMTIuOTc0MSA3LjYzMDA3IDEzLjAwMjggNy43MTIwNSAxMy4wMDI4SDkuMzE4MjNDOS40MDAyMiAxMy4wMDI4IDkuNDY5NzEgMTIuOTc0MSA5LjUzMTQgMTIuOTEyN0M5LjU5MzA5IDEyLjg1MTIgOS42MjE2MiAxMi43ODIzIDkuNjIxNjIgMTIuNzAxMlYxMC41WiIgZmlsbD0iI0ZGQ0MwMCIvPgo8L3N2Zz4K) !important; }
I have a grapesjs editor that is working perfectly. However, because I am using multiple plugins, I am duplicate preview buttons.
Here is a snippet of my initializaion:
editor = grapesjs.init({
container: '#my-element',
fromElement: 1,
showOffsets: 1,
allowScripts: 1,
plugins: ['gjs-preset-webpage', 'gjs-preset-newsletter'],
...
I have attached a screen of what I am seeing. As you'll notice, there are duplicate "preview" buttons. If I remove a plugin, only one set of icons will appear (as expected).
This is not correct, but was trying something along these lines to see if I could remove the buttons manually.
editor.Panels.removeButton('preview', [{
//
}]
);
Thank you for any suggestions.
You can remove duplicate buttons as mentioned below. the first parameter is the pane
editor.Panels.removeButton('devices-c', 'block-editor');
When setting clicksToEdit : 2 option to edit a cell using grid edit plugin, the textfield sets focus properly. When dragging or resizing the modal window the textfield needs to remove the focus.
The issue is that the textfield is not blurred.
Here's a screenshot of the issue:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 2
})
],
I have attached the code in JSFiddle.
Steps to reproduce the issue:
double click to edit the name.
resize the panel from right bottom.Now the textbox have a focus and position of textbox is changed.
As far as I can see from your code, this has to be an unfixed issue with ExtJS 4.2.x. I am not sure about ExtJS 4.2.4 and 4.2.5, but as of 4.2.3 the bug is still there.
The "funny" thing about this is that the datepickerfield editor does it correctly. Possibly you can look at the code of datepickerfield and make an override for textfield based on that.
In newer versions of ExtJS (5.1 and 6.0), the problem does no longer show.
You could ask for workaround availability in the Sencha forums.
EDIT: A valid workaround would be to add to your cellediting plugin:
pluginId: 'editing'
and to your panel:
listeners:{
resize:function(panel) {
var plugin = panel.down('grid').getPlugin('editing');
if(plugin.editing) plugin.cancelEdit();
}
}