I'm using tinymce in inline mode on a contenteditable div.
I have used the CodeMirror tinymce plugin before (not inline mode) with no issues, but it doesn't seem to work correctly in inline mode.
I've tried changing the config to inline: false and it works.
Clicking the Source button opens the HTML with CodeMirror and seems ok.
But when I click Ok to save it, it seems to work fine in Chrome and Firefox but in Safari it adds an and I can't close the modal (however, I can see that it has changed the content of the editable div), clicking the Ok button again, it adds another and console error. Clicking the cancel or X button just adds console error.
In the console I get IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value tinymce.min.js:5724
In Chrome, it seems to work but I still get a console error The given range isn't in document.
My tinymce config is below:
var tinymceEditText = tinymce.init({
selector: '.editableEl',
// target: ".editableElTinyMCE",
// theme: 'inlite',
inline: true,
plugins: [
'advlist autolink lists link image charmap anchor media',
'searchreplace visualblocks code fullscreen',
'template textcolor colorpicker hr fontawesome noneditable hr',
'insertdatetime contextmenu paste save codemirror',
'OBstock emoji_one'
],
toolbar1: 'save undo redo | styleselect | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignjustify | | code',
toolbar2: 'bullist numlist outdent indent | template | hr | anchor link unlink | image media OBstock emoji_one fontawesome ',
relative_urls: false,
remove_script_host: true,
templates: "/admin/JS/tinymce/js/tinymce/lists/template_list.php",
external_filemanager_path: "/filemanager/",
external_plugins: {"filemanager": "/filemanager/plugin.min.js"},
filemanager_title: "Uploaded Files", //the title of filemanager window default="Responsive filemanager",
filemanager_sort_by: "name", //the element to sorting (values: name,size,extension,date) default="",
filemanager_descending: 0, //descending ? or ascending (values=1 or 0) default="0"
codemirror: {
indentOnInit: true, // Whether or not to indent code on init.
smartIndent: true,
indentWithTabs: true,
saveCursorPosition: false,
path: '/admin/JS/codemirror-' + CODEMIRRORVERSION, // Path to CodeMirror distribution
config: { // CodeMirror config object
theme: CODETHEME,
indentUnit: 4,
lineNumbers: true,
mode: "htmlmixed",
matchBrackets: true,
autoCloseBrackets: true,
autoCloseTags: true,
matchTags: {bothTags: true},
indentOnInit: true, // Whether or not to indent code on init.
smartIndent: true,
indentWithTabs: true,
lineWrapping: true,
paletteHints: false,
lint: true,
lintOnChange: true,
showHint: true,
HTMLHint: true,
CSSHint: true,
JSHint: true,
getAnnotations: true,
gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
foldGutter: true,
profile: 'xhtml', /* define Emmet output profile */
extraKeys: {
"Ctrl-Space": "autocomplete",
"F11": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
},
jsFiles: [
'mode/php/php.js',
'mode/htmlembedded/htmlembedded.js',
'addon/edit/matchbrackets.js',
'addon/edit/closebrackets.js',
'addon/edit/closetag.js',
'addon/fold/xml-fold.js',
'addon/fold/comment-fold.js',
'addon/edit/matchtags.js',
'mode/htmlmixed/htmlmixed.js',
'addon/search/searchcursor.js',
'addon/search/search.js',
'addon/hint/show-hint.js',
'addon/hint/anyword-hint.js',
'addon/hint/html-hint.js',
'addon/hint/css-hint.js',
'addon/hint/xml-hint.js',
'addon/hint/javascript-hint.js',
'addon/lint/lint.js',
'addon/lint/javascript-lint.js',
'addon/lint/json-lint.js',
'addon/lint/css-lint.js',
'addon/lint/html-lint.js',
'addon/customplugins/lint/csslint.js',
'addon/customplugins/hint/htmlhint.js'
],
cssFiles: [
'theme/' + CODETHEME + '.css',
'addon/dialog/dialog.css',
'addon/hint/show-hint.css',
'addon/lint/lint.css',
'addon/fold/foldgutter.css',
]
}
});
EDIT: I've now managed to recreate this in Chrome and Firefox, by opening the source editor, clicking cancel, opening the source editor again and clicking Ok. Different errors in the console though:
Chrome:
Uncaught DOMException: Failed to execute 'setStart' on 'Range': There is no child at offset 3. tinymce.min.js:5
Firefox:
IndexSizeError: Index or size is negative or greater than the allowed amount tinymce.mins.js:5
Finally managed to figure this one out be myself.
The issue wasn't with CodeMirror itself but actually tinymce's setContent function.
This fix for this was using the insertContent function instead and adding an extra setting in the tinymce.init
if(CMsettings.config.inlineFix) {
editor.selection.select(editor.getBody(), true);
editor.insertContent(codemirror.getValue().replace(cc, '<span id="CmCaReT"></span>'));
} else {
editor.setContent(codemirror.getValue().replace(cc, '<span id="CmCaReT"></span>'));
}
This made the insert button work but the cancel button still had some weird behaviour with the cursor, so I ended up duplicating and modifying the whole plugin to remove the insert and cancel buttons, and add them myself in the html
Has anybody try to use code mirror via browserify?
I find nothing is visible, even though it already generated all the html tags.
The code :
var CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript.js');
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {
"Ctrl-Space": "autocomplete"
},
mode: {
name: "javascript",
globalVars: true
}
});
i wonder how i should require the js mode?
I actually dealed with that problem by using require() for all dependencies of the demonstration of html5complete mode demo like that:
// require('codemirror/addon/hint/show-hint');
// require('codemirror/addon/hint/xml-hint');
// require('codemirror/addon/hint/html-hint');
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/css/css');
require('codemirror/mode/htmlmixed/htmlmixed');
var CodeMirror = require('codemirror/lib/codemirror');
var editor = CodeMirror.fromTextArea(textareaElement, {
mode: 'text/html',
lineWrapping: true,
extraKeys: {
'Ctrl-Space': 'autocomplete'
},
lineNumbers: true,
theme: 'monokai'
});
In my .less files, I imported the CSS like that:
#import (inline) "./../../node_modules/codemirror/lib/codemirror.css";
#import (inline) "./../../node_modules/codemirror/theme/monokai.css";
// #import (inline) "./../../node_modules/codemirror/addon/hint/show-hint.css";
I did not took really care about the quality of that trick.
Here's what's working for me. Using import instead of require, but same gist:
import 'codemirror/theme/3024-night.css'
const options = {
lineNumbers: true,
readOnly: false,
mode: 'htmlmixed',
theme:'3024-night'
};
...
<Codemirror ref="editor" value={this.props.value} onChange={this.props.updateCode} options={options}/>
I can't find any examples where I can insert a video player code into the tinymce 4.x, I'have a jwplayer downloaded, but I don't know how to insert the javascript code into the editor to execute this for each added video:
jwplayer(id).setup({
file: video.href,
image: video.img,
title: video.title,
width: '640',
height: '360',
primary: 'flash',
aspectratio: '16:9'
});
please any help!
You should try initialising the player in the onLoadContent event handler of TinyMCE.
E.g.
tinyMCE.init({
...
setup : function(ed) {
ed.onLoadContent.add(function(ed, o) {
jwplayer(id).setup({
file: video.href,
image: video.img,
title: video.title,
width: '640',
height: '360',
primary: 'flash',
aspectratio: '16:9'
});
});
}
});
The pont is that you need an element in user provided content to be available for DOM manipulation before setting up the player.
I have a window component that using loader configuration like this:
Ext.create('Ext.window.Window', {
id: 'window1',
title: 'Lookup Master Soal',
height: 500,
width: 800,
draggable: false,
modal: true,
loader: {
url: 'http://mydomain.com:34573/CBC/Pertanyaan/MasterSoal/Default.aspx?lookup=true',
renderer: 'frame',
autoLoad: true,
scripts: true,
loadMask: {
showMask: true
}
}
}).show();
I have some javascript code in http://mydomain.com:34573/CBC/Pertanyaan/MasterSoal/Default.aspx, and I want to send some parameter to the window. I have no idea to do this. I would greatly appreciate any help.
You can access a Window from its iframe page (loaded via its Loader) in JavaScript via the "parentAutoLoadControl" reference.
I have Chrome installed and I would want to add my windows store app protocol to the protocol_handler. I want to know if there is any way to do with javascript . I want for every person visiting my page, ask to add my apps protocol to that list and then launch an external app with some arguments. I have searched for 6 hours, found that there is a way to add a protocol handler in Chrome, web+, but this is only for web apps, and does not work for external apps. I tried this but doesn't work:
<html>
<head>
<title>
Iframe test
</title>
</head>
<body>
Open in "My App"
<script type="text/javascript">
function register() {
navigator.registerProtocolHandler("web+myTrip", "myTrip:place:/%s", "title");
document.getElementById("iframeTest").src = "myTrip:place:/m/0942y1";
}
</script>
<p><input type="button" value="Run ad hoc test"
onclick="register()">
<iframe id="iframeTest"/>
</body>
This is the list where I want to add my protocol, you can locate on c:\Users|[local user]\AppData\Google\Chrome\UserData|LocalState:
"protocol_handler": {
"excluded_schemes": {
"afp": true, "data": true, "disk": true, "disks": true, "file": true, "hcp": true, "javascript": true, "magnet": false, "mailto": false, "ms-help": true, "ms-windows-store": false,
"news": false, "nntp": true, "shell": true, "snews": false, "unknown": false, "vbscript": true, "view-source": true, "vnd": {
"ms": {
"radio": true
}
}
}
I only want to insert my protocol
"mytrip": false,
If I modify the file manually it works, but I has to be bia Javascript & HTML.
Any ideas?