I am using TinyMce web component editor, i have put my API key as well. But still getting branding "POWERED BY TINY".
Code as below:-
<tinymce-editor branding="false" id="editor" height="150" resize="false" menubar="false">
This will be the initial content of the editor
</tinymce-editor>
branding ="false" also not working.
Just so you're aware removing the branding is a paid feature of TinyMCE.
The branding setting of TinyMCE is not one of the built-in attributes that the webcomponent supports but as with any attribute you can still set it via the escape hatch of declaring a object globally in Javascript and then referencing the name.
<script>window.myConfig = { branding: false };</script>
<tinymce-editor id="editor" height="150" resize="false" menubar="false" config="myConfig">
This will be the initial content of the editor
</tinymce-editor>
https://www.tiny.cloud/docs/integrations/webcomponent/#settingadditionalconfigurationoptions
Via init() function:
tinymce.init({
...
statusbar: 'false',
...
});
Related
We switched from CKEditor to the new TinyMCE editor in Connections 6 CR5. This was a huge improvement. But out of the box, TinyMCE misses some of the features from CKEditor. For example setting borders on images in a way that could be handled by end users (so no manual HTML/CSS changes).
How can we add such a feature to TinyMCE, that the users get some image property dialog that allows setting image borders?
The image plugin has a configuration property image_advtab, which is set to false by default. I tried to enable it and now we see the advanced tab in the image propertys, which allows setting a border (and also advanced attributes) easily:
To enable it, we need to re-add the plugin, since this allows to override it's variables. Add the following to the externalPlugins array in config.js (which is located in ${CUSTOMIZATION_DIR}/javascript/tiny/editors/connections/config.js):
{
name: "image",
url: pluginBaseDir + "image/plugin.min.js",
settings: {
image_advtab: true
}
}
pluginBaseDir is defined above the editor config:
var pluginBaseDir = "/connections/resources/web/tiny.editors.connections/tinymce/plugins/";
I have a custom edit (browser page) for my dexterity content type. In template I have defined a form using Bootstrap and added some Angular JS code for form behavior. It is working. :)
I need to replace a simple textarea with rich text widget. So how can I render in my template the rich text widget (one that is normally used in dexterity)?
If you are using Mockup (not sure if anybody use it on Plone 4) you can find tips there: Obtaining the "default" mockup TinyMCE configuration on Plone 5
Otherwise (the Plone 4.3 version of TinyMCE) it's only a matter of CSS classes and configurations.
<textarea name="..."
class="pat-tinymce mce_editable"
data-mce-config JSONCONFIGURATION_HERE">
</textarea>
I've an add-ons that enable TinyMCE on simple forms; look at the cose to find how to obtain the JSON configuration: See rt.zptformfield.
I've also a blogpost about the approach I used there but it's in italian :-) - http://blog.redturtle.it/usare-widget-plone-in-semplici-template-html
It should suffice to apply the class mceEditor on the textarea.
If that shouldn't work, include the initialization in your template:
tinyMCE.init({
elements : "id-of-textarea",
});
I want to create a web-based WYSIWYG HTML editor that allows the user to insert pre-defined HTML elements with certain class or id attributes.
For example, any HTML editor allows the user to select some text and click the 'bold' button, and this will wrap the selected text in <b></b> tags.
I would like the user to be able to select some text, click a button called 'somebutton' and wrap the selected text in <div class="someclass"></div>, or click a different button and wrap the text in <h1 id="someid"></h1>, or any other HTML element with a specific attribute as defined by me.
I know that there are a lot of javascript based HTML editors out there, but I am specifically looking for any that are easy to extend in the way described above. I have looked at TinyMCE and Aloha, and in both cases found the documentation very difficult to use or non-existent.
I am looking for:
Recommendations of any editors that are easy to extend in this way
Tutorials or instructions for how to add custom elements as described above
Thank you!
CKEditor provides a flexible styles system, with rules defined as follows (in styles.js or directly in the config):
{
name: 'My style',
element: 'h2',
attributes: {
'class': 'customClass',
id: 'someId'
},
styles: {
'font-style': 'italic'
}
},
Producing:
<h2 class="customClass" id="someId" style="font-style:italic;">Custom element</h2>
Once defined, styles are available directly from the Styles Combo Box, possible to apply either to the current selection or to new elements.
Styles can be created dynamically, applied to ranges and elements with the API. The Stylesheet Parser plugin can extract styles directly from CSS files.
Note: Defining custom styles may need a proper configuration of Advanced Content Filter (since CKEditor 4.1).
how can I init tinyMCE before the element it is to apply to is not yet visible?
So yeah, this doesn't work in my case.
tinyMCE.init({
Assuming you are dynamically adding the textarea triggered from some action, then you can use the TinyMCE command "mceAddControl" to add TinyMCE to the page.
For example, if the textarea ID is "myText" then you add the editor control with
tinyMCE.execCommand('mceAddControl', true,"myText");
Of course, you need to setup the editor settings prior to adding the control. This is done by setting the setting attribute of the control. For example
tinyMCE.settings = {
theme: 'advanced',
....
};
I'm using N2CMS which in turn uses TinyMCE to edit HTML content.
what i need to do is disable the TinyMCE HTML validation completely.
Its stripping out anything out that doesn't adhere to its settings.
If I add a custom attribute <a href="{0}" test="tester1" /> it just removes it the custom attribute!
also, it always add <p> tags around every bit of HTML content.
how can i disable the validation?
any help is very much appreciated.
to resove this, add these into the tinyMCE settings, or init
cleanup_on_startup: false,
trim_span_elements: false,
verify_html: false,
cleanup: false,
convert_urls: false
There are a relatively large number of TinyMCE options related to cleaning up and validating HTML.
The valid_elements or extended_valid_elements option can definitely help you with custom attributes:
extended_valid_elements: "a[href|test]",
That option would specifically allow href and test attributes on anchor tags per your example.
As far as your second question is concerned, could you please clarify? Are you asking how to avoid escaping HTML code that is pasted into the WYSIWYG editor or are you asking how to avoid wrapping text in paragraph or div tags?
another solution,
settings:
verify_html:false,
fix_table_elements:false,
schema:'html4',
invalid_elements:'',
valid_elements:'[]',
valid_children: '[]',
and I'm saving the html content to the hidden field by calling
tinymce.activeEditor.getContent({format: 'raw'})
this helps to prevent any html fixes
This is how I remove all sanitisation:
valid_elements: '*[*]',
plugins: "fullpage"
The valid_elements directive allows all elements and all of their attributes.
The fullpage plugin preserves the <html>,<head> tags etc.
To stop TinyMCE wrapping everything in <p> tags;
force_br_newlines: false,
force_p_newlines: false,
forced_root_block: '',
Those tags are usually paragraphs or divs. They are essential for every rte. Tinymce puts them around every bit of html because it needs to in order to for example be able to style passages of text.