I have used Tinymce editor in my rails app. When I try to make a text bold and save, the text changes are not reflected.
Gemfile
gem 'tinymce-rails'
congig/tinymce.yml
selector: textarea.table-editor
theme: modern
selector: textarea
toolbar: styleselect | bold italic | undo redo | table | alignleft
aligncenter alignright alignjustify | bullist numlist outdent indent | ink image | print preview media fullpage | forecolor backcolor | emoticons
plugins:
- table
- advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker
- searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking
- save table contextmenu directionality emoticons template paste textcolor
application.js
//= require tinymce
something.html.erb
<%= tinymce_assets %>
<%= tinymce %>
<%= form.text_area :description, :class => "tinymce", id: :course_description %>
show.html.erb
<%= #course.description.html_safe %>
Normally all these wysiwyg editors format your input in to html, markdown etc under the hood and saves to the data base.
If we consider html, when you make a text bold, for an example it maybe adding a <b></b> tag around your text.
I can see you have the code plugin in the list. As per the documentation of the plugin, it should allow you to view the html of your editing changes.
As a test,
Make a text bold in the editor
Switch to Source view and see if your text is surrounded by bold tags.
If yes, make sure you backend saves the same string in to the database. Make sure you dont have any code that strips out the html tags
If no, then the editor is not converting your changes, you may have to check the editor configs.
Related
Is it possible to somehow tell pandoc to carry the names of styles from original HTML to .docx?
I understand that in order to tune the actual styles, I should be using reference.docx file generated by pandoc. However, reference.docx is limited to what styles it has to: headings, body text, block text, etc.
I'd like to:
specify "myStyle" style in the input HTML (via a "class" attribute, via any other HTML attribute or even via a filter code written in Lua),
<html>
<body>
<p>Hello</p>
<p class="myStyle">World!</p>
</body>
</html>
add a custom "myStyle" to reference.docx using Word,
run a html->docx conversion an expect pandoc generate a paragraph element with "myStyle" (instead of BodyText, which I believe it sets by default), so the end result looks like this (contents of word/document.xml inside the resulting output.docx was cut for brevity):
<w:p>
<w:pPr>
<w:pStyle w:val="BodyText" />
</w:pPr>
<w:r>
<w:txml:space="preserve">Hello</w:t>
</w:r>
</w:p>
<w:p>
<w:pPr>
<w:pStyle w:val="myStyle" />
</w:pPr>
<w:r>
<w:txml:space="preserve">World!</w:t>
</w:r>
</w:p>
There's some evidence styleId can be passed around, but I don't really understand it and am unable to find any documentation about it.
Doc on filtering in Lua states you can access attrs when manipulating a pandoc.div, but it says nothing about whether any of the attrs will be interpreted by pandoc in any meaningful way.
Finally, found what I needed – Custom styles. It's limited, but better than what I arrived earlier, and of course much better than nothing at all :)
I'll leave a step-by-step guide here in case anyone stumbles upon a similar question.
First, generate a reference.docx file like this:
pandoc --print-default-data-file reference.docx > styles.docx
Then open the file in MS Word (I was using a macOS version) you'll see this:
Click the "New style..." button on the right, and create a style to your liking. In my case I made change the style of text to be bold, in blue color:
Since I am converting from HTML to DOCX, here's my input.html:
<html>
<body>
<div>Page 1</div>
<div custom-style="eugene-is-testing">Page 2</div>
<div>Page 3</div>
</body>
</html>
Run:
pandoc --standalone --reference-doc styles.docx --output output.docx input.html
Finally, enjoy the result:
I am running into a very unique edge case with my TinyMCE user experience.
I want to be able to
COPY IMAGE (Right click, copy image on any image on the internet)
PASTE IMAGE (CTRL + V) into TinyMCE editor
and have it save a local copy of this image and serve that.
The problem is a user can paste an image being served in S3 bucket and it is only authenticated for a certain amount of time, then days later the image will not show.
I have looked at TinyMCE - File Image Upload documentation to no avail.
Also looked into TinyMCE Paste Plugin, TinyMCE Local Upload Demo, TinyMCE Docs - Upload Images and dated gem TinyMCE-Rails-ImageUpload
Ultimately, I have a feeling that a custom handler for Paste Preprocess will need to be used
My tinymce.yml configuration follows:
menubar: false
statusbar: false
branding: false
toolbar:
- styleselect | bold italic underline strikethrough | indent outdent | blockquote | image | link | codesample | bullist numlist | table | code | undo redo
plugins:
- link
- codesample
- image
- lists
- code
- table
images_upload_url: "/tinymce_assets"
automatic_uploads: true
relative_urls: false
remove_script_host: false
convert_urls: true
table_responsive_width: true
I feel like this type of problem should be common and there should be a simple solution that I am not seeing. However, if not at all possible, would the solution be to create a custom js function that intercepts paste call, check if it is coming from external url, then decide to create a local image copy and give that url?
Thank you, and any help would be appreciated.
I'm having an issue getting the '-' (dash) to be directly in front of the link that uses "#natelie_h" as the anchor text. It breaks it on to the next link for some reason.
<div class="span3">
<blockquote><p>"My favourite part of the service is the information pack that comes with the flies"</p><p><small><%= link_to "#natelie_h", "https://twitter.com/natelie_h", :target => "_blank" %> </small></p></blockquote>
</div>
Here you can see what I mean: http://www.clockworkflies.com/ (customer quotes, near the bottom).
That is because and in have a display:block, and "-" is added before but "-" is inline, so is shown on new line
Try
blockquote small a:before {
content: "— ";
}
in css, instead of "blockquote small:before"
Another option is to set not display:block but display:inline-block for blockquote small and blockquote small a. But IE6 and IE7 does not support this css variable
When I paste a URL into a TinyMCE editor it converts the text into a link.
So http://vimeo.com/18150336 would be come http://vimeo.com/18150336. I would like to keep the plain text. Is their a way to configure TinyMCE to keep the link as plain text.
I do not want to strip out tags as adding a hyperlinks should be an option on the toolbar. It should just not happen by default.
You can use the paste plugin and the setting paste_preprocessing in order to keep the plain text. You might need to check inside the function specified using paste_preprocessing if you got a link or not.
It's been 5 years, So I'm probably using a newer version of TinyMCE, anyway this solution worked for me, Just add this option:
paste_preprocess: function(plugin, args) {
args.content += ' ';
}
So when you initialize the tinymce, it should be something like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "paste",
paste_preprocess: function(plugin, args) {
args.content += ' ';
}
});
This is the page of documentation for TinyMCE V4
It is the TinyMCE plugin autolink which is responsible for automatically creating links on paste. (And write).
https://www.tiny.cloud/docs/plugins/opensource/autolink/
I'm using TinyMCE on my blog and it seems to be removing the code I'm trying to paste.
I want to add this:
<Files somefile.png>
DefaultType application/x-httpd-php
</Files>
(it's a .htaccess directive)
This gets saved ok (as < and > in the html), but when I reopen my form for editing, it gets transformed as :
DefaultType application/x-httpd-php
Edit : I'm using TinyMCE in a Symfony form, using sfFormExtraPlugin.
Edit 2 : I tried verify_html: false ....
now my code gets transformed as :
<p><files exec="" jpg=""><br /> DefaultType application/x-httpd-php<br /></files></p>
Edit 3: My tinyMCE config is :
tinyMCE.init({
mode: "exact",
elements: "content_contents",
theme: "advanced",
width: "500px",
height: "400px",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true
,
language : "fr",
convert_urls : false,
verify_html : false
});
I responded to this on the TinyMCE MoxieCode forums topic that was also opened by #Manu however I wanted to update this topic with my thoughts as well.
If I understand #Manu correctly, the problem is that the HTML source, while saving with < and > correctly is being interpreted as < and > when reloaded into TinyMCE.
If this is the case, then I believe the problem is that the Symphony plugin isn't encoding the HTML content prior to populating the TextArea that TinyMCE replaces. In other words, it leaves < when it should be loading &lt; so tinyMCE receives <
What are you doing to the input when putting it back in to TinyMCE? If you're converting it to HTML or anything TinyMCE will clean it up as it's invalid HTML.
As a work around/experiment you could add File in the custom_elements option in your init.
Update As you are accepting all sorts of code, you will probably have to turn off clean up altogether. Put cleanup: false in the config. If I were you I would implement your own custom formatting (like Stack/overflow does) and generate bold, underline, links etc formatting because it will give you a lot more control over the HTML generation, ie you could just print out everything exactly how it is (with escaping), and then turn the pre-defined symbols to <strong> tags, or what ever. This is be far the easiest way of generating safe, accurate HTML output, and in your case, probably the only way.
You would not want to use TinyMCE is this case...
That is because the invalid HTML gets removed (the tinymce cleanup functionality).
A workaround could be to initialize tinymce using the cleanup paramter:
cleanup: false,
I suggest you have a closer look at the tinymce initialization parameters
custom_elements
valid_elements
and
cleanup
replace your < and >
< becomes: <
> becomes: >
Try including
extended_valid_elements : "Files[]",
In your config. It's used to unlock certain html tags like iframe. In the brackets you usually put the allowed options for the tag (like [src|alt|id]) so I'm not sure what to put there for your example ...
the correct answer to your problem, tested by me and 100% working is to wrap your variable into htmlspecialchars in php like this example:
htmlspecialchars($myText)