如何允许用户使用样式自定义文本字段 [英] How to allow users to customize text field with styling

问题描述

我目前正在为一个学校项目工作，并且需要创建一个博客.我们的部分工作是创建一个输入字段，该字段将允许用户自定义其在该字段内的文字样式.尽管环顾四周，但我一直找不到寻找的东西.为了澄清起见，目标是创建一个与创建帖子时此处的字段相似的字段(下面的照片).

尽管我不确定从哪里开始，但我假设需要Javascript和/或JQuery.功能将包括文本样式，添加链接，跟踪[返回](以创建新段落)和任何其他HTML/CSS元素.

下面，我将提供一些示例，以防万一我不清楚.

在此先感谢您的帮助/指导！

示例1:

示例2:

解决方案

您可以自己创建它！

我在几分钟内将它们放在一起.这很初级，但是如果您想自己构建它，这可能是您的起点:

 var areas = document.getElementsByClassName('augmented-textarea');

var commands = [{
  display: "<b>B</b>",
  f: function(text) {
    return "**" + text + "**";
  },
}, {
  display: "<i>I</i>",
  f: function(text) {
    return "_" + text + "_";
  },
}, ];

Array.prototype.forEach.call(areas, initTextarea);

function initTextarea(t) {
  var wrapper = document.createElement('div');
  wrapper.classList.add('textarea-wrapper');
  var bar = document.createElement('div');
  bar.classList.add('textarea-bar');

  commands.forEach(function(c) {
    var b = document.createElement('button');
    b.type = 'button';
    b.innerHTML = c.display;
    b.addEventListener('click', function() {
      if (t.selectionStart === t.selectionEnd)
        return;

      var v = t.value,
        ss = t.selectionStart,
        se = t.selectionEnd,
        prefix = v.slice(0, ss),
        suffix = v.slice(se),
        target = v.substring(ss, se),
        changed = c.f(target);
      t.value = prefix + changed + suffix;
      t.selectionStart = ss;
      t.selectionEnd = ss + changed.length;
      t.focus();
    });
    bar.appendChild(b);
  });

  t.parentNode.insertBefore(wrapper, t);
  t.parentNode.removeChild(t);
  wrapper.appendChild(bar);
  wrapper.appendChild(t);
} 

 .textarea-wrapper {
  display: flex;
  overflow: hidden;
  width: 300px;
  flex-direction: column;
  border: 1px solid gray;
}
.textarea-bar {
  background-color: #ddd;
  min-height: 30px;
  line-height: 30px;
}
.textarea-bar button {
  background-color: #ddd;
  font-family: serif;
  font-size: 20px;
  width: 30px;
  display: inline-block;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 3px;
  cursor: pointer;
}
.augmented-textarea {
  width: 100%;
  max-width: 100%;
  height: 70px;
  box-sizing: border-box;
  border: 0;
} 

 <textarea class="augmented-textarea">Select some text and press one of the buttons above!</textarea> 

每个命令都在commands数组中注册，其中的HTML表示按钮，并带有与所选文本有关的指令.

I am currently working on a project for school and am required to create a blog. Part of our assignment is to create an input field that would allow users to customize the styling of their text within the field. Although I have looked around, I have had no luck in finding what it is that I am looking for. For clarification, the goal is to create a field that resembles the field on here when creating a post (Photo included below).

I am assuming that Javascript and/or JQuery is required, although I am unsure where to begin. Features would include text styling, addition of links, keeping track of [return]s (to create new paragraphs) and any other HTML/CSS elements.

Below, I will include examples of what it is exactly that I am wanting in case I am in any way unclear.

Thank you in advance for any help/guidance!

Example 1:

Example 2:

解决方案

You could create it yourself!

I threw this together in a couple of minutes. It's pretty rudimentary, but if you want to build it yourself, this could be a starting point for you:

var areas = document.getElementsByClassName('augmented-textarea');

var commands = [{
  display: "<b>B</b>",
  f: function(text) {
    return "**" + text + "**";
  },
}, {
  display: "<i>I</i>",
  f: function(text) {
    return "_" + text + "_";
  },
}, ];

Array.prototype.forEach.call(areas, initTextarea);

function initTextarea(t) {
  var wrapper = document.createElement('div');
  wrapper.classList.add('textarea-wrapper');
  var bar = document.createElement('div');
  bar.classList.add('textarea-bar');

  commands.forEach(function(c) {
    var b = document.createElement('button');
    b.type = 'button';
    b.innerHTML = c.display;
    b.addEventListener('click', function() {
      if (t.selectionStart === t.selectionEnd)
        return;

      var v = t.value,
        ss = t.selectionStart,
        se = t.selectionEnd,
        prefix = v.slice(0, ss),
        suffix = v.slice(se),
        target = v.substring(ss, se),
        changed = c.f(target);
      t.value = prefix + changed + suffix;
      t.selectionStart = ss;
      t.selectionEnd = ss + changed.length;
      t.focus();
    });
    bar.appendChild(b);
  });

  t.parentNode.insertBefore(wrapper, t);
  t.parentNode.removeChild(t);
  wrapper.appendChild(bar);
  wrapper.appendChild(t);
}

.textarea-wrapper {
  display: flex;
  overflow: hidden;
  width: 300px;
  flex-direction: column;
  border: 1px solid gray;
}
.textarea-bar {
  background-color: #ddd;
  min-height: 30px;
  line-height: 30px;
}
.textarea-bar button {
  background-color: #ddd;
  font-family: serif;
  font-size: 20px;
  width: 30px;
  display: inline-block;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 3px;
  cursor: pointer;
}
.augmented-textarea {
  width: 100%;
  max-width: 100%;
  height: 70px;
  box-sizing: border-box;
  border: 0;
}

<textarea class="augmented-textarea">Select some text and press one of the buttons above!</textarea>

Each command is registered in the commands array, with HTML for a button, and an instruction to do with the selected text.

这篇关于如何允许用户使用样式自定义文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！