In the three editors "Aloha", "TinyMCE" and "CKEditor", i am trying to separate the text-field and the toolbar, and keep the toolbar visible at all times.
TinyMCE, Using
inline: true,
fixed_toolbar_container: "div#mytoolbar",
i have been able to do the separation, but the toolbar hides when the text-field is out of focus.
Aloha and CKEditor i don't have anything yet.
In case of CKEditor, check out the Sharedspace plugin and config.sharedSpaces option. There's also a sample.
CKEDITOR.inline( 'inline1', {
extraPlugins: 'sharedspace',
removePlugins: 'floatingspace,resize',
sharedSpaces: {
top: 'top',
bottom: 'bottom'
}
} );
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I am using summernote in my project and i want customize style button with "magic pen" icon. In this button you can set h1-h6 or quotes, code(pre tag)....
There is my summernote toolbar settings:
toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
]
first style setting is for "magic pen" button (first from left on toolbar), second style is for bold italic... button group (second from left on toolbar).
So is there some possibility customize first style button with "magic pen" icon?
I need remove some options from there... h1, h5, quotes, code...
On internet i was find some solutions which not work:
StyleTags options (not toolbar):
styleTags:
['p', 'blockquote', 'pre']
Or specify first 'style':
toolbar: [
['style', ['blockquote', 'pre']],
but without success can anybody help?
Not sure if you got sorted with this but had this issue today, Summernote documentation wouldn't be the best but this worked for me and might help someone else out in the future.
$(document).ready(function() {
$('textarea[data-content~=summernote-content]').summernote({
height: 400,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['help', ['help']]
],
styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5'],
});
});
So you just define the style as normal in the toolbar tags but then below it you specify the actual attributes you wish to show.
I'm working on using treeData, but was wondering if it is possible to hide the text next to the chevron.
For example, can I hide the letters from the column in this table, and just show the chevron? Maybe using cell renderer?
You can do that even without using cellRenderer.
Include below styles in your component declaration.
styles: [`
::ng-deep [class^='ag-row-group-indent-'] .ag-group-value {
display: none;
}
`]
Working plunk: Ag-Grid treeData: Possible to hide text next to chevron
Figured out an easy fix within the column def:
cellRendererParams: {
innerRenderer: () => ''
}
There is a link in the input form to a popup window to pickup subject categories. The popup window (modal) is a long list but it is not scrolling. If I am trying to scroll then the input form is scrolling and not the popup window. The popup window is moving up with the input form. I want the popup window to scroll, so that I can go through the list of 'subject categories' to select. I am trying to modified this open source software code for my local use.
function(resultingHtml){
//retrieve the dialog box
var $Result = $('<div></div>').html(resultingHtml);
var mainDialogDivision = $Result.find('div[id^=aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_]');
$('body').append($(mainDialogDivision[0]));
var vocabularyDialog = $('div#aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_' + vocabularyIdentifier);
vocabularyDialog.dialog({
autoOpen: true,
overflow: scroll,
height: 450,
width: 650,
modal: true,
title: $Result.find('title').html()
});
You should be able to accomplish this using CSS. Adding style overflow:auto to the main modal element should allow you to scroll through all the subject categories.
You don't mention which DSpace theme you are using, so I assume you are using theme Mirage (the default DSpace theme), then adding the following CSS to the style.css file of your theme should solve your scrolling problem:
.ui-dialog.ui-widget.ui-widget-content
{
overflow: auto
}
On a form, I work with TinyMCE for editing textarea's.
Now I just want to offer the options "bold", "italic" and "underline" in TinyMCE.
Which settings should I do in the tinymce.init();?
See the tinymce fiddle here.
Here is the code:
tinymce.init({
selector: "textarea", // change textareas into tinymce editors
plugins: [], // no additional plugins needed
toolbar: "bold italic underline", // only those three buttons
menubar: false // no display of the top menubar
});