I have one question.
I use CKEditor 4.1 for replace textarea. When open page with CKEditor then text in CKeditor disappears.
Like this:
Before loading:
Afrer loading:
After loading CKEditor not work.
Any idea why?
I have solve the problem with setTimeout function
<script type="text/javascript">
setTimeout(function(){
CKEDITOR.replace('textarea');
},1000);
</script>
You can set text within Html tag calling ckeditor.js
<div class="columns">
<div class="editor">
<div cols="10" id="editor1" name="editor1" rows="10" contenteditable="true">
"Your Text Here...."
</div>
</div>
Then load you will see the text element inside of "div" Element.
Related
I want to autosave the content of tinyMce editor
I'm using tinmce version 5.2.2 with laravel V7
tinymce configuration in app.js
require('./bootstrap');
require('tinymce/themes/silver');
require('tinymce/plugins/image');
require('tinymce/plugins/code');
require('tinymce/plugins/save');
import tinymce from 'tinymce';
tinymce.init({
selector:'textarea#inputQuestionTitle',
height:400,
setup: function(editor) {
editor.on('Change Keyup', function () {
editor.save();
//tinyMCE.triggerSave() <-- also tried
});
}
With following View
#extends('dashboard.layout')
#section('content')
<form id='addQ' action="{{route('questions.store')}}" method="post" enctype="multipart/form-data" >
#csrf
<div class="form-row align-items-center " >
<div class="col-md-12">
<label class="sr-only" for="inputQuestionTitle">Title</label>
<textarea name="title" class="form-control mb-2 " id="inputQuestionTitle" placeholder="Question Title"> </textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary mb-2">Add new category </button>
</div>
</form>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
<script type="text/javascript">
$(function(){
$('#addQ').submit(function(e){
e.preventDefault();
var frmdata = $(this).serialize();
console.log(frmdata);
});
});
</script>
#endsection
Outputs
I had using jquery to show input request with console.log
As showed in output title field does not returns any value
Please tell me how i autosave the content of tinymce editor and send it with input request ..
I had also tried to tinymce.triggerSave() before serialize() method of ajax so that input request will take tinymce content but not works
Instead of trying to update the textarea via the triggerSave() or save() methods while someone is editing the content I would just place tinymce.triggerSave() at the very beginning of the function that submits the page. This will ensure that the triggerSave() is called directly before you grab the content from the textarea.
I am using ckeditor in a web application, when I added the ckeditor.replace code in the html template I get an error " Uncaught TypeError: Cannot call method 'getEditor' of undefined ". On the same page if I endter CKEDITOR.replace('id_taskDetails'); in the console I see all the buttons.
BTW, I get the alert.
I tried the solution from here: Inline CKEditor with toolbar on generated code
This stops the error but still no toolbar.
What am I missing?
<script>
alert('foo');
CKEDITOR.replace('id_taskDetails');
</script>
<div id="content">
<form action="/createTask/Test1/" enctype="multipart/form-data" method="post" class="basic-grey">
<p><label for="id_taskName">Task Name:</label> <input id="id_taskName" maxlength="64" name="taskName" type="text" /></p>
<p><label for="id_taskDetails">Details:</label> <textarea cols="60" id="id_taskDetails" name="taskDetails" rows="40">
</textarea></p>
<input type="submit" class="button" name="save" value="Next">
</form>
Looks like I need to post a question on StackOverflow before I get it right.
I used the jquery load function to make sure the page completely loaded before calling the ckeditor replace call and it works fine now.
<script>
$(window).load(function () {
CKEDITOR.replace('id_taskDetails');
});
</script>
CKEDITOR.replace must be executed when the element which you try to replace exists, so after it.
<p><label for="id_taskDetails">Details:</label> <textarea cols="60" id="id_taskDetails" name="taskDetails" rows="40">
</textarea></p>
<script>
CKEDITOR.replace('id_taskDetails');
</script>
I think this may be a bug in Jquery Mobile, but it could also be user error (mine).
For a jquery mobile page, I am manually calling $(..).trigger("create") after loading in some html asynchronously. I am finding an odd - to me anyway - behaviour, which is that <input>s of type text on the loaded html are not enhanced to have JQM's styling, whereas <input>s that are of type button are.
Here's a stripped-down version that replicates the problem. Basically, a page loads and injects foo.html. Part of foo.html is a placeholder div that is subsequently loaded and injected with bar.html. bar.html contains a link that opens a popup. When it's clicked and the popup opens, buttons are styled correctly; inputs are not.
Note: I call trigger("create") on the parent of the injected content.
Further note: calling trigger("create") on the grandparent of where bar.html is injected makes everything be styled correctly, including inputs on the popup. See below for code.
in the body of my basic html page:
<div data-role="page" id="grandparent" data-theme="a">
<h3>A very basic page</h3>
</div>
the script in that page's head:
<script type="text/javascript">
$(document).ready(function() {
var path = "pathToFiles/";
$("#grandparent").load(path + "foo.html", null, function() {
$("#grandparent").trigger("create");
//now load bar
$("#bar_placeholder").load(path + "bar.html", null, function() {
/*this does NOT enhance text <input> on popup*/
$("#bar_placeholder").trigger("create");
/*this DOES enhance text <input> on popup*/
//$("#grandparent").trigger("create");
});
});
});
</script>
here is foo.html
<div data-role="content" id="foo">
<h3>Foo before placeholder...</h3>
<div id="bar_placeholder" data-role="content"></div>
<h3>...foo after placeholder</h3>
<label for="foo_input" class="ui-hidden-accessible">foo input IS enhanced:</label>
<input id="foo_input" value="" placeholder="i AM enhanced" data-theme="a" type="text" />
<input type="button" id="foo_button" value="Foo Button"/>
</div>
and here is bar.html:
bar popup button
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3>Bar header</h3>
<label for="bar_input" class="ui-hidden-accessible">bar text input NOT enhanced</label>
<input name="bar_input" id="bar_input" placeholder="i am NOT enhanced" data-theme="a" type="text"/>
<input type="button" data-theme="a" value="bar button"/>
</div>
I have this view:
<script type="text/x-handlebars" data-template-name="articlesOne">
<div class="main">
<div id="articlesOne">
<h2 id="article-title">{{App.ArticlesOneController.article.title}}</h2>
<h3 id="article-lead">{{App.ArticlesOneController.article.lead}}</h3>
<div id="article-body">{{App.ArticlesOneController.article.body}}</div>
</div>
</div>
</script>
When I change the App.ArticlesOneController.article.title property to, say <p>Pragraph</p>, the browser displays the plain text, not parsed as HTML.
I would like to display that in HTML, due to building an editor on that div. How should I do that?
You should try triple brackets with {{{App.ArticlesOneController.article.title}}}. I think this link is useful for you: Show property which includes html tags
Let's say that I have two html pages that are identically designed, but have different content. I have the same div with the same id on both pages. How do I use jQuery.load (or what do I use) so that the div#conent does not get added into the div#content of the first page.
I've tried this:
$(document).ready(function(){
$("a#linkHome").click(function(){$("div#content").load('index.htm #content');});
$("a#linkPage2").click(function(){$("div#content").load('page2.htm #content');});
});
... but it ends up adding another div to the already existing div!
<div id="content">
<div id="content">
Blah Blah Blah
<div id="content">
</div>
Try with:
$(document).ready(function(){
$("a#linkHome").click(function(){$("div#content").load('index.htm #content *');});
$("a#linkPage2").click(function(){$("div#content").load('page2.htm #content *');});
});
in this way you get all elements inside the div#content but not the div itself.
Or you can try the opposite approach. Just add a wrapper div into your target page.