I'm working on a simple note taking application and using GhostDown Markdown editor. It's pretty nice, I like it, but I am stuck trying to set it's value programatically.
I can get values out pretty easily. $('.entry-markdown-content textarea').val()
Setting it however is another story... :(
Prototype of what I'm working on can be seen at http://potusnotes.com
For the editor part, Ghost-Markdown-Editor uses CodeMirror editor.
So, to set value programmatically, we would call CodeMirror's instance and do
editor.setValue(txt);
But how to get that CM instance? It was created by the widget with which Ghost-Markdown-Editor was created. See jquery.ghostdown.js file:
$.widget( "b4m.ghostDown", {
editor: null,
// ...
_create: function() {
// ...
this.editor = CodeMirror.fromTextArea(this.element.find('textarea')[0], {
mode: 'markdown',
tabMode: 'indent',
lineWrapping: true
});
}
}
As the widget was made with jQuery Widget factory, a widget instance is kept inside .data("plugin-name") element of the object it was used on.
Thus we can access widget instance and set editor value like this:
var ghostdown = $(".editor").data("b4m-ghostDown");
ghostdown.editor.setValue("# Hello, SO");
Or simply
$(".editor").data("b4m-ghostDown").editor.setValue("# Hello, SO");
Related
Is it possible to configure Converse.js to render it's boxes into custom div containers instead of adding them to the body of the page?
Yes, you can do this by writing a converse.js plugin in which you override the insertIntoPage method of ChatBoxView.
Refer to the plugin documentation I linked to above. In short, it would look something like this:
// The following line registers your plugin.
converse_api.plugins.add('myplugin', {
overrides: {
// If you want to override some function or a Backbone model or
// view defined inside converse, then you do that under this
// "overrides" namespace.
ChatBoxView: {
insertIntoPage: function (type, status_message, jid) {
// XXX Your custom code comes here.
// The standard code looks as follows:
this.$el.insertAfter(converse.chatboxviews.get("controlbox).$el);
return this;
}
},
}
UPDATE: Since recent versions of converse.js, the method to override is instead _ensureElement and not insertIntoPage.
Does anyone know how i can get Range with angular ui ace?
If i am directly embedding ace in my html, i could probably do something like this:
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
var Range = ace.require('ace/range').Range;
But how can i get this with angular ui ace? I have access to the model and the Editor class, but i guess this will require the ace object?
Ace documentation
angular ui ace
Thanks.
ace global variable is available with angular ui ace too.
Try ace.require('ace/range').Range; in the console on ui-ace demo page http://angular-ui.github.io/ui-ace/
I just found solution. I don't love it, but it works!
For creating new Range object, you need to get its constructor. And because the selectionRange property of the editor is the same "object type" (I know, we are in JavaScript), you can get its constructor and create new Range object with that :)
You can get editor object in the onLoad function:
this.aceLoaded = function (editor) {
let AceRange = editor.getSelectionRange().constructor;
editor.session.addMarker(new AceRange(from,0, to, 200), "your-style", "fullLine");
}
and in the html template, you bind it with
<div ui-ace="{
onLoad: $ctrl.aceLoaded,
}">
I've already written my own dijit widgets, as well as extended the existing one. It's simply making new declare with extended widget as argument, and using the own one instead of extended one.
However, I have a problem with dojox/form/Uploader, because it's that 'old-style' widget using old-style syntax. Instead of using the object returned by require, one should use the global object:
require(['dojox/form/Uploader'], function(Uploader){
var u = new dojox.form.Uploader({})
u.startup()
})
So, if I want to extend that widget, and using the child 'class' instead of the original, how should I actually do that?
Another thing I don't fully understand is, why whe need to use that 'old-style' syntax for dojox/form/Uploader, because it's created with the same syntax as 'normal' widget:
return declare("dojox.form.Uploader", [Base, Button, HTML5, IFrame, Flash], {
I believe you can extend it just like a 'new style' (AMD) widget, i.e.:
require([
"dojo/_base/declare",
"dojox/form/Uploader"
], function(decl) {
var MyUploader = decl(dojox.form.Uploader, {
buildRendering: function() {
this.inherited(arguments);
this.domNode.appendChild(
document.createTextNode(" ← awesome"));
}
});
new MyUploader({}).placeAt("x").startup();
});
Or am I misunderstanding your question? The reason there are traces of the 'old style' syntax in Uploader (and some other widgets) is probably just because nobody has had the time to port it to the new style yet (so it was probably automatically "converted").
Edit: Actually, the Uploader returns a 'new style' object in addition to setting the dojox.form.Uploader global. So you can actually change the above example to:
require([
"dojo/_base/declare",
"dojox/form/Uploader"
], function(decl, Uploader) {
var MyUploader = decl(Uploader, {
....
since Uploader === dojox.form.Uploader here.
I get this error only in IE7.
lang.link.toolbar is null or not an object
I thought I may have accidentally deleted something when setting up the language, so I went to ckeditor/lang/en.js and there was indeed a CKEDITOR.lang.en.link.toolbar being set.
I set up the actual CKEditor using the jQuery adapter like so...
$( '#input-product-description' ).ckeditor(
function() { /* callback code */ },
{
startupFocus: true,
language: 'en',
defaultLanguage: 'en',
removePlugins : 'smiley, about, sourcearea, flash, newpage, pagebreak, popup, preview, stylescombo, table, tabletools, elementspath, save, templates, print, find, font, forms, horizontalrule, justify, format, colorbutton, div, blockquote, indent, clipboard, image, showblocks, wsc' ,
toolbar :
[
['Undo','Redo'],
['Bold','Italic'],
['NumberedList','BulletedList']
],
resize_enabled: false
});
Does anyone know why this error may occur?
if you want to change the ckEditor language plz try to add this as the following:
or you can see the following examble from the Multi-language interface tab on CKEditor language demo
var editor = CKEDITOR.instances.editorName; // GETTING AN INSTANCE OF THE EDITOR
var editorData = editor ? editor.getData() : initialHtml; // GET THE OLD DATA IF YOU WANT TO REUSE IT
if (editor) {
editor.destroy(); // DESTROY THE OLD EDITOR
}
editor = CKEDITOR.appendTo('demoInside', { language: 'en' }); // add new one to your target
editor.setData(editorData); // set your new data
How about you make your call once the editor is ready.
InstanceReady event
i'm currently writing a large scale application heavily based on the dojo toolkit. The whole app is working and standing, but one issue i can not find my way out with, is the creation of custom widgets. It would be useful because it would clean up my source code and also i can reuse this 'widgets' in later projects.
For example: i have a main toolbar, which i would like to call using
myapp.toolbar = new myapp.mainToolbar();
instead of using
myapp.toolbar = new new dijit.Toolbar({}, containerID);
var button1 = new dijit.form.Button({
label: 'Delete',
id: 'toolbarbutton1',
showLabel: true,
iconClass: "dijitEditorIcon dijitEditorIcon Delete"
});
myapp.toolbar.addChild(button1);
...
So in short: how do i set up the whole toolbar somewhere else and call it as a simple object? Trying to figure out dojo.declare('myapp.mainToolbar', dijit.Toolbar, {...}) but then i get a bunch of errors like 'startup function not existing' etc...
I'd like to do all this programmatically, so without the template html and css files in a custom widget.
A link to a good tutorial or howto would be nice, although google nor yahoo! will reveal any extra's on this matter for me... :)
There are multiple ways to do this.
It seems like your method of extending Toolbar should work (not sure why it didn't).
You can also declare a class that embeds Toolbar and the buttons, using widgetsInTemplate:
dojo.declare("MyToolbar", [dijit._Widget, dijit._Templated], {
_widgetsInTemplate: true,
templateString: '<div> <div dojoType=dijit.Toolbar>' +
' <button dojoType=dijit.form.Button ...
Note that the top node in MyToolbar can't have a dojoType, so I put Toolbar one level down.
Alternately you can do the same thing by using dijit.Declaration, see http://docs.dojocampus.org/dijit/Declaration.
It works for me when I use declare with the superclass inside of an array:
dojo.declare('myapp.mainToolbar', [ dijit.Toolbar ],
{
....
}
);
var x = new myapp.mainToolbar({ ... });
x.startup();
Which kind of violates the docs. It should take one Function or an array of Functions.