I'm using ng-ckeditor to work on ckeditor with angularJS. I have to add code snippet plugin in ckeditor. As per words of ng-ckeditor, I have passed plugin data into editorOptions. But still it is not getting loaded into ckeditor. I can't get that waht is issue. ng-ckeditor accepts uiColor value from editorOptions. But it doesn't work for plugin data. If anyone can help, it will be appreciated.
Here is my code
HTML
<textarea id="taDescription" name="taDescription" placeholder="Enter Description" rows="10" cols="80" ng-model="topic.description" ckeditor="editorOptions" required></textarea>
JS
$scope.editorOptions = {
extraPlugins: 'codesnippet',
uiColor: '#000000'
};
Note: I have included all the files related to ckeditor. So I'm sure that there is not any problem related to missing file etc.
I think this angular directive does not support the functionality of adding extra plugins. I also faced the same problem when adding code snippet plugin to CKEditor in angular js and ended by implementing in following way:
Add following script on your main page:
<script src="http://cdn.ckeditor.com/4.7.1/standard-all/ckeditor.js"></script>
Also, define config for CKEditor of code snippet plugin in following way:
<script>
var config = {
extraPlugins: 'codesnippet',
codeSnippet_theme: 'monokai_sublime',
autoUpdateElement : true,
height: '30%'
};</script>
You can also define this config in your page or in your main page(if yu need to add it to multiple pages).
Then go to your page and use CKEditor as following:
<textarea ng-model="yourmodel" placeholder="Enter Description" id="description" name="description"></textarea>
At the end of the page you need to use following script:
<script>var editor = CKEDITOR.replace( 'description' , config);</script>
This script should be only added after your element otherwise it will give you the error of undefined element.
Hope this will help someone.
Related
I want to add the jquery ui module autocomplete on a input text.
In my controller I add this line :
$this->context->controller->addJqueryUi('ui.autocomplete');
In my template, a test textbox :
test auto complete <input type="text" id="testautocomplete">
In my JS called by my template :
var dataSrc = ["australia", "austria", "antartica", "argentina", "algeria"];
$("#testautocomplete").autocomplete({
source:dataSrc
});
But that don't work.
I see in my source page this :
<input type="text" id="testautocomplete" autocomplete="off" class="ac_input">
I tried to add this in my JS
$('#testautocomplete').attr("autocomplete", "on");
But still doesn't work.
Please help ! ;)
I could explain, but I think could be more useful for you take an idea from the module ps_searchbar in PS 1.7, check the file ps_searchbar.js which will serve as a guide to apply in your module.
If you have troubles loading the library, you can check the hookHeader of the file ps_searchbar.php.
I want to add youtube plugin in CDN CKEditor, I follow the steps from the doc below
How do I set a plugin on CKEditor when is used from the CDN?
Before adding youtube plugins, textarea looks fine
But after adding youtube plugins, it shows nothing.
My code look like this:
<script src="//cdn.ckeditor.com/4.7.3/full/ckeditor.js"></script>
....
....
<div class="form-group">
<label class="control-label" for="article_content">Content：</label>
<textarea class="form-control" type="text" name="article_content"></textarea>
</div>
....
....
....
<script>
CKEDITOR.plugins.addExternal( 'youtube', '../public/ckeditor/plugins/youtube/', 'plugin.js' );
CKEDITOR.replace( 'article_content', {
extraPlugins: 'youtube'
});
</script>
Hope someone can give me some advises to fix this problem,
Thanks
If you open a browser console, you'll find the following:
Error: [CKEDITOR.resourceManager.load] Resource name "youtube" was not
found at
"https://cdn.ckeditor.com/4.7.3/full/../public/ckeditor/plugins/youtube/plugin.js?t=H8DA".
It appears that with relative paths, CKEditor searches for the plugin inside the CDN. So, instead use absolute paths and CKEditor will search inside your web server, for example if public is inside web server root folder, use:
CKEDITOR.plugins.addExternal( 'youtube', '/public/ckeditor/plugins/youtube/', 'plugin.js' );
I just started using CKEditor and had some questions on how to integrate this with AngularJS. The following fiddle was given to me.
http://jsfiddle.net/TheSharpieOne/fMC2p/
<div data-ng-app="app" data-ng-controller="myCtrl">
<h3>CKEditor 4.2:</h3>
<textarea data-ng-model="ckContent" data-ck-editor></textarea>
<br />
<textarea data-ng-model="ckContent" data-ck-editor></textarea>
<textarea data-ng-model="ckContent"></textarea>
<pre>{{ckContent}}</pre>
</div>
I had previously used a config.js but cannot see one used in this fiddle. Can someone explain how it's possible. I thought it was necessary to have the config.js and many other files present.
CKEditor is dynamically loading all necessary files, including config.js. In your case, a default config is loaded. You can load a different one with config.customConfig:
CKEDITOR.replace( 'myfield', {
customConfig: 'pathToYourConfig.js'
} );
I have an automatically generated text-area (by the Erlang Web framework) that looks like the following:
<span class="form_input">
<textarea id="question_text" class="tinymce" name="question_text"> </textarea>
</span>
I'm trying to apply the TinyMCE editor to it, but what happens is the following:
http://img24.imageshack.us/img24/9250/tinyt.jpg
So, my textarea is not replaced, but it's "embedded" in the RTE.
I'm initializing TinyMCE as follows:
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tinymce"
});
</script>
Any hint?
try the following, cause I remember I did something similar and you have to specify the id of the textarea.
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "question_text"
});
</script>
from screen shot it looks like one or many of the following might be an issue.
1) doctype and rendering of your html/css rules
2) your css rules might conflict
3) your html structure broken, DOM
4) tiny mc javascript may be having issues with dom structure, which in turn can be caused by doctype, html structure
is this issues page specific? or it happens on every page?
are your form elements inserted and created by js?
I tried to put a different #id from name attribute and it works
<textarea id="question_text" class="tinymce" name="question_text"> </textarea>
to
<textarea id="question_text_textarea" class="tinymce" name="question_text"> </textarea>
and then later...
tinymce.init({selector:'textarea'});
I am trying to implement JQuery Autocomplete plugin using Django.
I've been able to wire the thing together and I can actually see the result back in the HTML template.
My problem is that the JQuery Autocomplete CSS doesn't seem to work.
The results I get are not well-formatted/styled, have no background and you cannot even select them.
What is it that I am missing?
I have these three files in my media folder the same folder:
autocomplete.js
dimensions.js
autocomplete.css
In my html template I have the following function:
$(function(){
setAutoComplete("tags", "tagResults", "/taglookup/?query=");
});
My textfield looks like this;
<input type="text" name="tags" value="">
Where do I put the tagResults in my HTML template document? Every time I try to introduce a DIV with id="tagResults", JQuery throws an error.
Any ideas?