Question

如何从Kendo Editor中为文本或图像添加效果？

情况1：

使文本或图像变黑
在组合框列表中选择效果
为文本/图像添加效果

情况2：

使文本/图像变黑
效果将显示在选择列表中

我希望结果与添加文本的字体大小或字体系列时的结果相同。

现在，我有了效果列表，可以为文本添加效果。就这样。：（

<textarea name="Contents" id="editor"></textarea>

$("#editor").kendoEditor({
   tools: [
     { 
       name: "formatting",
       width: 150, 
       items: [
          { text: "bounce", value: ".animated bounce" },
          { text: "flash", value: ".animated flash" },
          { text: "pulse", value: ".animated pulse" },
          { text: "rubberBand", value: ".animated rubberBand" },
          { text: "shake", value: ".animated shake" },
          { text: "swing", value: ".animated swing" },
          { text: "FadeIn Left", value: ".animated fadeInLeft" },
          { text: "FadeIn Down", value: ".animated fadeInDown" },
          { text: "zoomIn", value: ".animated zoomIn" },
          { text: "zoomInDown", value: ".animated zoomInDown" },
          { text: "zoomInLeft", value: ".animated zoomInLeft" },
          { text: "zoomInRight", value: ".animated zoomInRight" },
          { text: "zoomInUp", value: ".zoomInUp" },
          { text: "Highlight Error", value: ".hlError" },
          { text: "Highlight OK", value: ".hlOK" },
          { text: "Inline Code", value: ".inlineCode" }
       ]
     },
     "cleanFormatting",
     "fontName",
     "fontSize",
     "backColor",
     "insertImage",
     "viewHtml",
     {
       name: 'customeAnimation',
       template:  '<input id="customAnimation" placeholder="Select animation..." style="width: 100%;" />'
     },
     
   ],
   stylesheets: [
    "https://demos.telerik.com/kendo-ui/content/web/editor/editorStyles.css",
     "https://daneden.github.io/animate.css/animate.min.css",
   ]
 });

$("#customAnimation").kendoComboBox({
  autoWidth: false,
  dataTextField: "text",
  dataValueField: "value",
  dataSource: [
    { text: "FadeIn Left", value: "fadeInLeft" },
    { text: "FadeIn Down", value: "fadeInDown" },
    { text: "zoomIn", value: "zoomIn" },
    { text: "zoomInDown", value: "zoomInDown" },
    { text: "zoomInLeft", value: "zoomInLeft" },
    { text: "zoomInRight", value: "zoomInRight" },
    { text: "zoomInUp", value: "zoomInUp" },
    // { text: "Highlight Error", value: "hlError" },
    // { text: "Highlight OK", value: "hlOK" },
    // { text: "Inline Code", value: "inlineCode" }
  ],
  change: function(e) {
    var editor = $("#editor").data("kendoEditor");
    var effectValue = this.value();
    var textSelect = '';
    if (editor.getSelection) {
      textSelect = editor.getSelection().toString();
    } else if (editor.selection.type != "Control") {
      textSelect = editor.selection.createRange().text;
    }
    var newText = '';
    var arrText = [];
    var newContent = '';
    if(textSelect != '' && effectValue != '') {
      const range = editor.getSelection().getRangeAt(0);
      range.cloneContents().querySelectorAll('*').forEach(e => {
        arrText.push(e);
      });
      
      if (arrText.length > 0) {
        arrText.forEach(e => {
          newText = "<span class='animated "+effectValue+"'>" + e.innerText + "</span>";
          newContent = editor.body.innerHTML.replace(e.innerText, newText);
          editor.body.innerHTML = '';
          editor.exec("inserthtml", { value: newContent });
        });
      } else {
        newText ="<span class='animated "+effectValue+"'>" + textSelect + "</span>";
        newContent = editor.body.innerHTML.replace(textSelect, newText);
        editor.body.innerHTML = '';
        editor.exec("inserthtml", { value: newContent });
      }
      
      editor.refresh();
    }
  },
  filter: "contains",
});

$(document).ready(function() {
  $("#btn-show").click(function() {
    var editor = $("#editor").data("kendoEditor");
    document.getElementById("e-content").innerHTML = editor.value();
  });
})

剑道编辑器：如何在剑道编辑器中为文本或图像添加效果？

0 个答案: