I want to add a custom menu (like file, edit) to all of my tinyMCE components. Like what is done here. i tried using that code but it doesn't work, and I was thinking if it was possible to do it another way, without creating a plugin, and just adding my custom menu in the tinyMCE.init() function, on setup. I found a way to add a submenu like this
tinyMCE.init({
mode: "textareas",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste "
],
toolbar: " undo redo | styleselect | bullist numlist outdent indent | link image",
setup: function (ed) {
ed.addMenuItem('example', {
text: 'My menu item',
context: 'tools',
onclick: function () {
ed.insertContent('Hello world!!');
}
});
}
});
This adds a menu item in the Tools menu. Instead of that menu item, I need to add a whole menu like in the link above, but I don't know how. I tried adding the code for creating the menu in my setup function like this
tinyMCE.init({
mode: "textareas",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste "
],
toolbar: " undo redo | styleselect | bullist numlist outdent indent | link image",
setup: function (ed) {
var c = ed.createMenuButton('mymenubutton', {
title: 'My menu button',
image: 'img/example.gif',
icons: false
});
c.onRenderMenu.add(function (c, m) {
var sub;
m.add({ title: 'Some item 1', onclick: function () {
tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1');
}
});
m.add({ title: 'Some item 2', onclick: function () {
tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2');
}
});
sub = m.addMenu({ title: 'Some item 3' });
sub.add({ title: 'Some item 3.1', onclick: function () {
tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.1');
}
});
sub.add({ title: 'Some item 3.2', onclick: function () {
tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.2');
}
});
});
}
});
but it doesn't work. What's the easiest way to go about doing this ?
Managed to solve it by adding a new menu in the toolbar like here
Related
I'm not a professional programmer, I've had little experience working with Javascript and so this Tinymce is confusing me. Basically my client wants to update the content himself without touching the code, so I have to set up this Tinymce so he can edit the content directly on browser. I've followed the instruction to install Tinymce but when I click submit, nothing happens. When I click save, it links me to the PHP page with its code. Below are all my codes. Please tell me what I need to do.
In the HTML page:
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea#elm1",
theme: "modern",
width: 800,
height: 600,
plugins: [
"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"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
}
});
</script>
<script type="text/javascript">
$(function(){
var url = "news.php";
$("#SubmitBtn").click(function(){
//"content" will PHP variable
$.post(url, { "page_content" : tinyMCE.activeEditor.getContent() }, function(respond){
if ( respond == ){
alert('Content saved to file');
return;
} else {
//Error message assumed
alert(respond);
}
});
});
});
</script>
The form:
<form method="post" action="news.php">
<textarea id="elm1" name="page_content">The content I wanna edit</textarea>
<input type="button" id="SubmitBtn" value="Submit"/>
</form>
In the PHP page:
<?php
if ( isset($_POST['page_content']) ){
//This is what you want - HTML content from tinyMCE
//just treat this a string
if ( save_html_to_file($_POST['page_content'], 'news.html') ){
//Print 1 and exit script
die(1);
} else {
die('Couldnt write to stream');
}
}
/**
*
* #param string $content HTML content from TinyMCE editor
* #param string $path File you want to write into
* #return boolean TRUE on success
*/
function save_html_to_file($content, $path){
return (bool) file_put_contents($path, $content);
}
try add this code to the submit button
onclick="tinyMCE.triggerSave(true,true);"
Use: e.preventDefault(); to stop the form from submiting
$("#SubmitBtn").click(function(e){
e.preventDefault();
//"content" will PHP variable
$.post(url, { "page_content" : tinyMCE.activeEditor.getContent() }, function(respond){
if ( respond == ){
alert('Content saved to file');
return;
} else {
//Error message assumed
alert(respond);
}
});
});
Try this it may solve your problem just get the content of editor by ed.getContent()
$("#SubmitBtn").click(function(e){
e.preventDefault();
var ed = tinyMCE.get('page_content');
var data = ed.getContent() // get data of editor
$.post(url, { "page_content" : data }, function(respond){
if ( respond == ){
alert('Content saved to file');
return;
} else {
//Error message assumed
alert(respond);
}
});
});
I have been struggling with getting TinyMCE 4 working in a SPA using sammyjs. I am initialising on display of that view and that works fine, however if you navigate back and then enter that view again the editable div is no longer editable and tinyMCE does not display when you click into it. I have read an article (TinyMce disappears in SPA - Knockout binding evaluated twice causing editor to fail) on here saying this happens if you bind the ID, but I am not doing that and also am not specifying an ID (makes no difference either way). I have tried making sure we don't call init again, in case that was messing it up but to no avail!
My sammy route with the initialisation is below
this.get('#:createmode', function () {
var createMode = this.params['createmode'];
if (createMode === ko.i18n('menu.item')) {
model.showPageTitle(false);
// alert('init');
if (!model.tinymceLoaded()) {
console.log('tinymce init');
tinymce.init({
selector: "div.editable",
inline: true,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "bold italic underline | alignleft aligncenter alignright alignjustify | table | hr | charmap fontsizeselect ",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote subscript superscript | undo redo ",
menubar: false,
toolbar_items_size: 'small',
init_instance_callback: model.tinymceinitcallback,
style_formats: [
{ title: 'Bold', inline: 'b' },
{ title: 'Red', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
],
setup: function (editor, f) {
var is_default = true;
editor.on('MouseDown', function (editor, e) {
console.log(editor);
if (editor.target.innerText)
is_default = (editor.target.innerText.trim() == model.originalEditorText.trim());
if (!is_default) {
return;
}
tinyMCE.activeEditor.dom.removeClass(tinyMCE.activeEditor.dom.select('p'), 'darkGray');
tinyMCE.activeEditor.setContent('');
is_default = false;
// replace the default content with nothing
});
editor.on('Change', function (element) {
model.editorText(element.target.bodyElement.innerText);
});
editor.on('Blur', function (element) {
if (element.target.bodyElement.innerText.length < 2) {
tinyMCE.activeEditor.setContent(model.originalEditorText);
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select('p'), 'darkGray');
}
});
}
})
}
else
{
console.log(tinymce.EditorManager);
}
}
});
My HTML is very simply..
<div class="contenteditor editable" contenteditaable="true" ></div>
I would love some help on this as I just can't seem to get it to work and I'm way overdue on this story!! Many thanks!
Sorry to answer my own question... but eventually I gave up on trying to preserve the editor instance and used the tinyMCE 4.x method mentioned in this post How do i remove tinyMCE and then re-add it?
I had to give the div and ID and then after the initial initialisation code, put the add and remove editor commands in the sammy routing logic... simples!
I'm trying to remove a subitem from a TinyMCE dropdown toolbar button in WordPress.
The button is a plugin button (TinyMCE Table Button), and it inserts an item that allows the user to do CSS styling on the tables.
(Taulukon ominaisuudet == Table properties)
The toolbar button is created with
editor.addButton("table", {
type: "menubutton",
title: "Table",
menu: menuItems
});
The menu item is created with
editor.addMenuItem('tableprops', {
text: 'Table properties',
context: 'table',
onPostRender: postRender,
onclick: dialogs.tableProps
});
editor is the TinyMCE plugins constructor param:
define("tinymce/tableplugin/Plugin", [
"tinymce/tableplugin/TableGrid",
...
"tinymce/PluginManager"
], function(TableGrid, Quirks, CellSelection, Dialogs, Tools, TreeWalker, Env, PluginManager) {
var each = Tools.each;
function Plugin(editor) {
var clipboardRows, self = this, dialogs = new Dialogs(editor);
...
The editor has a function for addMenuItem, but I can't find anything similar to removeMenuItem. I also tried to find the menu item inside the editor so I could remove it by hand, but the system is a bit shady as to where the buttons and menus are.
Is there a logical way of removing menu items in TinyMCE or will I have to remove it directly from the DOM after the editor has been generated?
UPDATE: Just realize, you are using a different table plugin. I guess an easy way is to inspect the element/source and get the element ID of that menu item and use CSS to hide it.
<style>
#mceu_38 {display:none !important;}
</style>
Below is my original response, it is meant for editing the default menu bars
You can customize the menu bar in the init function:
tinymce.init({
selector: "textarea",
menu : { // this is the complete default configuration
file : {title : 'File' , items : 'newdocument'},
edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'},
insert : {title : 'Insert', items : 'link media | template hr'},
view : {title : 'View' , items : 'visualaid'},
format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table : {title : 'Table' , items : 'inserttable deletetable | cell row column'},
tools : {title : 'Tools' , items : 'spellchecker code'}
},
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
Just remove the items you don't want in each menu property.
Here's an example with Table Properties removed:
http://fiddle.tinymce.com/43eaab
Here's the documentation: http://www.tinymce.com/wiki.php/Configuration:menu
gl.
For the software I am currently working on I am doing a small little CMS for our internal help documents, but I have been trying to use TinyMCE so that they can easily apply styles that fit our look and feel without needing to understand HTML. I have all of the custom buttons I need working, however I am having trouble with the final custom button.
What we need is a button that will automatically take a word they type as a query string parameter (FindWord?Word=[the input field]) which when clicked on the page later, would pop out a hidden div and anchor to the glossary word. However the getContent() function does not seem to be working for me, and after over 12+ hours of searching, and trying numerous examples, I can't seem to get it to work.
Other details i am not sure are important:
-Using MVC 4 with Razor views, TinyMCE 4 with the TinyMCE.Jquery package.
-This is the input field in question: http://i.imgur.com/wrMoTOP.png
Any help would be great! Thanks!
<script type="text/javascript">
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "mceEditor",
theme: "modern",
plugins: "pagebreak,textcolor,layer,table,save,hr,image,link,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,fullscreen,visualchars,nonbreaking,template,wordcount,code,customcss_1,customcss_2",
menubar: "edit format view table tools",
toolbar: "undo redo print glossaryword | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | outdent alignleft aligncenter alignright alignjustify indent | bullist numlist hr |",
contextmenu: "undo redo | cut copy paste | link | customcss_1 customcss_2 glossaryword |",
height: 500,
setup: function (ed) {
ed.addButton('glossaryword', {
title: 'Query String Parameter',
onclick: function () {
ed.windowManager.open({
title: 'Query String Parameter',
body: [
{ type: 'textbox', name: 'source', label: 'Source' }
],
onsubmit: function (e) {
ed.focus();
ed.selection.setContent('' + ed.selection.getContent() + '');
}
});
}
});
}
});
After messing around awhile longer I realized I was being silly.
setup: function (ed) {
ed.addButton('glossaryword', {
title: 'Query String Parameter',
onclick: function () {
ed.windowManager.open({
title: 'Query String Parameter',
body: [
{ type: 'textbox', name: 'word', label: 'Glossary Word', id: 'popupword' }
],
onsubmit: function (e) {
ed.focus();
ed.selection.setContent('' + e.data.word + '');
}
});
}
});
}
I am using TinyMCE and I am using an inline editor if that matters. This is my code...
<script type="text/javascript">
tinymce.init({
selector: "div.prut8Eje",
inline: true,
plugins: [
"advlist autolink lists link image charmap print preview anchor save",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
menu : { // this is the complete default configuration
file : {title : 'File' , items : 'save newdocument | print'},
edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'},
insert : {title : 'Insert', items : 'link media | template hr'},
view : {title : 'View' , items : 'visualaid'},
format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
tools : {title : 'Tools' , items : 'spellchecker code'}
},
toolbar: "save | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
Well, the save button works fine in the toolbar, but doesn't show up in the File Menu. I tried to post pictures, but I need 10 reputation.
Edit: You can see the pictures at
http://gyazo.com/3d08cd176cd7b3cb4c6d6d395884e466
http://gyazo.com/daed4520adb902cb87336d943d6a30f7
Thanks in advance,
Ben
This is an old question, but I found a very easy way to add a Save button to the file menu. Using the setup event in tinymce, you can add a menu item:
tinymce.init({
.....
setup: function(editor) {
editor.addMenuItem('save', {
icon: 'save',
text: 'Save',
cmd: 'mceSave',
context: 'file',
disabled: true,
onPostRender: function () {
var self = this;
editor.on('nodeChange', function() {
self.disabled(editor.getParam("save_enablewhendirty", true) && !editor.isDirty());
});
}
});|
}
});
This utilizes all the regular save funtions and the onPostRender function just enables or disables the button (using code I found in the save plugin.js file)
According to their own documentation, the "save" plugin is only for the toolbar and not for the menu: http://www.tinymce.com/wiki.php/Controls
It looks like you'd have to create your own menu item manually; something like this could work:
tinymce.PluginManager.add('menusave', function(editor, url) {
editor.addMenuItem('menusave', {
text: 'Save',
context: 'file',
onclick: function() {
$('.mce-i-save').closest('button').trigger('click');
}
});
});
For that to work though, you'd have to have the save button in the toolbar as well, but there are probably better ways to do it than by triggering a click on the button in the toolbar.
Then don't forget to add "menusave" (or whatever you choose to name it) to the list of plugins, and to add it to wherever you want it to be in the menu:
file : {title : 'File' , items : 'menusave newdocument | print'},
By the way, to come up with the code above I played with this "TinyMCE Fiddle": http://fiddle.tinymce.com/ngdaab/0