I have installed Froala editor in Ionic. It is working properly. In my **home.html** I have added this line of code
<div [froalaEditor]>Hello, Froala!</div>
It looks like this:
How can I use it inline in Ionic?
Their documentations guides for js but I don't know how to get the same implemented in Ionic, below is their instruction
HTML
<div id="froala-editor1">
<p>This is the first editor instance</p>
<img src="/assets/editor/docs/photo14.jpg" class="fr-fil" alt="book" width="150"/>
</div>
JS
<script>
$(function() {
$('div#froala-editor1').froalaEditor({
toolbarInline: true,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
})
});
</script>
The Ionic implementation is using Angular. See https://github.com/froala/angular-froala-wysiwyg#usage. You should basically do something like this in your component and then pass the options to the directive.
public options: Object = {
toolbarInline: true,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
}
<div [froalaEditor]='options'>Hello, Froala!</div>
Related
I am trying to use a custom config toolbar of ckeditor in Rails 5 but getting the following error.
Error:
ActionController::RoutingError (No route matches [GET] "/ckeditor/config.js"):
my /app/assets/javascripts/ckeditor/config.js
config.extraPlugins = 'divarea,s3FileUploader';
config.allowedContent = true;
config.disallowedContent = 'script';
config.dragdropConfig = {
backend: 's3',
settings: {
credentialUrl: '/r3_files/presigned_post',
region: 'us-west-2',
}
}
config.toolbar_mini = [
['-', 'Table', 'Link', 'Smiley', 'TextColor', 'BGColor', 'HorizontalRule'],
['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'Find', 'Replace', '-', 'Outdent', 'Indent', 'NumberedList', 'BulletedList', '-'],
['Format', 'Font', 'FontSize', 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Image']
];
config.toolbar = 'mini';
}```
file where ckeditor instance is called.
CKEDITOR.replace('email_body',{
customConfig: '/app/assets/javascripts/ckeditor/config.js'
});
the following are also included in my code
1. mount Ckeditor::Engine => '/ckeditor' in routes.rb
2. ckeditor/config.js in assets.rb
**Update:**
I changed the path to 'config.js' which used the custom toolbar BUT now the problem I am facing is shift+spacebar gives a space.So now I would like to use spacebar only for spaces. This same thing is also occuring while using backspace. Backspace only closes the editor but shift + backspace, does the actual function of Backspace.
Thank you in advance.
I am using v3 and I had it set up working fine for several days. I was using moreButtons so I had dropdown menus of buttons. Then all of a sudden today all the buttons are being rendered on one line and are smaller since it is trying to fit them all. I have no console errors. Any idea why this is happening?
toolbarButtons: {
// Key represents the more button from the toolbar.
moreText: {
// List of buttons used in the group.
buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
// Alignment of the group in the toolbar.
align: 'left',
// By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
buttonsVisible: 3
},
moreParagraph: {
buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
align: 'left',
buttonsVisible: 3
},
moreRich: {
buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'fontAwesome', 'specialCharacters', 'embedly', 'insertHR'],
align: 'left',
buttonsVisible: 4
},
moreMisc: {
buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'help'],
align: 'right',
buttonsVisible: 2
}
},
I was using Froala edit as rich text editor ,
$(notesSelector).on('froalaEditor.initialized', function (e, editor) {
//set original html after loading
froalaInitialHtml = $(notesSelector).froalaEditor('html.get');
});
$(notesSelector).froalaEditor({
key: 'XXXXXXXXXX',
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
toolbarButtonsXS: ['undo', 'redo' , '-', 'bold', 'italic', 'underline','insertImage'],
imageEditButtons:['imageInfo', 'imageAlign' ],
toolbarSticky: true, });`
i was expecting image context menu , but they don't appear when image is selected
There are 2 possible reasons why the image popup is not showing:
You are not including the image plugin. Make sure you include the plugins/image.min.js file and plugins/image.min.css file.
There are other elements on the page which have a higher zIndex. This is likely to happen when you are using the editor inside a modal. To overcome it, set the editor zIndex option to a higher value.
When the users paste text in the editor (for example), they don't delete the spaces before and after the text.
How to remove these br tags? It would work like the trim() function in php.
My code is:
CKEDITOR.replace('contenido',
{
language: 'es',
resize_enabled: true,
pasteFromWordRemoveFontStyles: true,
pasteFromWordPromptCleanup: true,
forcePasteAsPlainText: true,
ignoreEmptyParagraph: true,
removeFormatAttributes: true,
autoParagraph: false,
fillEmptyBlocks: false,
enterMode: CKEDITOR.ENTER_BR,
toolbar: [
['Bold', 'Italic', 'Underline', 'Strike'],
['Cut', 'Copy', 'PasteText', '-', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['CreateDiv', '-', 'ShowBlocks'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Table', 'HorizontalRule', 'SpecialChar'], ['Source'],['Maximize']
]
});
To be able to use a built in PHP method to do this for you take a look at this:
http://php.net/manual/en/function.strip-tags.php
You can use the second pram of the method to list any html type tags you don't want trimmed away. So in theory if you only want "" removed you could give it a list of every tag but that one.
Hope this helps.
I use TinyEditor as wysiwyg Editor.
Without using the Editor everything works fine when i submit the php page and I get the text from the TextArea.
<textarea name="ARTICLE" id="ARTICLE"><?php echo $entry->text; ?></textarea>
<script>
var editor = new TINY.editor.edit('editor', {
id: 'ARTICLE',
width: 800,
height: 500,
cssclass: 'tinyeditor',
controlclass: 'tinyeditor-control',
rowclass: 'tinyeditor-header',
dividerclass: 'tinyeditor-divider',
controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n',
'style', '|', 'hr', 'link', 'unlink'],
footer: false
});
</script>
When I'm using the Editor i allways get an empty area when the page is submitted.
Before I submit the page I do:
editor.post();
alert(document.getElementById('ARTICLE').value);
e("entry_edit").submit();
I alert the value of the textarea before submitting it and there I get all the text in it.
Is there a special way i have to format the text before it can be submitted?