I can't get Inline working for a Rich Text Editor using a CDN implementation
I'm looking for a little help with setting up a CDN based Rich Text Editor in what should be a very simple setup, but I just can't get it working. I'm not a 'pro', so apologies if this is a bit basic.
The problem I have at this early stage, is that the RTE sets up ok as a normal RTE, but I want to use an Inline version and when I change the code to suit, it won't show the Floating Toolbar. I can see a shadowy-blur where it should be, but no Toolbar.
Here's a screen-grab of the 'blur' that appears instead of the Toolbar:
(I'm using this in a FileMaker Pro file via the web-viewer)
Can anyone tell me where I'm going wrong ... and also, if this code is generally ok?
Here's the basic code so far:
<!DOCTYPE html><html lang="en">
<head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link rel='nofollow' href="index.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-lists/styles/material.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<script> // Registering Syncfusion license key
ej.base.registerLicense('xxxxxxxxxxxxxxxxxxxxxxxxxxx');
</script>
<body>
<div id="container">
<div id="defaultRTE" >
<p>
TEST TEST TEST
</p>
</div>
</div>
<script>
var ele = document.getElementById('container'); if(ele){ ele.style.visibility = "visible";}
</script>
<script src="index.js" type="text/javascript">
</script>
<script>
// initialize Rich Text Editor component
var RichTextEditor = new ej.richtexteditor.RichTextEditor({
inlineMode : {
enable :true,
onSelection: true
}
});
// Render initialized Rich Text Editor
RichTextEditor.appendTo('#defaultRTE')
</script>
</body>
</html>
Hi Vinitha,
I'm coming back to this, as I've discovered that the fix using 'max-width' does NOT work when the cursor is placed in a hyperlink/URL. So, I still get the 'blur' ... and ... it does it without any Selection. So just placing the cursor in the link. It also prevents the Toolbar from loading even when selecting text.
This happens using the Code that you provided in your first reply, with the fix applied and which has onSelection applied too.
Can you suggest a fix for this?
