I'm trying add a markdown editor to my nodejs express code and display the content of it in another page. I'm pretty new to this and can't figure out what I'm missing. I'm using EJS as my view engine. I have already added the simpleMDN WYSIWYG editor as below,
<label for="text">Description: </label>
<textarea id="file-input" type="text" name="description"></textarea>
<script>
var simplemde = new SimpleMDE({ element: document.getElementById("file-input") });
</script>
But when I try to display it in another page I can't get it done as I want. Below code is what i tried.
<script id="file-input">
simplemde.value()
</script>
<%= releasenote.description %>
By using this code this is the result i got. result is not displayed by the script tag. 'releasenote.description' shows this output.
# hello world ## hello world ### hello world * hello world hello world
I want it to display without # and *. and they should be displayed as headers, bold, list, etc.
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!
Let's say I have a paragraph with some text that I get from some database:
<p>
{{ text }}
</p>
However, this text may contain some references to other pages in my aplication:
Sample text [reference] sample text
So I would like these references to get turned into links to said pages:
<p>
Sample text reference sample text
</p>
I tried using the replace function in the script like this:
text.replace(/\[(.+)\]/,"<a href='/path/to/$1'>$1</a>");
But the characters all get escaped resulting in the anchor html code getting shown on the page.
Is there a way to stop the characters from being escaped, or even another way to turn [references] in the middle of the text into working links to another page?
If you don't want your HTML to be escaped, use the v-html directive.
From the docs:
The double mustaches interprets the data as plain text, not HTML. In
order to output real HTML, you will need to use the v-html directive:
Example:
var app = new Vue({
el: "#app",
data: function() {
return {
text: "See defect <a href='#'>#12345</a> for details"
};
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<p>{{text}}</p>
<p v-html="text"></p>
</div>
I am new to using the trix editor in AngularJS. I have the editor in place and it is working correctly. But I am not sure how to then display the content correctly. I save the output of the trix editor but when I display it, its a string of html.
HTML:
<trix-editor class="trix-content" ng-model="trix" angular-trix placeholder="Write something.."></trix-editor>
but when I try to display it somewhere else with this:
HTML:
<div class="trix-content">{{trix}}</div>
it just puts the raw string with html tags in it and is not showing just the text formatted.
ex)
<div> hello </div>
when I wanted
hello
Angular has a directve for binding to rich text. Ex) <div ng-bind-html='trix'></div>
I am reading file from s3 in rails. I display the contents of a file in a div. I would like to display exactly what is in the file. The issue I am running into is if the file has html in it, I want it to display the code. For example:
<div>test</div>
should not be displayed as
# what I get when I try .html_safe
test
or
# what I am getting now
<div>text</div>
My current code in my view is (slim.html):
.col-md-8#pr_parsed_text_wrapper
pre.pre-scrollable.prettyprint.linenums
-#file_preview.each_with_index do |l, index|
span.text_line class="line#{index}" #{l + "\n"}
Other things I have tried:
The h method.
The raw method.
The html_safe method.
Using = and == instead of #{}.
If I have a textarea with the following content inside of it on page load:
<h1>Hello</h1>
<p><h1>Hello world</h1></p>
I apply CKEditor to the textarea, CKEditor renders the content as if both lines were h1 elements, even though one is entities wrapped in a paragraph.
For clarity what I expect to see is:
Hello
<h1>Hello world</h1>
What I am actually getting is:
Hello
Hello World
Strangely enough, if I type <h1>Hello world</h1> into the editor it will produce the entity encoded string in source and display it as expected (printed to display as typed).
That's because even in textarea you have to encode your HTML. So in fact you should set the content of it to:
<h1>Hello</h1>
<p><h1>Hello world</h1></p>
As you can see - Hello world header is encoded twice.