I have problem with integrating summernote into my code I keep having this problem. I know there is lot of answer out there but I still can't find solution to mine.
Uncaught TypeError: $(...).summernote is not a function
and When I wrapped it in the $(document).ready(function() { I got additional error in my inspect with :
jQuery.Deferred exception: $(...).summernote is not a function TypeError: $(...).summernote is not a function
When I click on the line of error in my inspect it showing me at this line code of mine
let msg = $("#summernote").summernote("code");
I have declare the summernote cdn at my header script
<script type="text/javascript">
$(document).ready(function() {
$('#summernote').summernote({
placeholder: 'description',
tabsize: 2,
height:200,
toolbar:
[
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['help']]
]
});
});
</script>
<div class="nk-block nk-block-lg">
<div id="summernote"></div>
</div>
How do I fix this ?
More than likely the function isn't available while the page is loading (when it hits your script). Try wrapping it in $(document.ready(function() { /*your code here */ }); to run it after the page finishes loading all its assets (including summernote).
Found my own answer. I have to declare the script into another file and that is how I solve my own questions.
Related
I have a simple webpage which is using Jquery. I want to use CKEditor 5 and it's Mention plugin feature. I know already that CKEditor 5 has a modular architecture and each plugin has a lot of dependencies so they recommend using npm to resolve all the dependencies but I am not at all using npm and do not want to use it. After some research, I found that I can create a custom build using online builder so I went ahead and created my own custom build which has Mention plugin with it. After that, I included mention config while applying ckeditor on my text area as below:
ClassicEditor
.create( document.querySelector( '#editor'), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
},
mention: {
feeds: [
{
marker: '#',
feed: [ '#Barney', '#Lily', '#Marshall', '#Robin', '#Ted' ],
minimumCharacters: 1
}
]
}
} ).then(function(editor){
window.editor = editor ;
editor.editing.view.document.on( 'keyup', ( evt, data ) => {
ChatterFeed.chatterEvents(data,editor);
} );
})
.catch( error => {
console.log( error );
} );
but this code does not seem to be working and it doesn't do anything when I press # in the textarea. I am not sure if I am missing something here as I have already spent tons of time to search this with no luck.
It was not working because I was showing this editor in the Bootstrap modal popup and may be due to some css issue, it wasn't working. As soon as I showed it on the main html page, it started working fine.
I'm using the latest version (4.7.0) of ckeditor.
I installed it via npm and it lives inside a regular frontend (no fancy js framework).
Problem: The translation js-file - im my case "de.js" is loaded from the wrong url.
When I check the code I see the following in the code:
CKEDITOR.scriptLoader.load(CKEDITOR.getUrl("lang/"+a+".js"),f,this)
Which add just lang/de.js to my current url instead of going to my static file folder.
My config looks like this:
CKEDITOR.editorConfig = function (config) {
config.toolbar = 'Custom';
config.toolbar_Custom = [
{
name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Styles',
'Format', 'NumberedList', 'BulletedList', 'Undo', 'Redo', 'Image', 'Smiley'],
},
];
config.extraPlugins = 'clipboard,dialog,uploadimage,uploadfile';
config.imageUploadUrl = '/uploader/';
config.uploadUrl = '/uploader/';
};
I tried to add:
config.baseHref = '/static/ckeditor/';
and
config.path = '/static/ckeditor/';
and
config.basepath = '/static/ckeditor/';
But still, the code is loaded from the relative URL.
Does anybody know how to properly configure the editor so it's not loading the files from a (wrong) relative path?
Thx
Ron
UPDATE:
This is my config file, I add it via the customConfig parameter:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = 'Custom';
config.toolbar_Custom = [
{
name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Styles',
'Format', 'NumberedList', 'BulletedList', 'Undo', 'Redo', 'Image', 'Smiley'],
},
];
config.extraPlugins = 'clipboard,dialog,uploadimage,uploadfile';
config.imageUploadUrl = '/uploader/';
config.uploadUrl = '/uploader/';
config.basePath = '/static/ckeditor/';
};
There is CKEDITOR.basePath which defines:
The full URL for the CKEditor installation directory.
So the paths for files loaded by CKEditor will be based on this config option if it is set.
You can also use window.CKEDITOR_BASEPATH (see this answer for detailed description):
It is possible to manually provide the base path by setting a global variable named CKEDITOR_BASEPATH. This global variable must be set before the editor script loading.
Any of this two should solve your issue, just use:
CKEDITOR.basePath = '/static/ckeditor/';
or
window.CKEDITOR_BASEPATH = '/static/ckeditor/';
The second one is useful when loading CKEditor by any module loader (like browserify). If it is not the case for you, the first option should be sufficient.
I'm using CKEditor v4.5.6 (along with Angular 1.2.0 and jQuery 1.11.3) in my app which has to be IE8 compatibile.
Other browsers are not throwing any errors but when I load page with editor inside IE8 it throws "Permission denied" error inside line 54 of ckeditor.js file:
getDocument:function(){return new CKEDITOR.dom.document(this.$.ownerDocument||
this.$.parentNode.ownerDocument)}
Also, I was unable to open cdn link inside IE8, I get error:
Code used inside ckEditor directive is rather simple - couple of config setters, replace method for toolbar and then getData() and setData() on model update, something like this:
CKEDITOR.config.resize_enabled = false;
var ck = CKEDITOR.replace(elm[0],
{
toolbar: [
{name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', '-', 'Undo', 'Redo']}
]
});
ck.on('instanceReady', function () {
if(ngModel.$viewValue){
ck.setData(ngModel.$viewValue);
}
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
}
ck.on('change', updateModel);
Inside html file:
<script src="//cdn.ckeditor.com/4.5.6/standard-all/ckeditor.js"></script>
<textarea class="textarea form-control" ng-if="!loading"
data-ck-editor="" ng-model="test.editorContent"> </textarea>
Although editor is loaded and data is correctly diplayed, this error is iritating. Any help?
I checked many instructions on how to set LaTeX in blogspot. I went to "add a gadget", "Configure HTML/JavaScript", and How to use LaTeX on blogspot?.
Then I posted this code:
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
MathJax.Hub.Config({
extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
But nothing happened successfully.
What would be a screenshot of the process?
Try removing the extra comma after the displayMath delimiters. These extra commas often confuse Internet Explorer, so if you are using Internet Explorer as your browser, that might be the issue.
I want to add multiple plugins(which i have created) on a toolbar of ckeditor. I have written below code in config.js
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
['Styles', 'Bold', 'Italic', 'Underline', 'SpellChecker', 'Scayt', '-', 'NumberedList', 'BulletedList'],
['Link', 'Unlink'], ['Undo', 'Redo', '-', 'SelectAll'], '/', ['timestamp', '-', 'linkbutton']
];
config.extraPlugins = 'linkbutton, timestamp';
};
and i have two different custom plugins. but another plugin is not accepted. How to add another plugin on a one toolbar?
You are just right except of the space after the comma so your definition regarding http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.extraPlugins should be:
config.extraPlugins = 'linkbutton,timestamp';
You can add another custom plugin like this also:
extraPlugins: 'linkbutton,timestamp,justify'