tinymce, view only - tinymce

Evaluating Tinymce. I've looked at the docs/source/api, and have a question that I thought I'd pose to the stackoverflow group.
Has anyone implemented Tinymce, who can tell me it it's possible to setup Tinymce to restrict a user, allowing the user to only "view" a text file, and be able to add additional buttons to the save/cancel row of buttons..
I think it should be, and that I'm missing something subtle..
Thanks
-Tom

Sure, you set the read-only option. Configure your textarea like this in your javascript file:
tinyMCE.init({
...
theme : "advanced",
readonly : 1
});

Related

Disabling italic in tinymce

Using the tinymce wsywig editor, is there any way to disable the fact that using text will be italic automatically ?
Thanks in advance and regards,
Ofer
to clarify what's happened, are you setting some content in the editor to appear when it loads? If so, you can control how content is styled when the editor loads with the setup function. Add something like this to the TinyMCE.init script:
setup: function (noItalic) {
NoItalic.on('init', function () {
this.setContent('<p>This text is not italic</p>');
});
}
It might be that you have a custom style set up that puts italic tags on everything automatically.
Check your tinymce.init script for a content_style value and see if the font-style is set to italic;. If so, remove the font-style option or set to normal.
If neither of these fit your situation, please post some more details – how you've configured TinyMCE with a code sample so we can see the text content in italics.

Prevent TinyMCE from removing section tag

Im using TinyMCE richtext editor on Umbraco website. but when i tried to add any section tag and save, it will remove it automatically.
Eg : <section class='cls'>test content</section>
Anyone knows how to prevent it ?
i've tried => extended_valid_elements: 'section[!class]' also not working for me
Allow the section tag with class attribute by going to config/tinymceconfig.config.
Look for validElements setting and include "section[class]".
You might also need to retouch and re-save your web.config in order for new settings to take effect.

Tinymce initizlising textarea with <> tags

Tinymce editor is not rendering editor properly when the content is something like
<textarea><p><sample data></p></textarea>
i.e. <sample data>.
When I initialize a TinyMCE editor here, I dont see anything as it looks like it assumes <sample data> is an HTML tag.
Please assume I have tinymce.js loaded and I initilize using tinymce.init.
Is there a fix for this? Please let me know if it is a server side fix, or is there a tinymce.init option I could give to fix this problem.
PS: It does look like this is an HTML Entity encoding related issue but I am hardly an expert in this area.
Have a look at the tinymce config parameter entity_encoding.
If this does not work you may use this workaround
// save content
var saved_content = document.getElementById('id_of_my_textarea').innerHTML;
// init the editor
tinyMCE.execCommand('mceAddControl', false, 'id_of_my_textarea');
// after tinymce is fully initialized do
// you should use the tinymce configuration parameter "setup" rather than this code here
tinymce.get('id_of_my_textarea').setContent(saved_content);

How do I implement <pre> with tinymce

Glad to see a lot of posts about tinymce but there's nothing here that helps me with my current problem.
What I am trying to do is work out how to add "code" to my text with tinymce.
Something like this
Does anyone know how I can do this.
Help would be appreciated.
Mandy
You will need to add pre to the tinymce init setting valid_elements
You need to add to the editor the Code Sample plugin to your editor.
This is the example code to include the plugin from the TinyMCE website.
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "codesample",
toolbar: "codesample"
});
The codesample plugin uses http://prismjs.com/ to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.
You need to add prism.js and prism.css to your page for syntax highlighting to work.
Then you will get the code sample button in your editor interface.
Here you can find the Documentation about.

TinyMCE is making my code valid, and I want it to stop! (<img> tag wrapped in <p>)

I have TinyMCE installed on the back end of a site. Some of the html it's accessing isn't totally valid, which I realize is the problem in itself. However, TinyMCE is messing things up by making things valid. I have an <img> with no parents (no <p>, no <div>, etc), and TinyMCE is wrapping the <img> in <p></p>. I'm trying to find a setting that will stop that from happening.
Essentially, I want TinyMCE to allow <img> to be it's own element, rather than a child element, if that makes sense. My current settings are:
tinyMCE.init({
theme : "advanced",
mode : "textareas",
relative_urls : false
});
I had the same problem before I found this: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/forced_root_block
A bit late, but maybe it will help someone in the future
I'm not an expert in tinyMCE but I'm pretty sure those automatic 'clever' source formatting or modification can be configured. Not sure if you have looked into that.
Example of usage of the force_p_newlines option:
tinyMCE.init({
...
force_p_newlines : true
});
Take a look at the reference here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration
I did a little more searching, and found an answer. First, I actually fixed the inherent problem by wrapping the <img> in a <div style="display:inline;">. However, the configuration solution can be found here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_child_elements
I attempted to just force the <body> tag to allow parentless images:
valid_child_elements: "body[img]"
but that denied all other tags from working. So I added some variables, like that link shows, and then I realized the proper solution. But, should anyone need to hack together a solution for an element, that page should solve the problem.