How can I use a placeholder in Yeoman for a js file ? i tried to add it
writing: function () {
this.fs.copy(
this.templatePath('portanova_template'),
this.destinationPath(this.projectName)
);
if(this.answer) {
this.fs.copy(
this.templatePath('externalTemplate'),
this.destinationPath(this.projectName+'/app'),
{
title: this.projectName
}
);
}
},
and in the js File just added
"<%= title %>"
wherever needed. But it doesn't seems to work..
Any ideas ?
You need to use this.fs.copyTpl() otherwise the template tags are not processed.
Related
When I use the iframe in VSCode's WebView, popups are disabled by default. That is if you have an anchor tag with target="_black", it will not open a new browser.
Is there any way to resolve this problem?
const panel = vscode.window.createWebviewPanel('openWebview',
'Title',
vscode.ViewColumn.One,
{
enableScripts: true
});
panel.webview.html = getWebviewContent();
....
....
function getWebviewContent() {
return `<iframe src="http://localhost:8080/homepage" title="Title"></iframe>`;
}
The homepage has some external references which use the anchor tag
OWASP
If I click this link within the iFrame nothing happens. I wanted to open the link in an external web browser.
Thanks you
I did not find a straight solution. There is a restriction in the VS code Webview. Hence, the only solution I can think about is to add a message support in your html page.
Basically, when you click on a link we will send a message event to the parent frame which can be captured in the in the WebView.
For example, HTML page should be updated as
<a href="https://owasp.org" rel="noopener noreferrer" target="_blank"
onClick="window.parent.postMessage(this.href, '*')">OWASP</a>
And in VS code plugin,
const panel = vscode.window.createWebviewPanel('openWebview',
'Title', vscode.ViewColumn.One, { enableScripts: true });
panel.webview.onDidReceiveMessage(
message => {
switch (message.command) {
case 'show':
vscode.env.openExternal(vscode.Uri.parse(message.text));
return;
}
},
undefined,
context.subscriptions
);
panel.webview.html = getWebviewContent();
});
...
...
function getWebviewContent() {
return `<script>
window.addEventListener('message', function (e) {
const vscode = acquireVsCodeApi();
vscode.postMessage({command: 'show', text: e.data});
}, false);
</script>
<iframe src=" http://localhost:8080/homepage" ></iframe>`;
}
I'm new in Angular and html development. So i don't know yet all features and code terms.
I created a form which contains a rich textarea field. I used nicEdit as this is the one recommended by mycompany (so cannot change of editor).
As you can see in the image below, nicEdit is working well.
But when I want to get the field content in ng-model, it doesn't work.
Most of forum Q&A informs that that ng-model does not working properly with that nicEdit textarea. I found something about a directive to create. So I tried by modifying one dedicated to ckEditor.
But it doesn't work. I found that $('div.nicEdit-main') was the div updated (but not my field htmlLondDesc attached to the nicEdit textarea, neither the ng-model).
I also found something about the nicEditors.findEditor('htmlLongDesc').getContent(); but i don't know where to use it in the ng-model...
So how to get the content of nicEdit and save it in ng-model ?
Thanks in advance for your help.
Here is an image of the text area
Here is my js and html code:
scApp.directive('ncGetContent', function () {
return {
require: 'ngModel',
link: function (scope, elm, attr, ngModel) {
var content = $('div.nicEdit-main').html();
if (!ngModel) return;
content.on('instanceReady', function () {
content.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(content.getData());
});
}
content.on('change', updateModel);
content.on('key', updateModel);
content.on('dataReady', updateModel);
ngModel.$render = function (value) {
content.setData(ngModel.$viewValue);
};
}
};
});
<head>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
var myEditor = new nicEditor({buttonList : ['bold','italic','underline','subscript','superscript','forecolor','bgcolor']}).panelInstance('htmlLongDesc');
var nicInstance = nicEditors.findEditor('htmlLongDesc');
});
</script>
</head>
...
<textarea id="htmlLongDesc" cols="140" rows="6" name="htmlLongDesc" ng-model="user.htmlLongDesc" ncGetContent ></textarea>
I am trying to use jQuery sortable within the TinyMCE Visual Editor in Wordpress. I have had some success in that I can get a UL list to sort, but only if I drag the mouse OUTSIDE of the actual editor. You can see what I mean with this short 1 minute screencast video: http://screencast.com/t/1FNMvLw3Y
Here is the code I am using to run this:
(function() {
tinymce.create('tinymce.plugins.tinyMceSort', {
init : function(ed, url) {
ed.addButton('tinyMceSort', {
title : 'TinyMCE Sort',
image : url+'/tiny_sort.png',
onclick : function() {
ed.execCommand('mceInsertContent', false, '\
<ul id="list">\
<li>One</li>\
<li>Two</li>\
<li>Three</li>\
<li>Four</li>\
<li>Five</li>\
</ul>\
');
}
});
ed.onVisualAid.add(function(ed, e, s) {
console.debug('onVisualAid event: ' + ed.id + ", State: " + s);
// jQuery('#content_ifr').contents().find('#move').sortable({ containment: '#move' });
jQuery('#content_ifr').contents().find('#list').sortable({ containment : 'parent', tolerance : 'pointer', cursor : 'move'}).css({'width' : '200px', 'padding' : '10px', 'list-style' : 'none', 'background-color' : '#333'});
jQuery('#content_ifr').contents().find('li').css({'background-color' : 'grey', 'margin': '10px', 'padding': '10px'});
jQuery('.wrap').sortable();
});
ed.plugins.wordpress._showButtons(target, 'tinyMceSort');
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "TinyMCE Sort",
author : '',
authorurl : '',
infourl : '',
version : ""
};
},
});
tinymce.PluginManager.add('tinyMceSort', tinymce.plugins.tinyMceSort);
})();
What I would like to know is what do I have do in order to sort the list WITHOUT having to move the mouse outside of the TinyMCE Editor area.
Tinymce uses an iframe. I guess the necessary code is not available in the tinymce iframe.
In order to load the javascript files using the tinymce script loaderfor the iframe too you may use onInit of tinymce this
// Load a script from a specific URL using the global script loader
tinymce.ScriptLoader.load('somescript.js');
Using MVC 3.
(The code below was an attempt to recreate the toggle effect of stackoverflow's checked answer)
I have a ajax actionlink when you click it calls an update to db to switch the flag/image. However it works one time, if I click it again it will not toggle. Because there is no postback, model.IsIssue is not updated (its server code). Not sure the best approach to fix the issue. Should I handle it in the code, where I check the current flag in db and pass it back to the view. Or via Jquery, not sure how to code it (my preference)?
My code in the view (toggle):
<div>
#Html.Raw(
Ajax.ActionLink("[replacethis]",
"ToggleEnabled",
new { questionId = question.QuestionID, reviewId = step.ReviewID, flag = question.IsIssue },
new AjaxOptions { UpdateTargetId = "toggleimage" + question.QuestionID })
.ToHtmlString()
.Replace("[replacethis]",
string.Format("<div id='toggleimage{0}'><img src='/Content/images/{1}' border='0' alt='toggle'/></div>",
question.QuestionID, question.IsIssue ? "issue_on.png" : "issue_off.png")
)
)
My action controller:
public ActionResult ToggleEnabled(int questionId, int reviewId, bool flag)
{
using (var db = new NexGenContext())
{
db.Database.ExecuteSqlCommand(
"EXEC SP_AddUpdateQuestionFlagged #QuestionID, #ReviewID",
new SqlParameter("#QuestionID", questionId),
new SqlParameter("#ReviewID", reviewId)
);
return flag ? Content("<img src='/Content/images/issue_off.png' border=0 />") : Content("<img src='/Content/images/issue_on.png' border=0 />");
}
}
I would just change a css class to toggle the image.
So instead of holding the image in img ... I would use a div and placing the image as a background.
So, instead of replacing the html with the DIV and IMG in it (what removes the callback to handle the click), just change the class of the div.
In your view:
<div id="myimage" class="NormalState"></div>
In JS:
$('#myimage').click(function () {
$.ajax({
url: 'yourControllerActionURL'
type: 'POST',
contentType: "application/json; charset=utf-8",
data: {'questionId': question.QuestionID, 'reviewId': step.ReviewID, 'flag': question.IsIssue },
success: function (data) {
if(data.isClicked == true){
$('#myimage').addClass('ClickState').removeClass('NormalState');
}
else{
$('#myimage').addClass('NormalState').removeClass('ClickState');
}
}
});
});
In your CSS:
.NormalState { background-color: #ABCDEF;}
.ClickState { background-color: #FF0000;}
In your controller:
You need to return JSON with isClicked set as true or false. You could also return the css class to apply from the controller, but that way your controller knows about the view and that is not the idea of the MVC pattern. So telling the view what happenned more suitable.
I am trying to get the ckeditor working. Obviously it doesn't make use of the textarea so on submit the form doesn't submit the text in the editor. Beceause I make use of polymorphic associations etc. I can't make a onsubmit function to get the value of the textarea (when the form is submitted) .
So I found this question: Using jQuery to grab the content from CKEditor's iframe
with some very good answers. The answers posted there keep the textarea up to date. That is very nice and just what I need! Unfortunately I can't get it to work.
Does somebody know why (for example) this doesn't work?
I have a textarea (rails but it just translates to a normal textarea):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>
And the following js:
if(CKEDITOR.instances.ckeditor ) {
CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
}
function CK_jQ()
{
CKEDITOR.instances.ckeditor.updateElement();
}
I get the following "error" in my firebug.
missing ) after argument list
[Break on this error] function CK_jQ()\n
Before submit do:
for(var instanceName in CKEDITOR.instances)
CKEDITOR.instances[instanceName].updateElement();
have you figured it out?
I'm using CKEditor version 3.6.1 with jQuery form submit handler. On submit the textarea is empty, which to me is not correct. However there is an easy workaround which you can use, presuming all your CKEditor textareas have the css class ckeditor.
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
Execute the above before you do your submit handling ie. form validation.
Thanks #JohnDel for the info, and i use onchange to make it update every change.
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change", function(e) {
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
});
});
});
Combination of all of the above answers into one.
Create a new custom.js file and add this:
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("instanceReady", function() {
this.document.on("keyup", CK_jQ);
this.document.on("paste", CK_jQ);
this.document.on("keypress", CK_jQ);
this.document.on("blur", CK_jQ);
this.document.on("change", CK_jQ);
});
});
});
function CK_jQ() {
for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}
You don't have to worry about the name of the textarea, just add a class ckeditor in the textarea, the above and you are done.
ADD Function JavaScript for Update
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
It's work. Cool
Just Add
CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});
where textAreaClientId is your instance name
Regards
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
})
I just increase that to the response of T.J. and worked for me:
$("form").on("submit", function(e){
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
});
On load:
$(function () {
setTimeout(function () {
function CK_jQ(instance) {
return function () {
CKEDITOR.instances[instance].updateElement();
};
}
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
CKEDITOR.instances[instance].on("change", CK_jQ(instance));
});
}, 0 /* 0 => To run after all */);
});
There have been some API changes with the latest versions of CKEditor, so here's an answer for CKEditor 5:
let ckeditor;
// Create a CKEditor, and store its handle someplace that you may
// access later. In this example, we'll use the `ckeditor` variable:
ClassicEditor
.create(document.querySelector("textarea"), {})
.then(editor => { ckeditor = editor; });
// When your form submits, use the `updateSourceElement` method
// on the editor's handle:
document.querySelector("form").addEventListener("submit", function() {
ckeditor.updateSourceElement();
});
To my knowledge, CKEditor does this automatically when you submit a form, so this particular example shouldn't actually do anything. But it is useful when you need the content of the textarea to udpate without submitting the form that contains it.
All above answer are focusing on how to fix this error but I want to take the answer on what cause me this error
I had a
<textarea class="ckeditor" rows="6" name="Cms[description]"></textarea>
changed to
<textarea class="ckedit" rows="6" name="Cms[description]"></textarea>
I changed class attribute value to anything other than ckeditor and boom error gone.
Hope that help