ASP.net with tinymce editor - ReferenceError: tinyMCE is not defined

By -
In the context of ASP.net C#   tinyMCE can be bind to server side  text areas .However you have to use suitable request validation method considering the security level expected


     <asp:TextBox ID="textArea" ClientIDMode="Static" name="elm1" class="elm1" runat="server"
                     TextMode = "MultiLine" TabIndex="4" ></asp:TextBox>

In that context you can use class name of the text are and bind editor for all the text areas within same page using following parameters.Mode define the specific text areas to be selected and editor selctor select them from the class name.

<script type="text/javascript" >
    tinyMCE.init({
        mode: "specific_textareas",
        editor_selector: "elm1",
 However if you want to use tinyMCE  for specific text ares as well as doing some client side functions in jQuery or JavaScript you have to use ID of the text Area.IT will avoid rising the error " ReferenceError: tinyMCE is not defined ".


eg:
<asp:TextBox ID="textArea_1" ClientIDMode="Static"  runat="server"
                     TextMode = "MultiLine" TabIndex="4" ></asp:TextBox>

tinyMCE has to initiate with the mode of exact and the client ID has to be given.
 

<script type="text/javascript">
    tinyMCE.init({
         mode: "exact",
        elements: "<%=textArea_1.ClientID %>",

So it enable to get the content in the client side script like below

 function copyText() {
        var content = tinymce.get('<%=textArea.ClientID %>').getContent({ format: 'raw', no_events: 1 });
        document.getElementById('<%=Panel1.ClientID %>').innerHTML = content;
    }



Comments

Post a Comment

Popular posts from this blog

ENOENT: no such file or directory, rename : node_modules/async

By -
Image
I have gone trough follwing error ,when I was updating npm. npm ERR! path /Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/async npm ERR! code ENOENT npm ERR! errno -2 npm ERR! syscall rename npm ERR! enoent ENOENT: no such file or directory, rename '/Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/async' -> '/Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/.async.DELETE' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR!     /Users/interlectivethree/.npm/_logs/2017-07-07T14_17_29_016Z-debug.log I have done sevarel things like package wise unstall and install ,package relocating .But no success .But I think compleate unstall and reinstall is the best option and follwing commands used. npm uninstall ` ls - 1 node_modules | tr '/\n' ' &#
Read more

react-quill Integrate quill-image-resize-module

By -
Image
React-qill  is a great free package which can be used for design editors. However, if you are using the image upload feature, there is a problem of integrating resize package. This was discussed in may treads and I was able to find the best approach integrate it with react-starter-app. https://www.npmjs.com/package/quill-image-resize-module If you use the following code, import Quill from ' quill ' ; import { ImageResize } from ' quill-image-resize-module ' ; Quill . register ( ' modules/imageResize ' , ImageResize); const quill = new Quill (editor, { // ... modules : { // ... imageResize : { // See optional "config" below } } }); The following error is common. TypeError: Cannot read property 'imports' of undefined var d = window.Quill.imports.parchment In order to overcome the issue , you have to update the node_modules/react-scripts/config/webpack.config.
Read more