I want to add dynamic content in ckeditor I have also used CKEDITOR.instances or some another thinks which I get from Stack Overflow but I can't get output.
<script type="text/javascript" src="<?php echo base_url();?>js/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor form-control" name="Content" id="emailcontent" >
<?php echo $valuedata[0]['email']; ?>
</textarea>
i am using ck-editor java script and text area.
You can do this in jquery by assigning value to editor like
CKEDITOR.instances['emailcontent'].setData(data)
Here you can populate data. Find below detail here
How to add extra data to the ckeditor using jquery?
If you want to replace the entire editor content, use setData(), for example:
CKEDITOR.instances[Name].setData(Data)
If you want append data into the editor window, you can use insertHtml() and insertText() methods
Related
Two text editors are appearing on the page, the basic one and the more updated version. I don't know what I'm doing wrong. Can anybody help?
<script src="../../assets/js/ckeditor5/ckeditor.js"></script>
<script>
ClassicEditor.create(document.getElementById('body'));
</script>
<div>
<label>Body</label>
<textarea name="body" id="body"><?php echo $body ?></textarea>
</div>
The second text editor (the updated version) isn't saving the content I put into it, only the top editor sends through the data to my database. Proper confused, apologies if it's a simple fix, head is mashed.
Cheers!
I am using TinyMCE in my HTML Textarea to format content and then save them in MySQL Database. All is working fine. But when I try to get the saved content from database in other page it is showing with all the HTML tags and CSS attributes. What I need is to show the content with same formatting as it was saved.
I am using following code to initilize the TinyMCE in my form.blade.php file.
<script>
tinymce.init({
selector: '#requestDescribe'
});
</script>
Below is the text area where I am using TinyMCE.
<textarea required name="requestDescribe" id="requestDescribe"
cols="30" rows="5" maxlength="600" class="form-control"
value="{{old('requestDescribe')}}">
After saving such type of content is being saved in database.
<p><strong>dfg <span style="text-decoration: underline;">fkjg gkjdfhgkfg </span> <em>gdfgf</em></strong></p>
When I get data in some other page it shows with all the html and css code like this:
I have used PHP stray_tags but it didnt work. Mybe because the code has both html and css. Please Help. TIA
Ok I have found the answer. If you are using PHP (Which is the case with me) so just use echo. :)
I'm using codeigniter and have an edit page, on this page I have an TinyMCE editor. This is how I load the javascript files:
<script src='<?php echo site_url('js/tinymce/tinymce.min.js'); ?>'></script>
<script>
tinymce.init({
selector: '.tinymce'
});
</script>
This works great when adding code, and it shows up as < p > test < / p > (without spaces).
When I edit a page however, the p-tags or other tags aren't converted to the wysiwyg, they just show up as p-tags (see picture below).
screenshot of the source view
this is how I'm getting the data in the textarea:
<?php echo form_textarea('body', set_value('body', $page->body), 'class="form-control tinymce" placeholder="Inhoud"'); ?>
the set_value just puts the actual content inside the value of the input.
If you're using Codeiginter 3, the "set_value()" function accepts a third parameter, html escape. Details here: http://www.codeigniter.com/userguide3/helpers/form_helper.html?highlight=set_value#set_value
So you should use:
<?php echo form_textarea('body', set_value('body', $page->body, false), 'class="form-control tinymce" placeholder="Inhoud"'); ?>
I'm using the following tinymce javascript setting also: format: 'raw'
I had the same problem and this solution works.
Next time you should also search on the codeigniter forum - https://forum.codeigniter.com/thread-1035.html
When You write any thing in editor it's already wrapped with tags. When you want to write html in editor,
If that sourc code is disable you can make it enable using following code snippet. (More)
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "code",
toolbar: "code",
menubar: "tools"
});
There is one option at Tools > Source Code > Write your HTML code there.
if you use {{ $post->body }} then same database output display in html
This is working -> {!! $post->body !!}
I have one <textarea> tag in my website where the user can put there HTML code and see its preview. My problem is when the user enter code below mention in my <textarea> my preview functionality getting fail :
<html>
<textarea>Some code to show</textarea>
</html>
So question is how can I escape this html code in my <textarea> tag as I know the problem is coming because </textarea> tag.
Any solution on this please.
Edit
Question is about using </textarea> within a textarea.
Problem visible here: http://jsfiddle.net/hrP6F/
EDIT: for your purpose this would do:
<textarea>
Outside Textarea
<textarea>Inside Textarea</textarea>
</textarea>
source: How can I embed a textarea inside of another textarea in HTML?
Or use contenteditable like someone already mentioned -> click
FIRST ANSWER: Im not sure I understand perfectly but still. You want to display the code inside text area somewhere else for instance?
You could do that on click like this (I reckon you are not statically putting nested text areas in html?):
HTML:
<textarea id="textarea" >Something code to show</textarea>
<button onclick="show()">show</button>
<div id="showArea"></div>
JS:
function show(){
var t = document.getElementById('textarea').value;
document.getElementById('showArea').innerHTML = t;
}
This is of course if what you want is to display html that is inside textarea. you could also put another textarea inside first one and it will work.
If you want the results to display dynamically you could use
<textarea id="textarea" onkeyup="show()">Something code to show</textarea>
This works even if you put your code (html and text area) inside text area - it displays it, I tested it
You can add a output div for preview purpose. Below is the jQuery script
HTML
<textarea placeholder="Enter your html"><b>test</b></textarea>
Run
<div class="op"></div>
JS
$('.run').click(function(){
$('.op').html($('textarea').val());
return false;
});
DEMO
I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});