Background - in an article editor powered by TinyMCE for an enterprise in-house CMS behind large media site/s
HTML
<p>non-breaking-space: pound: £ copyright: ©</p>
JS
console.log($('p').html());
console.log(document.getElementsByTagName('p').item(0).innerHTML);
both return
non-breaking-space: pound: £ copyright: ©
when I'm expecting
non-breaking-space: pound: £ copyright: ©
some elements get their entities reversed (like pound and copyright), and some are preserved (non-breaking space). I need a way to get the original inner HTML, all preserved, not one that is processed by the browser; is that possible?
This is for a TinyMCE plugin which processes input using jQuery and puts it back. The content is loaded via a database, the plugin is processing image tags did not want to modify the text content at all. The automatic change of some entities back to the raw characters wouldn't be too much of a problem, but -
We cannot modify editorial's input, even if it were minor
We enforce that these must be entities before they save due to some browser compatibility issues on our sites
I would use this answer - https://stackoverflow.com/a/4404544/830171 - however cannot as my HTML code is within a textarea that the user needs to edit and that I need to run jQuery DOM manipulation on (via the plugin).
One way I can think of is not use jQuery/DOM to process the image tags I need to change, but to use regex like a lot of TinyMCE plugins do; but since I was shot down in regex to pull all attributes out of all meta tags for attempting any regex on HTML, was hoping for a better way!
Tinymce uses a contenteditable iframe to edit the content. That's the reason why
console.log($('p').html()); will log something else.
Use the following code to get the pure editor content:
tinymce.get('your_editor_id').getBody().innerHTML
Related
I'm running on Wagtail 1.3.1, Django 1.7.11.
I have activated hallohtml and hallojustify plugins and they appear in toolbar (without icons but buttons are here).
The buttons can be used and the modifications are seen in the textarea (I mean that I can center a field for example and I see it).
When I publish the page, the modifications made by either hallojustify or hallohtml are not saved whereas I can still use the bold/italic buttons and save the content. It looks like the html is cleaned up...
I should miss something but...
#hooks.register('insert_editor_js')
def editor_js():
js_files = [
]
js_includes = format_html_join('\n', '',
((settings.STATIC_URL, filename) for filename in js_files)
)
return js_includes + format_html(
"""
<script>
registerHalloPlugin('hallojustify');
registerHalloPlugin('hallohtml');
</script>
"""
)
By design, Wagtail only allows a subset of HTML tags and attributes, and strips out any that are not on its whitelist. This is done for several reasons: it prevents editors from inserting malicious content (such as <script> tags), and encourages site developers to keep content and presentation separate. (You shouldn't really be including formatting information such as left/right/centre alignment inside rich text content - that should be defined inside your template and CSS.)
You can customise the HTML whitelisting rules using the construct_whitelister_element_rules hook - however, I'd encourage you to reconsider whether you really need to overload the rich text editor with so much functionality, or whether there's a more structured way of achieving what you want (such as StreamField).
Since 4.3.0 TinyMCE includes Codesample plugin that lets you enter code snippets.
This works very well for languages like Java, PHP, C# etc. that are not directly running in the browser. You save your code snippet to the server, load it back into the browser, edit it, and save it back to the server again - no hassle.
If you want to do it with HTML, JavaScript, or XML, then it seems not to be possible to load the code snippet back into the browser after saving it to the server.
Most of the tags will be removed, despite being already encoded before.
See TinyMCE Fiddle 1 and TinyMCE Fiddle 2 that try to illustrate the problem.
Any ideas? Many thanks in advance!
If you want to reload content into TinyMCE that was previously stored in your database I would use TinyMCE's JavaScript APIs to load the data after the editor is initialized. I have created a fiddle to show how you would do this.
http://fiddle.tinymce.com/50faab/3
In this example the content that would have come out of TinyMCE from a prior edit is in the theContent variable:
var theContent = '<pre class="language-markup"><code><ul><li>one</li><li>two</li></ul></code></pre>';
(In a real application you would of course grab this from the database and inject it into the web page instead of hard coding the value)
I then use the TinyMCE API for setContent to add the content to TinyMCE once its loaded:
setup: function (editor) {
editor.on('init', function () {
var theContent = '<pre class="language-markup"><code><ul><li>one</li><li>two</li></ul></code></pre>';
this.setContent(theContent);
});
}
When you do it this way the editor will properly syntax highlight the code sample content (as seen in the Fiddle).
<textarea> tags and HTML are a difficult combination if you have anything beyond the simplest of HTML so I would avoid dropping HTML directly into the <textarea>.
Expanding on Michael's answer, putting your content into a hidden DIV, then grabbing it's html works better for me:
<div class="theDiv">
<pre class="language-markup">
<code><ul><li>one</li><li>two</li></ul></code>
</pre>
</div>
var theContent = $('.theDiv').html();
The answer of Felix Riesterer in the forum of TinyMCE might be of help as well:
Yes, in the way I pointed out: < > and " need to be properly encoded as < > and " because these characters have a special meaning in HTML context. So if you want to comply with the specs (and TinyMCE expects you to do so!) you need to convert these characters accordingly. There is no way around that.
And yes, I forgot to mention that & (ampersand) needs to be encoded as & as well.
You might have to double-encode stuff: If you want to see "" you need to code <h1> so the HTML code renders as plain text. The logic behind it is like this:
1. content gets decoded into raw text (< gets translated to <, & becomes &)
2.raw text gets treated as original HTML code for the editor contents (<h1> renders as <h1>, <h1> renders as a first-level heading)
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
I need to create a simple rich-text editor that saves its contents to an XML file using arbitrary markup to indicate special text styles (e.g: [b]...[/b] for bold and [i]...[/i] for italic). All the backend PHP stuff seems fairly straightforward, but the front-end WYSIWYG portion of the feature seems a bit more convoluted. I've been reticent to use one of the currently-available JavaScript-based WYSIWYG editors because the rich-text options I want to allow are so limited, and these applications are so fully-featured that it almost seems like more work to stip them down to the functions I need.
So, in setting out to create a bare-bones rich-text editor, I've encountered three approaches:
The first two approaches use the contentEditable or designMode properties to create an editable element, and the execCommand() method to apply new text styles to a selected range.
The first option uses a standard div element, executes all styling commands on that elements contents.
The second option uses the editible body of a window enclosed in an iframe, then passes any styling commands initiated from buttons in the parent document into its contentWindow to alter selected ranges in the contained body. This seems like several extra steps to accomplish the same effect as option one, but I suppose the isolation of the editable content in its own document has its advantages.
The third option uses a textarea overlaying a div, and uses the oninput JS event to update the background div's innerHTML to match the input textarea's value whenever it changes. Obviously, this requires some string finagling to to convert elements like newline characters in the textarea to <br/> in the div, but this would allow me to preserve the integrity of my [/] markup, while relegating the potentially-messy DOM manipulation to front-end display only.
I can see benefits and drawbacks for each method. the contentEditable solutions seem initially the simplest, but support for this features tends to vary across browsers, and each browser that DOES support it seems to manipulate the DOM differently when implementing execCommand(). As mentioned before, the textarea/div solution seems like the best way to preserve my arbitrary styling conventions, but the custom string-manipulation procedure to display rich text in the output div could get pretty hairy.
So, I submit to you my question: Given the development goals I've outlined, which method would you choose, and why? And of course, if there's another method I'm overlooking that might better serve my purpose, please enlighten me!
Thanks in advance!
Have you looked at http://php.net/manual/en/book.bbcode.php? This is your answer. If you are having doubts, then you are doing something wrong. :-)
Then use JS to track keyup event and simple AJAX to print preview of the input. Just like in stackoverflow.
NB It would be far more efficient to generate the preview using plain-js BBcode approach. However, do not overcomplicate stuff unless you necessary need it.
The problem with BBCode, Markdown, ... is that it's not that trivial for genpop. I suggest looking at widgEditor, it is by far the simplest WYSIWYG editor I've seen to date. It was developed some time ago, so I am not sure about compatibility, but it sure is an inspiration.
I would have included this only as a comment, since it does not directly answer your question, but I am fairly new to SA and could not find out how to do that. Sorry.
There is different content on site, which is allowed to be created/edited - news, articles, etc.
How to make correct and safe data transfer from editor to database?
I'd like to use wysiwyg editor, because potential users of this editor will be not such experienced users (Markdown and BB-code will be difficult for them, they want like in MS Word =) )
Also I'd like to add restrictions to this editor, for example: no images, only 5 colors, only 3 types of fonts, etc. (This can be done with limited controls of this editor)
My question: How to make this editor safer? How to prevent adding extra-html from user, or <script> tags. Do I have to make a html-filter of data came from database (saved content, that users wrote in editor) while rendering template page of this content (news or article)?
Should I store content in HTML-way in database? (If I want wysiwig-editor and it outputs HTML after saving). Or may be I should convert HTML from editor to bb-code or markdown (will all my limitations and restrictions) and clearing all extra-HTML... And then when getting content from database - I should convert bb-code/markdown to HTML again.
Or maybe there are easier and faster ways to making this safe?
If you are populating the text into the innerHTML of lets say a div, it allows a user to write html and display it as HTML later. However, if you don't want to let people inject HTML you can use the innerText instead. innerText works just like innerHTML but does not hit the HTML parser.
If you plan on using bb code or markdown you would parse the text for the code that needs to be converted and leave the rest as text.
You could also use regex parser to convert special characters to the HTML code equivalent then the bb code or markdown to html
Try this:
When saving to the database:
Replace known well formatted html with bb code replacing <b> with [b]. However ill formatted html will remain as typed <b > will stay <b >. Then do a regex replace on all HTML special characters ( ie < and > )
Then when retrieving from the database, you replace the bb code with html and you are all set.