Related
I am using ngWYSIWYG - Angular real rich text editor http://psergus.github.io/ngWYSIWYG/ inside bpopup but its coming as not able to editable
$scope.editorConfig = {
sanitize: false,
toolbar: [
{ name: 'basicStyling', items: ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', '-', 'leftAlign', 'centerAlign', 'rightAlign', 'blockJustify', '-'] },
{ name: 'paragraph', items: ['orderedList', 'unorderedList', 'outdent', 'indent', '-'] },
{ name: 'doers', items: ['removeFormatting', 'undo', 'redo', '-'] },
{ name: 'colors', items: ['fontColor', 'backgroundColor', '-'] },
{ name: 'links', items: ['image', 'hr', 'symbols', 'link', 'unlink', '-'] },
{ name: 'tools', items: ['print', '-'] },
{ name: 'styling', items: ['font', 'size', 'format'] },
]
};
<wysiwyg-edit content="your_variable" config="editorConfig"></wysiwyg-edit>
I'm having the same issue. I know this isn't ideal, but here's how I solved it:
If you're using a CDN, use bower to pull ngWYSIWYG into your project
Edit the dist/wysiwyg.min.js
Ctrl + F for:
{name:"basicStyling",items:["bold","italic","underline""
That is the start of the toolbar options so edit them however you'd like!
Wish I knew of a better fix, but that's what worked for me.
I've got a problem with CKEditor. I want to install on my page CKEditor with some plugins. When I install editor without plugins, everything is okay. But when I added the plugins, the editor becomes invisible.
ScreenShots:
WITHOUT PLUGINS
WITH PLUGINS
As i faced the same problem before sometime because my config.js file was not configured properly. Kindly refer the below file.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.language = 'en';
config.uiColor = '#9AB8F3';
config.toolbar = 'Full';
config.height = 500;
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
//config.removePlugins ='liststyle,tabletools,scayt,menubutton,contextmenu';
};
My CKeditor has some problems.
I noticed when I was working with the editor that I couldn't plave any inline styles. For example I want to do this:
<img alt="" src="upload/general.jpg" style="margin: 0 10px 10px 0; float: left;" />
But CKeditor strips it for me when I save it?!
<img alt="" src="upload/general.jpg" />
The most funny part is that I of course did some research and put the needed config items in place.
As the documentation says,
//Allow everything (disable ACF)
config.allowedContent = true;
But it still doesn't want to pass the full given string that I expect.
What the editor does give is tags, so those are allowed apparently.
EDIT
To see an live example you can go to this page: (my development machine)
http://dev.lemon-internet.nl:8888/stackoverflow/lemonadmin/pages/add
If the is asked for a username & password...
username: stackoverflow
password: stackoverflow
Here is the config file i load.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.skin = 'moonocolor';
config.toolbar =
[
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor', 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe'] },
'/',
{ name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'embeddButtons', items: ['Youtube'] },
{ name: 'toolbar_name', items: ['doksoft_maps'] }
];
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Subscript,Superscript';
// Se the most common block elements.
config.format_tags = 'h1;h2;h3;h4;h5;h6';
// Plugins used in the editor, STANDARD!
config.extraPlugins = 'youtube,magicline,tableresize,doksoft_maps';
// Allow advanced tab in editor
config.linkShowAdvancedTab = true;
config.linkShowTargetTab = true;
// Allow content in editor
config.allowedContent = true;
// Discover if we have an subdirectory
var paths = window.location.pathname.split("/");
// console.log(paths[1]);
if(paths[1] != 'lemonadmin')
{
path = '/' + paths[1];
}
else
{
path = location.protocol+'//'+location.hostname;
}
// Filemanager config for file and Image browsing and uploading
// If you are running in a subdirectory, ensure to add this here too
config.filebrowserBrowseUrl = path + '/framework/assets/js/ckeditor/plugins/filemanager/index.html';
config.filebrowserImageBrowseUrl = path + '/framework/assets/js/ckeditor/plugins/filemanager/index.html';
};
And here is the code to replace the textareas
CKEDITOR.replace( fulleditor, {
height: 600,
magicline_color: 'red'
} );
http://gw.ablueman.co.uk/tabbednotepad.php
I have 3 ckeditor textareas, all three are the same but fairly different from the main one or the class.
If I put 3 replaces, it works fine. however if I try to use CKEDITOR.replace( 'editor1', 'editor2', 'editor3' {
It works, replacing them, but ignores anything after the { almost like the class.
Am I just formatting CKEDITOR.replace( 'editor1', 'editor2', {}); incorrectly, I need all three to use the same replace.
Heres the code:
<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea class="ckeditor" id="editor3" name="editor3" rows="200"><?php echo $editor3;?></textarea>
<input id="tabtitle1" name="tabtitle1" size="30" placeholder="Tab Title.." />
<input type="submit" value="Submit" >
</form>
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
height: '600px',
enterMode: CKEDITOR.ENTER_BR,
toolbar:
[ { name: 'document', groups: [ 'document', 'doctools' ], items: [ 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] }, '/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe', 'Syntaxhighlight' ] }, '/',
{ name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'others', groups: [ 'mode' ], items: [ 'Source', 'searchCode', 'autoFormat', 'CommentSelectedRange', 'UncommentSelectedRange', 'AutoComplete', '-', 'ShowBlocks' ] },
{ name: 'tools', items: [ 'Maximize' ] },
]});
</script>
[EDIT] Just FYI, I tried CKEDITOR.replace( ['editor1', 'editor2'],
this didnt work either.
Ckeditor 4 allows you to replace multiple textareas with editors based on classname:
CKEDITOR.replaceAll('className');
docs
You can use an array of textarea id an call a CKEDITOR.replace with jquery and foreach. For example:
var areas = Array('editor1', 'editor2', 'editor3');
$.each(areas, function (i, area) {
CKEDITOR.replace(area, {
customConfig: '/Scripts/ckeditor/config.mini.js'
});
});
You can't call CKEDITOR.replace with several ids at the same time.
Its definition states that the first parameter is the ID or the element and the second one the configuration options.
I have an inline content editor by using the contenteditable attribute.
What I want is to rearrange the default auto-generated toolbar.
The usual method is to create something like:
config.toolbar = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
'/',
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
];
in the config.js.
The problem is that I don't know where to find the already auto-generated toolbar so as to change it the way I want. So I don't know what are the names used in the toolbar and therefore I can't make it how I want.
(the code used above is not the one I want obviously..)
Thanks in advance!
Have you seen the Setting Configuration guide? You can either set toolbar in the config.js file which will be loaded while initializing editor or directly in CKEDITOR.inline, but to use this method you need to disable automatic editors creation:
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editable', {
toolbar: [ ... ]
} );
If you don't know button names, then check out this question: What toolbar buttons are available in CKEditor 4?
Note: instead of rearranging entire toolbar, you can just rearrange groups of buttons – read more in the Toolbar Customization guide.