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

我目前正在为学校做一个项目，需要创建一个博客。我们任务的一部分是创建一个输入字段，允许用户自定义字段中文本的样式。虽然我环顾了四周，但我没有找到我要找的东西。为了澄清这一点，我们的目标是创建一个字段，该字段类似于创建下面包含的帖子照片时在此处显示的字段

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

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

提前感谢您的帮助/指导

例1：

例2：

---

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

这可能会帮助您：

---

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

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

在此处获取TinyMCE：

或在其网站：

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

在页面底部包含TinyMCE，并在下面包含包含的脚本

TinyMCE网站的示例如下：

HTML:

你可以自己创造它

我在几分钟内就把它拼凑起来了。这是相当初级的，但如果您想自己构建它，这可能是您的起点：

var area=document.getElementsByClassName'augmented-textarea'； var命令=[{ 展示:B,， f:函数文本{ 返回**+文本+**； }, }, { 展示:我,， f:函数文本{ 返回+text+； }, }, ]; Array.prototype.forEach.callareas，initTextarea； 函数initTextareat{ var wrapper=document.createElement'div'； 添加'textarea-wrapper'； var bar=document.createElement'div'； 添加'textarea-bar'； commands.forEachfunctionc{ var b=document.createElement“按钮”； b、 类型='按钮'； b、 innerHTML=c.display； b、 addEventListener“单击”函数{ 如果t.selectionStart===t.selectionEnd 回来 var v=t.值， ss=t.selectionStart， se=t.selectionEnd， 前缀=v.0，ss， 后缀=v.slicese， 目标=v.Substrings，se， 更改=c.ftarget； t、 值=前缀+更改+后缀； t、 selectionStart=ss； t、 selectionEnd=ss+changed.length； t、 重点； }; b.酒吧； }; t、 parentNode.insertBeforewrapper，t； t、 parentNode.removeChildt； 包装器.appendChildbar； appendchild； } .textarea包装器{ 显示器：flex； 溢出：隐藏； 宽度：300px； 弯曲方向：立柱； 边框：1px纯色灰色； } .文本区域栏{ 背景色：ddd； 最小高度：30px； 线高：30px； } .text区域栏按钮{ 背景色：ddd； 字体系列：衬线； 字体大小：20px； 宽度：30px； 显示：内联块； 边框：1px纯色灰色； 边界半径：3px； 保证金：3倍； 光标：指针； } .扩大文本区域{ 宽度：100%； 最大宽度：100%； 高度：70像素； 框大小：边框框； 边界：0； }

---

选择一些文本并按下上面的按钮之一！非常感谢你！这比我想象的要容易。非常感谢你Ryan，我当然感谢你的帮助！非常感谢，我将进一步扩展。

<textarea></textarea>

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'
  ]
});