i am trying to set HTML data in tinymce using jquery. But i have some problem in it.
my html data is as :
var data = "<div><img src='http://localhost/images/test.png' /><div>Image Title</div></div> html";
tinyMCE.activeEditor.setContent(data , {format : 'raw'} );
It renders the div and image properly. but i get additional tag with html in it
If i remove the html word the data is not properly rendered in editor
I also tried various below combination, but it did not helped:
tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.id, str);
tinyMCE.activeEditor.setContent(data );
Tinymce and the browser taking care of the validity of the html entered.Can you show me the editor content after you entered your data?
tinyMCE.activeEditor.setContent(content);
is the usual correct way to replace the current editor content with the text that the content variable hold.
Related
Is it possible to reneder value from any external source (database, files, etc.) like 'some text' on page as pure HTML with using LIT-HTML? I'm trying to do it by assinging this value to variable like that:
var variable = html `{$database.value}`
but it doesn't work. I still see text on the page instead of HTML tags (div, a)
You can use the unsafeHTML directive for this: https://lit-html.polymer-project.org/guide/template-reference#unsafehtml
In My web application, i need to display text in ckeditor, while loading text into ckeditor it will shows suddenly HTML code after it will display text. I don't want to display HTML code at the time of loading i need to display text directly to ck editor how can i do this is it possible to solve this problem or not can anyone tell me.
My ckeditor:
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server" Width="940px" Height="400px"></CKEditor:CKEditorControl>
like this i passed data to ck editor
html = html.Replace("border-top-color:", "\"><hr /><border-top-color:");
CKEditor1.Text = html;
Thank you
The CKEditor:CKEditorControl controller creates a <textarea> element in html, and only when the document loads it changes the content of that textarea to the ckeditor instance.
If you can - change it to <div> element with contenteditable="true". Another option is to hide that textarea using css:
textarea#CKEditor1 { display: none;}
I am making a forum with markdown support.
I've been using meteor's markdown parser {{#markdown}} and have found something disturbing that I can't seem to figure out.
I am using {{#markdown}}{{content}}{{/markdown}} to render the content inserted into database.
The disturbing thing, for example, if someone writes up html without inserting it into the code block in the content...
example
<div class = "col-md-12">
Content Here
</div>
This will render as a column. They could also make buttons and etc through writing the HTML for it.
How to disable this behaviour so that when HTML is written it will not render into HTML but just simply show it as text?
You can write global helper, which will strip all html tags:
function stripHTML(string){
s = string.replace(/(<([^>]+)>)/ig, '');
return s;
}
Template.registerHelper('stripHTML', stripHTML)
Usage :
{{#markdown}}{{stripHTML content}}{{/markdown}}
Test it in console:
stripHTML("<div>Inside dive</div> Text outside")
So I have this textarea in my website. By default, it has something like this as its contents:
Name : Sample Value
Age : Sample Value
Location : Sample Value
It is editable before the user hits the button and inserts it into the database, although I am not using a rich text editor since it's nothing but a simple text.
Since basic HTML codes are not browser readable inside the textarea tag, I used
to separate lines.
Now my problem is that I am not able to include the HTML code when I'm reading the value of the textarea tag in the server side.
Thus, the value inserted to the database is not HTML formatted as well, and when it is once again fetched into a web browser, it has no format at all.
What alternatives do I have? Thanks.
Not possible using textarea, use contenteditable DIV instead.
<div contenteditable="true"></div>
You can use getters and setter as shown below:
//Get content
var contents = document.getElementById("divId").innerHTML;
//Set content
document.getElementById("divId").innerHTML = contents
Here is the browser support for this approach.
Why don't you use JQuery and do this $(textarea).val() to get the value of the textarea as a string and use it server side. you might have to consider using Ajax to make a call to the server side method you want to pass the Html data.
The answer is very simple.
Use contenteditable DIVs instead of TextBox and TextArea.
But remember to add contenteditable="false" to all your inner HTML tags.
This worked for me.
How can I set the title attribute of an HTML tag via knockoutjs in a way that will cause any HTML entities in the tag contents to be evaluated and displayed (i.e. not escaped)?
Example:
<div data-bind="attr: { title: titleObservable }"></div>
In the above example, if titleObservable contains an HTML entity, it will not be rendered, rather the entity name will be displayed. See this fiddle for a working example. Notice that when you hover over the div, the title text contains ' instead of the apostrophe symbol.
I know that when setting the contents of an HTML tag with the knockoutjs text binding that HTML is escaped for security reasons (see this thread). I am assuming that this is what is happening to the entity in my title attribute. I also know that I can just embed the apostrophe directly into the title attribute, but I would like to know if there is a way that I can do this with the HTML entities (due to certain limitations on the project I am working on).
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/