Skip to content

Instantly share code, notes, and snippets.

@mtvbrianking

mtvbrianking/ckeditor_tutorial_demo_1.html

Created February 14, 2016 23:04
Show Gist options
  • Save mtvbrianking/770093237094116be7ba to your computer and use it in GitHub Desktop.
Save mtvbrianking/770093237094116be7ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ckeditor_tutorial_demo_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
</head>
<body>
<h2>CKEditor <a target="_blank" href="https://github.com/mtvbrianking">Demo I</a></h2>
<p>
This demo shows how to use CKEditor when installed using CDN, and the external resource (plugins + skins) located separetely from the basePath.<br/>
<strong>Note:</strong> <i>BASEPATH</i> is the location of 'ckeditor.js'
</p>
<textarea id="textArea_id" name="textArea_name"></textarea>
<div id="footer">
<p>
"As we enjoy great advantages from the inventions of others,
we should be glad of an opportunity to serve others by any invention of ours;
and this we should do freely and generously."
</p>
<p style="margin-top: 0">
<a target="_blank" href="http://brianmatovu.com/ckeditor-setup-configuration/">Read Tutorial</a>
</p>
</div>
<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<script type="text/javascript">
/* Provide url/path to ckeditor assets */
var ckeditor_assets = 'http://your_domain/assets/ckeditor/'; /* Replace this to your own specs */
CKEDITOR.plugins.addExternal( 'pbckcode', ckeditor_assets+'plugins/pbckcode/', 'plugin.js' );
CKEDITOR.replace( 'textArea_name', {
skin: 'moonocolor,'+ckeditor_assets+'skins/moonocolor/',
extraPlugins: 'pbckcode',
toolbar: [
[ 'clipboard', 'undo', '-', 'Cut', 'Copy', 'Paste','-', 'Undo', 'Redo' ],
[ 'TextColor', 'Bold', 'Italic' ],
[ 'Format', 'Font', 'FontSize' ],
[ 'pbckcode' ]
]
} );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment