CkEditor5 insertContent Function not working - ckeditor

I am trying to use insertContent method but getting some error.
Here is my implementation
<div id="editor">
<p>This is the editor content.</p>
</div>
<button onclick="update()">update</button>
<script src="./node_modules/#ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script>
var editorInstance;
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
editorInstance = editor;
})
.catch(error => {
console.error(error);
});
function update() {
editorInstance.model.insertContent("<p><b>Test</b> Content</p>")
}
</script>
update method should update the editor source with given content, but I am getting an error
Error on the console:
Uncaught TypeError: e.is is not a function
at xc.Nm (converters.js:777)
at xc.fire (emittermixin.js:209)
at xc. [as insertContent] (observablemixin.js:259)
at update (ck5.html:19)
at HTMLButtonElement.onclick (ck5.html:4)
Can anyone please help in sorting out this issue?

This error appears to be caused by trying to use the insertContent method to insert HTML - this method seems to expect a plain text string by default, although we can make it accept HTML with a few extra steps.
First of all, you'll need to grab the HTML Data Processor:
const htmlDP = editorInstance.data.processor;
Next you need to convert your HTML string into a viewFragment using the HTML Data Processor that we just obtained:
const viewFragment = htmlDP.toView("<p><b>Test</b> Content</p>");
Last of all, we need to convert the viewFragment to a modelFragment:
const modelFragment = editorInstance.data.toModel( viewFragment );
Now we can pass the modelFragment to the insertContent method:
editorInstance.model.insertContent(modelFragment);
This should remove the error and allow the mark-up string to be inserted into the editor

Related

An api call for Instagram is working but returning an error that the token in .env is undefined. I am using Nuxt3. How do I fix the error?

I would like to display a gallery of instagram images in a Nuxt3 component. Right now I am just trying to print the data returned from an API call to instagram.
This actually works - the data is returned and the template is displayed in the browser.
However, I get an error message that the token variable in .env is undefined.
When I print just the url to the console, it displays correctly in VScode terminal, but does not work in the browser console.
This is the error I am receiving:
instagram.vue:8 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'LMM_TOKEN')
Here is my .env
LMM_TOKEN="mytokenhere"
I have tried this both with quotes and without. I have also tried to useRuntimeConfig() but get the same error.
I am still really uncomfortable with doing API calls, so I suspect the problem is in my component (though it actually does print out the data!):
<template>
<div>
<pre v-if="feed">{{ feed.data }}</pre>
</div>
</template>
<script setup>
const instaToken = process.env.LMM_TOKEN
const url = `https://graph.instagram.com/me/media?fields=id,caption&access_token=${instaToken}`
const feed = ref({})
try {
const data = await fetch(url).then((res) => {
return res
})
feed.value = await data.json();
} catch (e) {
console.log(e)
}
</script>

laravel passing a variable to js file from a controller

I have a js file located in assets folder (not View). can i pass a varible from a controller?
In view file:
The Js is called like this
<canvas id="chart1" class="chart-canvas"></canvas>
</div>
It is not possible (in my point of view) to put a variable to external JS file. You can use data-... attributes and get values from html elements.
For example you can pass your PHP variable as a json encoded string variable in your controller.
$data['chart_info'] = json_encode($chart_info);
return view('your_view', $data);
Then put it in data-info like this.
<canvas id="chart1" class="chart-canvas" data-info="{{ $chart_info }}"></canvas>
And finally in JS, you can get the variable and decode (parse) it as following.
let canvas = document.getElementById('chart1');
let info = JSON.parse(canvas.dataset.id);
console.log(info);
You can put that part of the Javascript in the view and send the variable to the same view. For example, add a section in view:
#section('footer')
<script type="text/javascript">
</script>
#endsection
Do not forget that you should add #yield('footer') to the end of your layout view.
I don't like to mix javascript and PHP/Blade, it might be hard to read the code in the future... You could use a different approach, loading the chart with a async ajax request.
You will have to create a end-point that returns the data you need for your chart:
Your router:
Route::get('/chart/get-data', [ ControllerName::class, 'getChartData' ]);
Your controller method:
public function getChartData() {
$chartData = [];
// Your logic goes here
return $chardData;
}
In your javascript (using jquery) file there will be something like that:
function loadChartData() {
$.ajax({
'url': '/chart/get-data',
'method': 'GET'
})
.done((data) => {
// Load your chart here!!!
})
.fail(() => {
console.log("Could not load chart data");
});
}
Hope I helped ;)

use parse react query results as an html tag attribute

This is my first time asking a question so I am a true SO newbie. I am currently working on a mobile app and I am using Parse React and Ratchet to build it. I have read the React documentations on FB github and apparently do not understand all enough to solve some problems. One of my problems is using the results of a Parse Query in the observe function of the declared ParseComponent as a value of a rendered react component, which in turn attempts to render the passed value as HTML. Below is the parent object:
export default class CategoryPage extends ParseComponent
{
observe(props,state){
return{
category: new Parse.Query('BusinessCategory').equalTo("objectId", this.props.categoryId)
};
}
render() {
return (
<div>
<Header text={this.data.category.objectId} back="true"/>
<div className="content">
<BusinessList categoryId={this.data.category.objectId}/>
</div>
<NavBar />
</div>
);
}
};
Notice I am passing the objectId of the category found in the Query as a text attribute of the Header React component. I am expecting Header as a child to use the passed property as follows:
var Header = React.createClass({
render: function () {
return(
<header className="bar bar-nav">
<h1 className="title">{this.props.text}</h1>
</header>
);
}
});
However the h1 is not rendering anything! I am thinking that this.data.category.objectId is a string and therefore should be rendered in the h1 tag as a string.
I do appreciate your answers very much.

jQuery: Get next page via ajax and append it with animation

I am getting next page on my wordpress blog using jquery, finding the desired div and appending it to the existing one. This part works without a problem. But, what I need to do is, to add slideDown animation to it.
This is how my working code so far looks like:
$.get(next_page, function(data) {
var response = $(data);
var more_div = $(response).find('.FeaturedRow1').html();
$('.FeaturedRow1').append(more_div).slideDown('slow');
$('.navigation').not(':last').hide();
I tried adding hide() to response, more_div as well as append lines. In the first case, I get error stating that it cannot set property display of undefined.
In the second case, in the console it display HTML and says "has no method hide". I also tried adding a line $(more_div).hide() but again, I get the error "Uncaught TypeError: Cannot set property 'display' of undefined".
If I use hide in the 3rd line
$('.FeaturedRow1').hide().append(more_div).slideDown('slow');
it hides the whole FeaturedRow1 div and animates it, that takes me to the top of the div, which is what I don't want.
EDIT: Here's the important HTML structure and jQuery code for the desired section
<div class="FeaturedRow1">
<div class="postspage">
//list of posts here
</div>
<div class="navigation">
<span class="loadless">
//hyperlink to previous page
</span>
<span class="loadmore">
//hyperlink to next page
</span>
</div>
</div>
When you click on the hyperlink inside the loadmore, the following jQuery code gets called
$('.loadmore a').live('click', function(e) {
e.preventDefault();
var next_page = $(this).attr('href');
$.get(next_page, function(data) {
var $response = $(data);
var $more_div = $response.find('.FeaturedRow1').hide();
$more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow')
$('.navigation').not(':last').hide();
});
});
$('.loadless').live('click', function(e) {
e.preventDefault();
if ($('.postpage').length != 1) {
$('.postpage').last().remove();
}
$('.navigation').last().remove();
$('.navigation').last().show();
});
You get error as you are using html method which returns a string not a jQuery object, try the following.
var $response = $(data);
var $more_div = $response.find('.FeaturedRow1').hide();
$more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow');
//$('.navigation').not(':last').hide();
Update:
$.get(next_page, function(data) {
var $response = $(data);
var more_div = $response.find('.FeaturedRow1').html();
$('<div/>').hide()
.append(more_div)
.appendTo('.FeaturedRow1')
.delay(100)
.slideDown('slow')
$('.navigation').not(':last').hide();
});

Uncaught [CKEDITOR.editor] The instance "html" already exists

I have a problem with loading CKEDITOR. I have made everything like described here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration But anyway i'm getting an error (Google Chrome 4.x) Uncaught [CKEDITOR.editor] The instance "html" already exists.
Here is my code:
<script type="text/javascript" src="/engine/jq.js"></script>
<script type="text/javascript" src="/engine/cke/ckeditor.js"></script>
<script type="text/javascript" src="/engine/cke/adapters/jquery.js"></script>
<textarea class="jquery_ckeditor" name="html" id="html" rows="10">text</textarea>
<script type="text/javascript">
if (CKEDITOR.instances['html']) { CKEDITOR.remove(CKEDITOR.instances['html']); // with or without this line of code - rise an error }
CKEDITOR.replace('html');
</script>
check this:
if (CKEDITOR.instances['html']) {
delete CKEDITOR.instances['html']
};
CKEDITOR.replace('html');
using the jquery ckeditor adapter - I was able to reinitialize ckeditor textareas in ajax content using this function.
function initCKEditor() {
$('.wysiwyg').ckeditor(function(e){
delete CKEDITOR.instances[$(e).attr('name')];
},{
toolbar:
[
['Bold','Italic','Underline','Strike','-','NumberedList','BulletedList','-','Paste','PasteFromWord','-','Outdent','Indent','-','Link','-','Maximize','-','Source']
],
skin: 'office2003'
}
);
}
remove class='ckeditor' as it's triggering the automatic replacement system.
Same error, getting it with the jQuery adapter though. Check the class of the textarea. As far as i can tell all text areas with class 'ckeditor' are automatically converted to editors. So either don't bother setting it with javascript or change the class.
http://ckeditor.com/blog/CKEditor_for_jQuery has a fix if you are using jQuery
// remove editor from the page
$('textarea').ckeditor(function(){
this.destroy();
});
Your page has a html container, try renaming your textarea ?
<textarea class="jquery_ckeditor" name="editor" id="editor" rows="10">text</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
The solution that works for me: in an Ajax view, having two controls
#Html.TextAreaFor(model => model.offreJob.profile, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_profile" })
and
#Html.TextAreaFor(model => model.offreJob.description_job, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_description" })
I use the following script:
<script>
if (CKEDITOR.instances['ck_profile']) {
delete CKEDITOR.instances['ck_profile'];
}
CKEDITOR.replace('ck_profile');
if (CKEDITOR.instances['ck_description']) {
delete CKEDITOR.instances['ck_description'];
}
CKEDITOR.replace('ck_description');
</script>
Try this, hope it works, it worked for me.
for(html in CKEDITOR.instances['html')
{
CKEDITOR.instances[html ].destroy();
}
http://dev.ckeditor.com/ticket/9862#no1
Try this, it worked for me
var editor = CKEDITOR.instances["your_textarea"];
if (editor) { editor.destroy(true); }

Resources