We Keep Coding

How can we populate textarea value when textarea is initilized as ckeditor

Well i have been working on CKEDITOR with HTML FORMS and backend is asp.net core v3.1. I have used asp tag helpers in rendering and binding html forms.
Following is the code :
<div class="form-group">
<label asp-for="Content" class="control-label"></label>
<div class="input-group">
<textarea asp-for="Content" class="form-control" required placeholder="Content"></textarea>
<span asp-validation-for="Content" class="text-danger"></span>
</div>
</div>
I have two pages create and edit which creates the first form entry to database and update the values respectively.
So when i load edit page all the values are loaded but CKEditor values are not loaded after all it is bound to textarea.
Values are not displaying in HTML CKEDITOR content area.
CKEDITOR INITILIZE CODE IS BELOW
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
$(function () {
CKEDITOR.replace('Content');
})
</script>
}

The API documentation has documented methods for this:
Set Data
setData.
CKEDITOR.instances.editor1.setData( '<p>This is the editor data.</p>' );
Insert Element
insertElement.
var element = CKEDITOR.dom.element.createFromHtml( '<img src="hello.png" border="0" title="Hello" />' );
CKEDITOR.instances.editor1.insertElement( element );
Insert Text
insertText.
CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' );
Insert Html
insertHtml.
CKEDITOR.instances.editor1.insertHtml( '<p>This is a new paragraph.</p>' );
I think what you need is setData as the other methods append text/html at the cursor position.

Laravel form with jquery only shows plain text

i'm having troubles inserting html on my form with JQuery, i have a button that via jquery adds a new div with a laravelcollective select input, the add works fine but my laravelcollective select input only shows a plain text, it is possible to do this? or i should put a pure HTML tag on my jquery code..
I attach a image and my code below, ty for ur replies..
$(document).on('click','.btn-add-drink',function(e){
e.preventDefault();
$("#begin1").after("<div class='form-group option-container'>
<div class='control-label col-md-2'></div>
<div class='col-md-5 pull-left' id='addDrinks' >
{!!Form::select('bebidas', $bebidas,null,['id'=>'select1','class'=>'form-control','placeholder'=>'Seleccione una bebida..','required'])!!}
</div>
<div class='col-md-2'>
<button class='btn btn-danger btn-remove' onclick='deleteElement()' data-tooltip='Quitar elemento'><b>X</b></button>
</div>
</div>");
});

Make sure your form file extension is .blade.php
Try adding a # in front of your blade statements.
If that doesn't work, try using {{ }} instead of {!! !!}

find the control by type

I have Angular ui-grid in one of the columns I have used cell template the code is given below
cellTemplate: '<div class="ui-grid-cell-contents" > <input name="files" id="files" type="file" /></div>'
I want to find the input control of type file through jquery code given below
var k = $("input[type='file']");
But this is not working it cannot find the control inside grid but if the control is placed outside grid the above code finds it any idea how to find any control inside the grid.

how to dynamically action an angular ng-include command

Is it possible to dynamically add an ng-include element to a HTML page and have it actioned?
I have a Drag N Drop application where you can drag an element onto the page and in the drop zone the element is replaced with a more detailed element. For examples you drag a box that says Calendar and when it is dropped a calendar is presented. To be clear a new Element is created and added to the DOM, it does not exist before the drop.
When the element is dropped, I'm hoping that I can replace it with a chunk of HTML that looks like below. Instead of having the markup defined in a string like it is at the moment which is not very nice:
<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>
<span class='glyphicon glyphicon-remove'></span>
WIDGET NAME
<spanclass='glyphicon glyphicon-cog'></span>
</h3>
</div>
<div class='widgetContainer' ng-include="'widgets/widget.html'"></div>
</div>
When the above HTML is inserted into the page the referenced HTML file is not included.
What I would like to happen is a HTML file is loaded containing the widget markup and included at the appropriate position.
I'm new to Angular so I don't know if this is because:
dynamically adding ng-include isn't supported
whether I need to do something with the controller to handle this logic
should I be using the tag instead of the attribute?
it just isn't possible.
Please provide examples with solutions, as I said I'm new to Angular.
Thanks
UPDATE
The code used to created the HTML that I want to dynamically add to the page looks like this
$("#template").append(
" \
<div class='panel panel-default'>\
<div class='panel-heading'>\
<h3 class='panel-title'>\
<span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeElement(this)'></span>\
" + widgetDetail['serviceName'] + "\
<span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
</h3>\
</div>\
<div class='markupContainer' ng-include=\"'widgets/" + id +".html'\"></div>\
</div>\
"
);
I've uploaded the complete code to GitHub. The drag and drop aspects are being handled currently by HTML5 javascript, which can be seen in the file /public/javascripts/js_dragndrop.js. The new widget being added to the page (the code above) is in /public/javascripts/jq_dragndrop.js
I'm in the prototyping phase trying to work out the DragNDrop elements so don't expect high quality code :)

I found a way of achieving what I wanted by moving the HTML5 drop and drop code into AngularJS directives and then (using this [ Compile dynamic template from outside of angular ] as a guide) got the html templates being loaded where I wanted them.
The main code change looks like this:
angular.element(document).injector().invoke(function ($compile) {
var widgetDetail = widgets[e.dataTransfer.getData('Text')];
var obj = $("#template");
var scope = obj.scope();
obj.append(
"<div class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'>\
<span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeWidget(this)'></span>\
" + widgetDetail['serviceName'] + "\
<span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
</h3></div><div class='markupContainer' ng-include=\"'widgets/" + widgetDetail['serviceId'] + ".html'\"></div>\
"
);
$compile(obj.contents())(scope);
scope.$digest();
});
You can find the full code in the Git Project /public/controllers/template.js if you are interested.

How to set datas with css style with CKEditor?

How can I set datas with CKEditor (4.0) with CSS style ?
$quote = $editor + '<br />'+
'<div class="quote">'+
'<div class="quote-infos">'+
'<i class="icon-comment icon-white"></i>'+
' <span class="quote-user">'+$user+'</span>,'+
' <span class="quote-date">'+$date+'</span> :'+
'</div>'+
'<blockquote>'+$div.html()+'</blockquote>'+
'</div>';
editorMessage.setData($quote);
In this code, when I send the datas to a POST form, I just have <div><div><i></i><span...

If you are using the new 4.1 CKEditor, it might be because of the new Advanced Content Filter feature. It nukes tags, attributes and attribute contents from content HTML, see demo. Turn it off by adding config.allowedContent = true to your config. More info on configuration in the API
You can test for this easily in your CKE instance by going to source mode, adding some attributes manually into the content, like <div class="MagicalPonies"><div><i></i><span... Then switch to wysiwyg mode and back to source mode. If your class definition is missing, it's most likely ACF. Also try to add a class like <img alt="X" class="left" src="http://b.cksource.com/a/1/img/sample.jpg" /> and see if that sticks. Standard CKE classes like that aren't removed.