如何允许用户使用样式自定义文本字段

Question

我目前正在为学校做一个项目，需要创建一个博客。我们的部分任务是创建一个输入字段，允许用户自定义字段内文本的样式。尽管我环顾四周，但还是没能找到我要找的东西。为了澄清起见，目标是创建一个类似于创建帖子时此处的字段的字段（下面包含照片）。

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

下面，我将举例说明我到底想要什么，以防我不清楚。

预先感谢您的任何帮助/指导！

示例1：

示例2：

Answer 1

只需使用tinymce - 除非您的任务是创建实际的控件本身，不幸的是，这比创建博客要复杂得多。

在此处获取 TinyMCE： https://github.com/tinymce

或在他们的网站上： https://www.tinymce.com/

然后创建一个textarea元素并启动控件：

在页面底部包含 TinyMCE 并在该包含下方包含此脚本。

示例@TinyMCE 网站：https://www.tinymce.com/docs/demo/basic-example/#liveexample

HTML：

<textarea></textarea>

Javascript：

tinymce.init({
  selector: 'textarea',
  height: 500,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code'
  ],
  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
});

Answer 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 以及与所选文本相关的指令。

Answer 3

为此使用文本编辑器。有很多文本编辑器插件可用。

这可能对您有帮助：http://ckeditor.com/

注意： 在使用编辑器之前也要查看许可证。

Answer 4

免费开源选项是 https://quilljs.com/。

来自他们的快速入门指南：

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>