C1Editor Image(tag) inserting

Originally Posted 19 November 2014, 4:43 am EST

  • Originally Posted 19 November 2014, 4:43 am EST


    HI

    I have some Wijmo C1Editor problem.

    How can I control the image-inserting by myself ?
    the C1Editor's image browser is too complex to users,
    I want to insert the tag but I don't know how to do
    (add at caret position).

    And Is there have any way to get C1Editor.Text at Client Script side (not in C1Editor's events) ?
    There have no any brief documentation or sample.

    Best regards

    Chris
  • Reply

    Hello,

    Kindly refer to the following demo sample which depicts how you can customize C1Editor to add new options or remove existing ones: http://demo.componentone.com/ASPNET/ControlExplorer/C1Editor/Customize.aspx. You may use the same approach to add your own dialog as per your requirements to upload an image.

    Further, you can use the following code to get the C1Editor content on the client side:



    function GetEditorText()
    {
    var etext = $("#Editor1").c1editor("option", "text");
    alert(etext);
    }


    You may refer to the attached sample which implements the same. Hope it helps.

    Thanks,
    Manpreet Kaur
    2014/11/GetEditorText.zip
  • Reply

    Hello,

    There does not seems to be a direct way to add custom buttons to C1Editor, when it is in simple mode. We have escalated the issue to the concerned team for further discussion. We will let you know as soon as we get any information in this regard.

    Thanks,
    Manpreet Kaur
  • Reply

    @TEDPC2005 said:
    OK, If anyone want to paste <img> or html you need use 'insertHTML' command not 'InsertText' :

    Chrome :

    doc.execCommand('insertHTML', false, inputText);

    *insertHTML are works for plain text and html.



    HI

    implementation for any version of IE(~IE10, IE11~), digest built-in 'Image Browser' of C1Editor :


    // IE ~10
    if (doc.selection)
    {
    range = doc.selection.createRange();
    range.pasteHTML(inputText);
    range.collapse(false);
    range.select();
    return;
    }
    // IE 11~
    var selObj = win.getSelection();
    var selRange = selObj.getRangeAt(0);
    var insertNode = selRange.createContextualFragment(inputText);
    selRange.insertNode(insertNode);
    selRange.collapse(false);

    -- end --



    But I think C1Editor should provide a public method to do this for developers.

    Best regards

    Chris

  • Reply

    Hello,

    C1Editor already provides an option to insert images, as depicted in the following sample: http://demo.componentone.com/ASPNET/ControlExplorer/C1Editor/Customize.aspx.

    However, thank you for sharing your code with us, as it might help other customers who are looking forward to use a simpler version of Image Browser.

    Thanks,
    Manpreet Kaur
  • Reply

    @manpreetkaur said:
    Hello,

    Kindly refer to the following demo sample which depicts how you can customize C1Editor to add new options or remove existing ones: http://demo.componentone.com/ASPNET/ControlExplorer/C1Editor/Customize.aspx. You may use the same approach to add your own dialog as per your requirements to upload an image.

    Further, you can use the following code to get the C1Editor content on the client side:



    function GetEditorText()
    {
    var etext = $("#Editor1").c1editor("option", "text");
    alert(etext);
    }


    You may refer to the attached sample which implements the same. Hope it helps.

    Thanks,
    Manpreet Kaur



    HI

    Yes, I can get the C1Editor.Text via jquery selector.
    In sample, there have the way to add the custom Image browser button :

    CS\ControlExplorer\C1Editor\Customize.aspx.cs

    group.Buttons.Add(new C1.Web.Wijmo.Controls.C1Editor.C1RibbonButton("imagebrowser", "Image Browser", "wijmo-wijribbon-imagebrowser"));

    But I still don't know how to add <img> tag into to the C1Editor.Text by myself,
    Because there have no property to know the caret position(like Windows Forms TextBox.SelectionStart property).

    Best regards

    Chris



  • Reply

    Hello,

    You can use the client side object model of C1Editor to insert an image at the cursor position. Kindly refer to the following blog link which describes the approach to insert text at the cursor position: http://wijmo.com/insert-text-at-cursor-postion-in-wijmo-editor/.

    I have used the approach suggested in the above blog link to insert an image at the cursor position. Kindly refer to the attached sample which implements the same. You simply need to enter some text, then place your cursor at some specific position. Now click on the image button in the "CustomizeTab" tab of C1Editor to insert the image.

    Hope it helps.

    Thanks,
    Manpreet Kaur
    2014/11/SetEditorImage_AtCursorPos.zip
  • Reply

    OK, If anyone want to paste <img> or html you need use 'insertHTML' command not 'InsertText' :

    Chrome :

    doc.execCommand('insertHTML', false, inputText);

    *insertHTML are works for plain text and html.
  • Reply

    @TEDPC2005 said:
    [i][/i]

    ...

    CS\ControlExplorer\C1Editor\Customize.aspx.cs

    group.Buttons.Add(new C1.Web.Wijmo.Controls.C1Editor.C1RibbonButton("imagebrowser", "Image Browser", "wijmo-wijribbon-imagebrowser"));

    ...



    HI

    I Have another problem.

    Yes, I know how to add custom button into group,
    but how can I add custom button while C1Editor.Mode = Simple ?

    Best regards

    Chris

  • Reply

    HI

    for Chrome, etc (non-IE browser) :

    doc.body.focus();
    doc.execCommand('insertText', false, inputText);

    you should focus back to c1editor before or after execCommand(), else the inserted-text will disappeared after any postback or full screen.

    Best regards

    Chris
  • Reply

    Hello,

    Thank you for sharing your observations with us.

    Thanks,
    Manpreet Kaur
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels