I am using ckeditor version 3.6.4 in my MVC3 Application.
1) I have included both js in my application
<script src="../../Scripts/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="../../Scripts/ckeditor/adapters/jquery.js" type="text/javascript"></script>
2) Below code is my textarea and i am binding viewdata to textarea.
<textarea id="txtAreaBody" name="txtAreaBody" rows="15" cols="220"><%= ViewData["Body"]%> </textarea>
3) To call ckeditor , i have written below code.
<script type="text/javascript"> $("#txtAreaBody").ckeditor(); </script>
That's it.
and i have html content in my Viewdata.
As you can see from below screenshot, when i am running my application , my textarea is blank. and i am not able to see my content.
Can anyone please help me ..?
You do not say whether your textarea is in a partial view or full full, if its in a partial view, Viewdata will not work, you would have to use #tempdata, if in full view, try removing ckeditor() and see if textarea is populated with any data.
Hope it helps or points you in the right direction
Yep, another cause of this is if you use #Html.TextBoxFor() instead of #Html.TextAreaFor() then CKEditor will not pick it up, and you will see an empty WYSIWYG Editor with no text, despite the data being passed through the model.
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 have some text saved in my database in HTML format, This text was saved into datatbase from a email.
Sometimes emails have single or double opening inverted commas but no closing inverted commans.
Becuase of this other scripts on the page stop to work.
How can i prevent this html code which i am reading from database to not affect my page style or scripts.
You can consider my application to be simple email reading application.
Any email that i read from database even if it has improper/buggy html, i don't want it to break my code.
Please let me know how i can fix this issues
I am working on following
- Laravel
- Bootstrap
Always escape the data that you receive from the client or you will become a victim of XSS (Cross Site Scripting).
That said if you really want to do it then there are two ways so that the content of the email doesn't affect your code.
IFrame
Shadow DOM
Both of these have a separate context than the parent page so they will not interfere with your code unless the code inside them manually tries to access parent.
Following is the sample for both. Same on JSFiddle
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="iframeParent">
</div>
<div id="shadowParent">
</div>
<script>
var emailContent = "<h1>helloworld</h1>";
var iframeContainer = $("#iframeParent");
$('<iframe/>').appendTo(iframeContainer).on("load", function () {
$(this).contents().find("body").html(emailContent);//firefox
}).contents().find("body").html(emailContent);//chrome
var shadowContainer = $("#shadowParent");
alert(shadowDom);
var shadowDom = shadowContainer.get(0).createShadowRoot();
shadowDom.innerHTML = emailContent;
</script>
</body>
</html>
Note: Shadom DOM is probably not the best solution as it's not enabled by default on the firefox. See this link
My code returns HTML data from ASP.NET as a response from an action method.
I am displaying this in a <textarea> element.
<textarea style="width: 85rem; height: 15rem;"
ng-disabled=true
ng-model="access.response"></textarea>
However when it displays I see the actual HTML.
How can I make it so the information displayed in the textbox or some other way is the same as in my browser window? Note that I do not want to edit the data but I would like the scrollbar type feature.
Is correct to say that you cannot display it in a textarea, but you can't use a simple div neither to display the parsed HTML.
Take a look at this Plunkr --> http://plnkr.co/edit/ld4Nte2KKIbgMkIWnRcP
You have to make use of the $sce service and the ng-bind-html directive, like this:
<div ng-controller="SimpleCtrl">
<!-- This will be parsed as HTML-->
<div ng-bind-html="to_trusted(someCode)"></div>
<!-- This will not -->
<div>{{someCode}}</div>
</div>
No way to do it with textarea.
If you want editable HTML content, consider this:
<div contenteditable="true"></div>
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');
});