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'
} );
Related
Im trying to use guppy wyswyg javascript plugin for mathematical expressions rendering. I went to its basic example at its webpage https://guppy.js.org/site/examples/basic/, but i cant deploy it at my local xampp proyect.
According to the example, i already set these dependencies (different paths in my proyect):
<link rel="stylesheet" href="localhost/lib/build/guppy-default.min.css">
<script type="text/javascript" src="../../../build/guppy.min.js"></script>
And then this:
Guppy.init(
{
"path":"http://localhost/lib/guppy",
"symbols":"http://localhost/lib/guppy/sym/symbols.json"
}
);
Finally this:
<input type="text" id="myinputtypeelementid" placeholder="Type math here" >
var g1 = new Guppy("myinputtypeelementid");
I just can see this:
Does anybody know what else i need to do?
Issue solved:
It just needed use a <div> tag with the right id instead o a <input> tag. Now it works ! I reply myself in case anybody gets benefit of this issue i faced.
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'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.
I often have this problem with jquery and meteor, I get a undefined is not a function, and I just cant figure out why.
Here is my code for pagedown-bootstrap package i installed. WRONG LINK this is the right source
Template.postSubmit.rendered = function () {
$("textarea#pagedownMe").pagedownBootstrap();
};
My html template
<template name="postSubmit">
<form class="submitForm">
<label for="date">Date</label>
<input name="date" type="text" value="" placeholder="Date"/>
<label for ="title">Title</label>
<input name ="title" type="text" value="" placeholder="title"/>
<label for="content">Content</label>
<textarea id="pagedownMe" name="content" class="form-control" rows="10">
This is the *first* editor.
------------------------------
Just plain **Markdown**, except that the input is sanitized:
<marquee>I'm the ghost from the past!</marquee>
</textarea>
<input type="submit" value="Submit" />
</form>
</template>
The error I am getting
Exception from Deps afterFlush function function: TypeError: undefined is not a function
at Object.Template.postSubmit.rendered (http://localhost:3000/client/postsPagedown.js?05d5727bffc4120f5b1e1765e9451a7571bbd788:5:26)
at http://localhost:3000/packages/ui.js?f0696b7e9407b8f11e5838e7e7820e9b6d7fc92f:426:23
at _assign.flush (http://localhost:3000/packages/deps.js?91f1235baecd83915f7d3a7328526dbba41482be:345:13)
Pacakges from atmosphere
main package pagedown-bootstrap dependant marked
It looks like you need to convert the package to work with meteor. The main thing to do is un-variable scope the main variables.
You need to look for files which have variables that are accessed by other variables. Here are two questions that go over the basics of what meteor does and how to get passed it
I would suggest you make it a Meteor package that contains the pagedown package with the variables modified to be global. This way you can namespace the project away from your app and still have it work.
This is a good tutorial on how to make a package: http://www.vintyge.com/blog/2012/12/creating-a-basic-meteorite-smart-package
Sorry about all the links but looking at the package's source it wont be as simple as just copying and pasting it in.
Shortcut but slightly weird way.
You can place the packages files in /client/compatibility. Though you may have to rename the files so they load in the correct order. Meteor loads files alphabetically, so you would have to rename the first file a.js (Markdown.Converter.js - I think) and the next b.js
I was using the wrong code, I looked at the wrong resource.
JS
$(function () {
var converter = new Markdown.Converter();
var editor = new Markdown.Editor(converter);
editor.run();
HTML
<div class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea class="wmd-input" id="wmd-input">
This is the *first* editor.
------------------------------
Just plain **Markdown**, except that the input is sanitized:
<marquee>I'm the ghost from the past!</marquee>
</textarea>
</div>
<div id="wmd-preview" class="wmd-panel wmd-preview">
</div>
I am using Plone 3 and currently trying to override one of the default javascript files i.e. table_sorter.js.
Under the browser directory of my product, I created a directory "javascripts" (just to keep things organized), then registered the directory as a ressource, in configure.zcml:
<browser:resourceDirectory
name="myproduct.javascripts"
directory="javascripts"
layer=".interfaces.IThemeSpecific" />
Where "myproduct" is self explanatory.
Then in jssregistry.xml, I registered and ordered the javascript files:
<javascript id="++resource++myproduct.javascripts/table_sorter.js"
enabled="True"
cookable="False"
inline="False"
insert-after="jquery.js" />
Where table_sorter.js is the name of the javascript file that I need to override.
The reason I need to override the file is because the default has no way of telling the user whether a table is sortable or not until it is clicked on. I need to include icons on the table header by default.
I have followed the above steps but it does not seem to work. I have no idea where I'm going wrong. Any help will be highly appreciated.
You are missing the generic setup import step. Add a file skins.xml to your gs profile with this code:
<?xml version="1.0"?>
<object name="portal_skins" allow_any="False" cookie_persistence="False">
<object name="plonetheme_mytheme_js"
meta_type="Filesystem Directory View"
directory="your.product:skins/plonetheme_mytheme_js"/>
<skin-path name="*">
<layer name="plonetheme_mytheme_js"
insert-after="custom"/>
</skin-path>
</object>
After that, rembember to reinstall your product in order to apply your new gs step
Note: I'm giving another answer simply because code in comments isn't readable. Look at the #Martijn Pierters 's answer (and comments) for the initial part.
You are not overriding the original JavaScript file, only adding a new one.
You can do two different things here:
Remove the original table_sorter.js from portal_javascript:
<javascript id="table_sorter.js" remove="true" />
Because the original table_sorter.js file is server through a skin layer, you can put a new file with the same name in your own skin layer to override the original.
Considering that you have already placed your customised javascript file into your static directory, do as follows.
In file "your/app/profiles/default/jsregistry.xml"
<?xml version="1.0"?>
<object name="portal_javascripts">
<javascript id="table_sorter.js" remove="True" enabled="False" />
<javascript cacheable="True" compression="none" cookable="True"
enabled="True" expression=""
id="++resource++your.app/path/to/customised/script/table_sorter.js" inline="False"/>
</object>
Modify the attributes as you wish. :)