I have an application which help our user to format the email template. A sample email template looks like this:
Dear <FirstName> <LastName>:
Thank you for your entry <Title> and your order number is <OrderID>....
These are saved in our database as Text. The issue is when i try to load this text in simple Textarea it works fine when i try to display this text in TinyMCE editor textarea it cuts off when it see the first "<" and display something like this:
Dear :
Thank you for your entry and your order number is ....
TinyMCE dose not render the tags. i dont know how to render the custom tags and they are not <abc> </abc> tags. Our system will replace the "<SomeValue>" with the actual value based on the tag and send the email to the client.
I tried replacing the "<" and ">" to "<" and ">" and its not working. I also tried them replacing it to "<code><" and "></code>" before i bind the textarea but that is not working either. I have added "code" plugin while declaring my TinyMCE in javascript. Do i need anything else, any specially "entity_encoding"? I tried "raw" and "html" nothings works.
here is my javascript
<script>
tinymce.init({
selector: '#mytextarea',
entity_encoding: "html",
plugins: "code",
toolbar: 'code'
});
</script>
Any help is appreciated as i have spend two days searching the web and trying bunch of things.
If you want TinyMCE to treat these elements like HTML tags you need to define them as custom tags:
https://www.tiny.cloud/docs/configure/content-filtering/#custom_elements
An alternative which may take less effort to setup is to use another syntax (e.g. {first_name}) along with marking that text as non-editable so that TinyMCE treats the entire string like one "character" in the UI.
I'm testing out CKEditor
I'm trying to get the display in the editor, to match my sites css style for displaying the end result.
What I'm trying to do is style the "wrap code" button to match the css of my site, by adding in a class.
I've seen on this page of the manual, that you can do stuff like this:
config.format_pre = { element: 'pre', attributes: { 'class': 'editorCode' } };
However, doing the same for a code block like so:
config.format_code = { element: 'code', attributes: { 'class': 'someclass' } };
Doesn't actually do anything. Anyone got a pointer on what I might be missing?
I've tested it working on other elements, so I know the config file changes are being picked up.
The one important thing is that every tag which is formatted via config.format_tagname should be also included in config.format_tags. However, this two settings (config.format_tagname and config.format_tags) works only form Block-Level elements (as stated in the manual page you referenced ).
As code element is considered as an inline one by CKEditor (see DTD), it is not possible to use this config here.
However, the easiest way to modify the elements added via Style dropdown is to edit styles.js file which is present in CKEditor directory. The dropdown styles are based on this file, so you can easily modify code element there. You can also define your custom stylesSet.
In my app I have TinyMce plugin. Now I need to at any time switch with richtext to plaintext. In this example I suspect that it can be done.
The only question is how? I saw a solution with the addition selectbox and js functions. Is there no mechanism built-in TinyMCE?
All you have to do is shutdown tinymce and show the tinymce route element (the div for which you have created the tinymce editor). The textarea is editable and shows the full HTML-Contents of the Editor.
To shut down your tinymce use
tinymce.get('your_editor_id').remove();
To make the underlying textarea visisble:
document.getElementById('your_editor_id').setAttribute('style', visibility:visible; display:block;);
or using jQuery
$('#your_editor_id').css('visibility', 'visible').css('display', 'block');
Update:
This works with Tinymce 4. Use the setup parameter
setup: function(ed)
{
ed.on('click', function(e){
tinymce.execCommand('mceToggleEditor', false, 'your editor_id');
});
}
Here is a working tinymce fiddle: http://fiddle.tinymce.com/Fnfaab
You can use the tinymce API and call the Formatter class like this:
tinymce.activeEditor.formatter.remove(); // no format name==all formats
I'm using tinymce to edit some field in a web application.
I need to have an html result (after editing) with some specification.
For example: when I press enter tinymce create a new paragraph (that's ok, and I know this behaviour can be changed, but paragraph is ok).
What I need is a specific style to the paragraph be applied.
I saw there is the possibility to specify content_css, but this is a visual deformation of what is written in the edited html.
my need is when I press enter a paragraph with specific style (margin, alignmnent, ..) must be written directly in the edited html text.
e.g. <P style="margin-top:2px; margin-bottom:10px"> ...</P>
Is it possibile to define specific style to be applied to each html tags ?
I need this because after editing, the html content is used in another part of application, where I can not add additional style configurations.
Did you try that?
...
'content_css' : './path/to/your/styles.css',
...
styles.css
p {
margin-top:2px;
margin-bottom:10px
}
..I saw there is the possibility to specify content_css, but this is a visual deformation..
True, but don't forget that this visual deformation is extracted when you call tinyMCE.activeEditor.getContent().
Though, i'm not sure it will extract your specific styles applied to <p> (untested)
Check also here
UPDATED
Ok, i have another suggestion using HTML parsing using this.
$html = str_get_html("<div>add here your HTML from tinymce editor <p></p></div> test <p></p>");
foreach($html->find("p") as $p) {
$p->style = "margin:2px 0 10px 0";
}
$html_modified = $html;
The $html_modified should contain the <p> with margin applied.
Yes it is possible in tinymce. Just go to Tools -> Source Code of the editor toolbar. Write your HTML code with style there. You can try yourself.
Is it possible to create a block of code within the CKEditor that will not be touched by the editor itself, and will be maintained in its intended-state until explicitly changed by the user? I've been attempting to input javascript variables (bound in script tags) and a flash movie following, but CKEditor continues to rewrite my pasted code/markup, and in doing so breaking my code.
I'm working with the following setup:
<script type="text/javascript">
var editor = CKEDITOR.replace("content", {
height : "500px",
width : "680px",
resize_maxWidth : "680px",
resize_minWidth : "680px",
toolbar :
[
['Source','-','Save','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','SpecialChar']
]
});
CKFinder.SetupCKEditor( editor, "<?php print url::base(); ?>assets/ckfinder" );
</script>
I suppose the most ideal solution would be to preserve the contents of any tag that contains class="preserve" enabling much more than the limited exclusives.
Update: I'm thinking the solution to this problem is in CKEDITOR.config.protectedSource(), but my regular-expression experience is proving to be too juvenile to handle this issue. How would I go about exempting all tags that contain the 'preserved' class from being touched by CKEditor?
In CKEDITOR folder you have a config.js file. Open it and paste the code:
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = {
script: true,
$1: {
// This will set the default set of elements
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
};
It will allow <script>...</script> tags in Source mode.
Suggestion 1: Create separate plain textarea for the admin to enter the scripts / HTML code.
Suggestion 2: Introduce a bbcode, like [script][/script] or [html][/html] that the admins can use to put the scripts / HTML code and have your server-side translate them into <script></script> and HTML code. Make sure when showing a saved content into the CKEditor, you need to have your server-side translate them into the bbcode first (or CKEditor will strip them out). Or the less-hassle way is to store the submitted content in the database as it is entered and only do the translation when displaying the page.
Suggestion 3: Since you want to use class="preserve" to mark tags you don't want CKEditor to strip out, then add the following JavaScript lines when initializing the editor:
// protect <anytag class="preserve"></anytag>
CKEDITOR.config.protectedSource.push( /<([\S]+)[^>]*class="preserve"[^>]*>.*<\/\1>/g );
// protect <anytag class="preserve" /><
CKEDITOR.config.protectedSource.push( /<[^>]+class="preserve"[^>\/]*\/>/g );
The issue is not with the CKEditor. Instead, the issue was with the MVC-Engine running the Site itself. Kohana has a global_xss_filtering within its configuration that is enabled by default. This prevents the submission of script tags, to prevent scripting-attacks on your site. Changing this value to false will permit the submission of <script> tags in forms, but it also opens up the site to potential security issues that can be very serious. It is advisable that you not disable global_xss_filtering.
/* /(system|application)/config/config.php - line 66 */
/**
* Enable or disable global XSS filtering of GET, POST, and SERVER data. This
* option also accepts a string to specify a specific XSS filtering tool.
*/
$config['global_xss_filtering'] = FALSE;