Skip to content

Instantly share code, notes, and snippets.

@stevewithington
Last active January 31, 2022 17:00
Show Gist options
  • Save stevewithington/7451982 to your computer and use it in GitHub Desktop.
Save stevewithington/7451982 to your computer and use it in GitHub Desktop.
Mura CMS : Example of how to create a custom instance of CKEditor with CKFinder in Mura CMS.
<!---
Form more information on configuration of CKFinder, visit:
http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.setupCKEditor
--->
<cfoutput>
<form>
<label for="yourTextAreaID">Your Message</label>
<textarea id="yourTextAreaID" name="frm-message" class="htmlEditor">
</textarea>
</form>
<script>
$(document).ready(function() {
$('textarea##yourTextAreaID').ckeditor(
{
toolbar: 'Default'
, customConfig: context + '/requirements/ckeditor/config.js.cfm'
}
, customHtmlEditorOnComplete
);
});
function customHtmlEditorOnComplete(editorInstance) {
var instance = $(editorInstance).ckeditorGet();
instance.resetDirty();
CKFinder.setupCKEditor(instance , { basePath: context + '/requirements/ckfinder/' });
}
</script>
</cfoutput>
@manking109
Copy link

Would this be a way to give an individual user access to there own asset folder?

@manking109
Copy link

https://groups.google.com/forum/#!topic/mura-cms-developers/2AVCWjcTmCI

Steve please look at this link and see if you can help!

Thanks
Manny

@Tigerlady
Copy link

Steve, I copied your code above changing the textarea id to match my own. However, the editor doesn't show and I am getting an error context not defined in the inspector panel. Not sure what I may be missing at this point. Thanks for taking a look

So here is my code:
`Edit

#catsQuery.category_description#

<textarea name="category_description#currentRow#" class="htmlEditor" cols="45" rows="3">#catsQuery.category_description#</textarea> <script> $(document).ready(function() { $('textarea##category_description#currentRow#').ckeditor( { toolbar: 'Default' , customConfig: context + '/requirements/ckeditor/config.js.cfm' } , customHtmlEditorOnComplete ); }); function customHtmlEditorOnComplete(editorInstance) { var instance = $(editorInstance).ckeditorGet(); instance.resetDirty(); CKFinder.setupCKEditor(instance , { basePath: context + '/requirements/ckfinder/' }); } </script>`

2016-08-05_14-10-39

@charlesr1971
Copy link

Please could someone tell us how we get the:

context

Path?

Otherwise, this brilliant code is useless. Thanks...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment