Telerik Forums
Community Forums Forum
8 answers
176 views
1 answer
34 views
Here's my current code, where on the button clicks I'm opening a popup in which the user can type anything and insert it into the cursor position, it's working fine.

Problem:- When I save my text like this <p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though. Which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" style="user-select: none; opacity: 0.5; background-color: red; padding: 2px;" id="12312381829919">rahul</span>.</p>
where rahul is a custom value inserted using a popup with properties like id & style 

but when I parse this value onMount from API, the editor doesn't keep my style and id properties and when inspected the text in the editor looks like 

<p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though, which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" >rahul</span>.</p>

which Is without ID and style tag 

here's my code for reference 

import React, { useRef, useState } from "react";
import { Editor, EditorTools, EditorUtils, ProseMirror } from "@progress/kendo-react-editor";
import "@progress/kendo-theme-default/dist/all.css";
import { Button } from "@progress/kendo-react-buttons";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Input } from "components/atoms/input/Input";

export default function KendoEditor({ type, updateData, initalVal }) {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const [customData, setCustomData] = useState("");
  const [value, setValue] = useState("test");
  var initialValue =
    type === "header" || type === "footer" ? initalVal?.data?.content : initalVal?.content;
  const editorRef = useRef(null);
  const {
    Bold,
    Italic,
    Underline,
    Strikethrough,
    Subscript,
    Superscript,
    ForeColor,
    BackColor,
    CleanFormatting,
    AlignLeft,
    AlignCenter,
    AlignRight,
    AlignJustify,
    Indent,
    Outdent,
    OrderedList,
    UnorderedList,
    NumberedList,
    BulletedList,
    Undo,
    Redo,
    FontSize,
    FontName,
    FormatBlock,
    Link,
    Unlink,
    InsertImage,
    ViewHtml,
    InsertTable,
    InsertFile,
    SelectAll,
    Print,
    Pdf,
    TableProperties,
    TableCellProperties,
    AddRowBefore,
    AddRowAfter,
    AddColumnBefore,
    AddColumnAfter,
    DeleteRow,
    DeleteColumn,
    DeleteTable,
    MergeCells,
    SplitCell,
  } = EditorTools;
  const { Schema, EditorView, EditorState } = ProseMirror;
  const nonEditable = {
    name: "nonEditable",
    inline: true,
    group: "inline",
    content: "inline+",
    marks: "",
    attrs: {
      contenteditable: { default: null },
      class: { default: null },
      style: { default: null },
      id: { default: null },
    },
    atom: true,
    parseDOM: [{ tag: "span.uneditable", priority: 51 }],
    toDOM: (node) => [
      "span",
      {
        contenteditable: false,
        class: "uneditable",
        style:
          "user-select: none; opacity: 0.5; background-color: red;text-weight:600;padding:2px;",
        id: node.attrs.id,
      },
      0,
    ],
  };

  const toggleSidebar = (type, props) => {
    return (
      <Button
        onClick={() => {
          setDialogVisible(true);
          //  setActiveProperties(type);
        }}
        onMouseDown={(e) => e.preventDefault()}
        onPointerDown={(e) => e.preventDefault()}
        title="Insert Custom Data"
        imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
        imageAlt="KendoReact Buttons Snowboarding icon"
      />
    );
  };

  const handleInsertCustomData = () => {
    const { view } = editorRef.current;
    const schema = view.state.schema;

    // get the new node from the schema
    const nodeType = schema.nodes.nonEditable;

    // create a new node with the custom data
    const node = nodeType.createAndFill(
      {
        class: "uneditable", // Keep the existing classes
        style: "user-select: none; opacity: 0.5; background-color: red;", // Add red background color
        id: "nernksf", // Add unique ID using new Date()
      },
      schema.text(customData)
    );

    // Insert the new node
    EditorUtils.insertNode(view, node);
    view.focus();

    // Close the dialog
    setDialogVisible(false);
    setCustomData("");
  };
  console.log(initialValue);
  const onMount = (event) => {
    const { viewProps } = event;
    const { plugins, schema } = viewProps.state;

    let nodes = schema.spec.nodes.addToEnd("nonEditable", nonEditable);

    const mySchema = new Schema({ nodes: nodes, marks: schema.spec.marks });

    console.log(type, initialValue);
    const doc = EditorUtils.createDocument(mySchema, initialValue ? initialValue : "");

    return new EditorView(
      { mount: event.dom },
      {
        ...event.viewProps,
        state: EditorState.create({ doc, plugins }),
      }
    );
  };
  //console.log(value);
  const handleEditorChange = (event) => {
    const data = event?.html;
    //console.log(data);
    setValue(data);
    if (type === "header" || type === "footer") {
      updateData({ visible: initalVal?.visible, data: { ...initalVal?.data, data } });
    } else {
      updateData({ ...initalVal, data });
    }
  };
  return (
    <div>
      <Editor
        ref={editorRef}
        onMount={onMount}
        onChange={handleEditorChange}
        tools={[
          [Bold, Italic, Underline, Strikethrough],
          [Subscript, Superscript],
          ForeColor,
          BackColor,
          [CleanFormatting],
          [AlignLeft, AlignCenter, AlignRight, AlignJustify],
          [Indent, Outdent],
          [OrderedList, UnorderedList],
          [NumberedList, BulletedList],
          FontSize,
          FontName,
          FormatBlock,
          [SelectAll],
          [Undo, Redo],
          [Link, Unlink, InsertImage, ViewHtml],
          [InsertTable, TableProperties, TableCellProperties],
          [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
          [DeleteRow, DeleteColumn, DeleteTable],
          [MergeCells, SplitCell],
          [
            (props) => toggleSidebar("dataSourceProperties", props),
            (props) => toggleSidebar("formulaProperties", props),
            (props) => toggleSidebar("letterProperties", props),
            (props) => toggleSidebar("conditionBuilder", props),
          ],
        ]}
        contentStyle={{
          height: 320,
        }}
        //value={initialValue}
      />
      {isDialogVisible && (
        <Dialog
          title="Insert Custom Data"
          onClose={() => setDialogVisible(false)}
          visible={isDialogVisible}
        >
          <div>
            <Input
              type="text"
              value={customData}
              onChange={(e) => setCustomData(e.target.value)}
              label="Enter name"
            />

            <DialogActionsBar>
              <button
                className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
                onClick={() => setDialogVisible(false)}
              >
                No
              </button>
              <button
                className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
                onClick={handleInsertCustomData}
              >
                Yes
              </button>
            </DialogActionsBar>
          </div>
        </Dialog>
      )}
    </div>
  );
}

7 answers
286 views
I am working with a programmer in the Florida area and we need assistance with Telerik products especially in the dot net and UI client side controls. Are you good with scheduling and creation of WPF forms? Contact me and if you work out and are motivated, you can work from home and get paid; really! You must be able to program and code in simple SDK  like Telerik, Expression Blend, and work with and have fluent experience with client side programming. You will have to sign an NDA and non-compete specific to our project which I am in a hurry to launch.

The more knowledge that you have with Telerik suite of products, the better!

THE POSITION HAS BEEN FILLED!
Waldo
Top achievements
Rank 1
 answered on 07 Oct 2020
2 answers
116 views

Hi All,

We have a web application with multiple requirements and need assistance with RADCONTROLS 

If this is something your comfortable with please contact me with availability via email or call

 

Email: Kai@dnkenterprise.com

Mobile: +447511442700

SKYPE Email: kkvaja@gmail.com

Rabbani
Top achievements
Rank 1
 answered on 01 Feb 2019
1 answer
204 views
I'm looking for experienced ASP.NET developer who lives in Oslo/Norway or is willing to relocate. We are using the Telerik asp.net controls (tree, tab, grid, splitter,...), and possibly will be using some of the WinForms ones too.

If you are interested, please contact me at: development(at)compello.no

Sorry for the misleading subject and it seems that I can't change it...
Anastasia
Top achievements
Rank 1
 answered on 20 Sep 2018
2 answers
98 views
Dear community,

We are currently writing a Doctor Case Management System that is written as  a .net Win Form Application.  It operates as a disconnected client that synchronises  Microsoft CRM data (Dynamics 4.0) to a local SQL Server Compact Edition database.  Think of it like Outlook but for managing doctor’s appointments and associated case documents (medical records, reports on the patient’s condition etc.)

 

The development is going well but we need a specialist who can “style” the applications.  Colour Pallets, Fonts, Grids, button positioning, styled graphics etc.  We heavily use the Telerik RadControls for Win Forms  and this is an important part of the styling.  The design look and feel itself will be dictated by a graphic designer / design agency who control the company brand and who have also styled the website. 

We are looking for someone who has experience of win form design and Telerik Rad Controls (from a design aspect) who can take the style / colour scheme and implement in the application.  They will not be required to carry out nor understand the 'coding' element of the application, although they will be working within Visual Studio 2008 to implement the design.

Although not strictly required information, for completeness the technical platform is as specified below:

 

·         .Net Framework 3.5 sp1 (Windows Forms, Linq, windows communication foundation)

·         SQL Server Compact 3.5

·         Telerik RadControls for Win Forms  v. 2009.3 1103

·         Log4net  v.1.2.10.0

·         Cryptainer SE 8.0

·         Windows Installer 3.1

 

 

 

 

Please send your C.V., contact details, usual daily rate expected etc. to ben.roles@premiermedical.co.uk

Questions / queries welcome.  This is a 10-15 day job and start as soon as possible would be good.  Ideally the person will be able to travel to London (WC1) although part-time at home / another location would work.  Contact with the core development team will need to be maintained though.

Regards,
Ben.

Sofía
Top achievements
Rank 1
 answered on 10 Jan 2018
1 answer
31 views

Hi,

We're looking for part time developer who have experience in Angular + KendoUI + Asp.net.

Please leave your reply or message me if you're interested.

Thanks.

Parag
Top achievements
Rank 1
 answered on 18 Jan 2017
4 answers
220 views
Hello Telerik Experts,

We want to create an E-commerce Shopping Cart Site with Telerik RAD Controls for ASP.NET AJAX.

The UI design (screenshot) and the business objects will be according to Magento Commerce:-
- http://www.magentocommerce.com/
- http://www.magentocommerce.com/demo
- http://demo-admin.magentocommerce.com/index.php/admin/

We require the coder needs to implement the web pages using Telerik RAD Controls for ASP.NET AJAX and in .NET Framework 3.5.

The deliverables are:-

1.  The site should be designed with skins and built to accommodate different themes; our ASP clients comprises different industry types. I need just 2 theme for the web site to be delivered; one is a look-&-feel for a HEALTH FOOD STORE and another is for a TOY SHOP; that I can switch over by clicking an option in the Administrator screen (something similar to Google's different skin setting).

2. The ASPX pages based on Magento Commerce (Community Edition), all created using Telerik RAD controls along with the code behind that implements the described functionaity built on top of the business objects of Magento. It will include all CSS, JS, images and skin files. A documentation of the coding is expected.

NOTE: This is part of a larger Application Service Provider project that we are involved in. We plan to outsource a few more modules based on the outcome of this initial project.

Please email your proposals to me.

Thank you
James Lee
jameslee888sg@yahoo.com.sg

Anaad
Top achievements
Rank 1
 answered on 19 Nov 2016
0 answers
41 views

Greetings, Telerik developers! I work for a county government agency in Los Angeles County. We are looking for a web developer with Telerik expertise. You can view the job announcement at:

http://agency.governmentjobs.com/lacdc/default.cfm?action=viewJob&jobID=1546681.

I've been with this agency about four years. In addition to the benefits listed in the job announcement, I can add from my personal experience that it's a pleasant and congenial work atmosphere. If you're looking for a good gig, please get in touch. Thanks.

----
Grinnell Almy
Web Developer
Los Angeles County Community Development Commission
grinnell.almy@lacdc.org

LACDA-IT
Top achievements
Rank 1
 asked on 28 Oct 2016
1 answer
19 views

We are looking for a developer to build on the Telerik platform a portal + app for our products/services 

We are located in Amsterdam, The Netherlands,

Interested? Then please send an email to Marco.Robben@mastermind.eu

Naren
Top achievements
Rank 1
 answered on 22 Jul 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?