I'm using Tinymce 5.9.1 with template plugin.
I made a new template like this code with special css code :
templates: [
{title: 'green-box', description: 'box tiny green', content: '<div class="tiny-green-box"> Content </div><div class="p-1"></div></br>'},],
It works when edit content in one line. when i want to put multiple line there is a problem.
Tinymce duplicates template for every new line.
for example if i type line1 and press ENTER it will create new div and result will be something like this :
you can see in html code it repeates many time :
putting content inside an extra <p></p> tag can solve this problem.
final code must be something like this :
templates: [
{
title: 'green-box',
description: 'box tiny green',
content: '<div class="tiny-green-box"><p> Content </p></div><div class="p-1"></div></br>'
}
,],
The result HTML code will be like this :
<div class="tiny-green-box">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
Related
Planning to use view helpers in my JMVC application. Tried to implement select_tag helper function in my ejs file but failed to obtain required results.
Below is the code
In Controller :
this.choice= [{value: 1, text: 'First Choice'},
{value: 2, text: 'Second Choice'} ];
this.element.html(initView({choice:this.choice}));
In Ejs file :
<%= select_tag('elementId', 1, this.choice) %>
Reference
https://code.google.com/p/embeddedjavascript/wiki/ViewHelpers
Do we need to steal any packages ? is there any sample code ?
To get access to the helpers I did three things...
I updated the first line of file jquerypp/view/helpers/helpers.js from:
steal('jquerypp/view/ejs').then(function($){
to
steal('jquerypp/view/ejs').then(function(){
I stole 'jquerypp/view/helpers' in the controller.
Finally, in the ejs instead of
<%= select_tag('elementId', 1, this.choice) %>
I used
<%== select_tag('elementId', 1, this.choice) %>
to force ejs to render the select block as part of the page instead of rendering an escaped quoted version.
I guess, you have to include this file: https://code.google.com/p/embeddedjavascript/source/browse/trunk/src/view.js
There are all helpers. So steal it :)
I am using Tiny 4.3.3 for MODx
I need to add a
<p class="classname">
<em class="openImg"></em>
Some randome Input text by the user
<em class="closeImg"></em>
</p>
I don't mind if is an extra menu Item or is in the Paragraph dropdown menu. I just want the less time consuming work around possible.
I have tried this http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html but somehow this doesn't work.
Could anyone point me to a good tutorial or tell me how could i add a icon or name to the drop down menu that creates the p and em tags with the right classes automatically please?
Thanks
It has been a while since the question was asked, but as i am currently making exactly the same, i thought i share my discoveries and solutions regarding this matter. :)
I am extending TinyMCE for a test-project at work and our solution needs custom tags - in some of them the user should be able to enter only one line, in others (as your em) a lot of text.
Steps to be done, in order to achieve the desired solution:
tell the TinyMCE editor, that your elements are good using the two configuration keywords extended_valid_elements and custom_elements:
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
create the two images for the opening and the closing tag. I named mine for the example emstart.png and emend.png.
create a custom CSS style for your custom elements and put them in the custom CSS file (the one that is specified in the TinyMCE configuration, in my case editor.css):
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
write a custom plugin that inputs the new tags and put it in the plugins directory. I called mine customem:
plugin code:
tinymce.PluginManager.add('customem', function(editor, url) {
// Add a button that opens a window
editor.addButton('customEmElementButton', {
text: 'Custom EM',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Please input text',
body: [
{type: 'textbox', name: 'description', label: 'Text'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('customEmElementMenuItem', {
text: 'Custom EM Element',
context: 'tools',
onclick: function() {
editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
}
});
});
The last step is to load your custom plugin to the editor (using the plugin and toolbar configuration option) and enjoy the result:
tinymce.init({
selector: "textarea#editor",
height: "500px",
plugins: [
"code, preview, contextmenu, image, link, searchreplace, customem"
],
toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
contextmenu: "bold italic",
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css",
});
The editor now looks like this:
and the source like in your example:
First of all you will need to modify the tinymce setting valid_elements and valid_children to your needs (add em to the valid_elements and em as child to the tags desired (probably p) to valid_children).
Second you will need an own plugin with an own drop down or button to insert this code.
You can add one or more tag structures simply using the template plugin.
See documentation
https://www.tiny.cloud/docs/plugins/opensource/template/
See interactive example:
https://codepen.io/gpsblues/pen/WNdLgvb
tinymce.init({
selector: 'textarea#template',
height: 300,
plugins: 'template code',
menubar: 'insert',
toolbar: 'template code',
extended_valid_elements: "emstart[*],emend[*]",
templates : [
{
title: 'emstart/emend',
description: 'Add a personal tag structure with personal tags <emstart></emstart> <emend></emend>.',
content: '<p class="classname"><emstart class="openImg"></emstart>Input text<emend class="closeImg"></emend></p>'
}
],
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px}'
});
I am stuck here and would very much appreciate help. I have a form in a razor view with a input field for current city which looks like this:
#Html.LabelFor(x => x.UserModel.CurrentCity)
#Html.TextBoxFor(x => x.UserModel.CurrentCity, new { #data_bind = "value: UserModel.CurrentCity ", #class = "city", #data_val = "true", #data_val_required="City is required" })
#Html.ValidationMessageFor(x => x.UserModel.CurrentCity)
I want autocomplete for this field and am using jquery token input plugin for this like:
$(".city").tokenInput('#Url.Action("AutocompleteCity", "Settings")',{ minChars: 2, tokenLimit: 1, hintText: "Type in a city" });
$(".city").tokenInput("add", {name: viewModel.UserModel.CurrentCity()});
Everything works fine except the clientside unobtrusive validation. The form gets posted even if CurrentCity is empty.
I also tried to change the MVC helpers to plain html:
<input data-val="true" data-val-required="City is required" type="text" class="city" data-bind = "value: UserModel.CurrentCity, attr: { name: 'UserModel.CurrentCity', id: 'UserModel.CurrentCity'}" />
<span class="field-validation-valid" data-valmsg-for="UserModel.CurrentCity" data-valmsg-replace="true"></span>
This approach prevents the form from being submitted but the validation-error class is not injected into the span and the error message does not show up.
Any suggestions?
The original input element you created is hidden. You will likely need to enable validation of hidden elements: jquery.validate v. 1.9 ignores some hidden inputs or https://stackoverflow.com/a/13295938/173225.
I have a problem with TinyMCE:
I need to get this code:
<blockquote>
<h2>REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE</h2>
<hr/>
<p>Erik Heinsholt</p>
</blockquote>
TinyMCE settings:
valid_elements: "a[href|target|title],ul,ol,li,br,strong/b,em/i,span[style<text-decoration: underline;|class],u,p,blockquote,hr,h2",
force_br_newlines: false,
force_p_newlines: true,
theme_advanced_buttons1: "undo,redo,|,bold,italic,underline,|,hr,code,preview, styleselect",
schema: "html5",
style_formats : [
{title : "First Word", inline : "span", classes : "first_word"},
{title : "Blockquote", block : "blockquote"},
{title : "Quote Header", inline : "h2"}
]
What I have: I write in admin textarea "REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE <hr /> Erik Heisholt", then select "REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE", set a style "Quote Header" for it, then select all and set a style "Blockquote" for it. As a result I get this:
<blockquote><h2>REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE</h2></blockquote>
<blockquote><hr /></blockquote>
<blockquote><p>Erik Heinsholt</p></blockquote>
What should I do to put all elements in one blockquote tag, not each element??
p.s.: the video describing this problem: http://www.sendspace.com/file/nkz97d
Have a look at the tinymce configuration parameters valid_elements and valid_children.
You can define that h2- and hr-tags may be childs to other htmlnodes.
I have a strange behaviour with the code below:
function update(txt, _)
{
#text = <>{txt}</>
#data = <>{txt}</>
}
command = <a onclick={update("test1", _)}> change text1 </a> <+>
<a onclick={update("test2", _)}> change text2 </a>
content = <textarea style="width:30%;" rows=1 id=#text > filename </textarea>
<textarea style="width:100%;" rows=30 id=#data > This is a text area </textarea>
Server.start(
Server.http,
[
{page: function() {command <+> content}, title: "test" }
]
)
When I clik on the links "change text1" or "change text2", the text is updated in the two textareas, but as soon as I edit the value of one of these textareas, the update failed when I clik on the links.
Why ?
i think this is because once you have edited a textarea, the browser considers the "value" attribute of the textarea, and not the HTML content inside the textarea.
So in order to work, you should :
function update(txt, _)
{
Dom.set_value(#text, txt)
Dom.set_value(#data, txt)
}