简单的Javascript文本编辑器或一组函数

Simple Javascript text editor or set of functions

本文关键字：一组 函数 Javascript 文本 文本编辑 编辑器 简单      更新时间：2023-09-26

我需要一个简单的javascript（可能带有jQuery）text/html编辑器。我做了很多搜索，发现了很多插件，但对于我所寻找的来说，它们大多太"完整"了。

事实上，我想要的只是一组功能，而不是复杂的UI或花哨的工具栏。这些功能基本上是

  • 将字体系列更改为有限的预定义集合之一（容器上应该可以同时具有多个字体）
  • 更改字体大小
  • 更改字体颜色
  • 更改格式样式（粗体、斜体、下划线等）

你会推荐什么？我应该写我自己的插件吗？

提前感谢

Aloha是所见即所得在线编辑器中最好的。他们有很好的wiki以及

所有web编辑器的工作都非常简单，并依赖于浏览器功能。

通过在元素上设置属性contenteditable="true"，并在页面加载后调用：$('#edit').designMode = "on";，可以使HTML页面的任何字段都可编辑

您可以使用更改所选内容的字体

document.execCommand("fontname", false, "Courier New");

的大小

document.execCommand("fontsize", false, "20");

的颜色

document.execCommand("ForeColor", false, "green");

粗体，斜体，带：

document.execCommand("bold", false);
document.execCommand("italic", false);

这是我创建的一个示例测试页面（遗憾的是，它只适用于FF，因为在其他浏览器中，当你点击按钮时，他会失去对文本的选择）

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <title>HTML5 Demo: ContentEditable</title>
        <script src="jquery.js"></script>
    </head>
    <body onLoad="onload()">
        <h2>Go ahead, edit away!</h2>
        <div id="editarea"></div>
        <!-- 'contenteditable="true"' need so the user can select the element and edit it's text-->
        <section contenteditable="true">
            <p>
                Here's a typical paragraph element
            </p>
            <div contenteditable="true">
                <p>
                    hallo welt
                </p>
            </div>
            <ol>
                <li>
                    and now a list
                </li>
            </ol>
        </section>
    </body>
    <script>
        function onload() {
            // needed for the resize boxes in IE
            document.designMode = "on"
            $('#editarea').append($('<button>').html("fontname").click(function() {
                document.execCommand("fontname", false, "Courier New");
            }));
            $('#editarea').append($('<button>').html("fontsize").click(function() {
                document.execCommand("fontsize", false, "20");
            }));
            $('#editarea').append($('<button>').html("changeSize").click(function() {
                document.execCommand("ForeColor", false, "green");
            }));
            $('#editarea').append($('<button>').html("bold").click(function() {
                document.execCommand("bold", false);
            }));
            $('#editarea').append($('<button>').html("italic").click(function() {
                document.execCommand("italic", false);
            }));
        }
    </script>
</html>

PS如果你需要更多，你应该看看Aloha编辑器

extjs有一个非常好的一次性，但框架相当臃肿。

否则，请检查jquery插件，我确信有很多插件。extjs仍然是我的最爱。

TinyMCE是一个很棒的！您可以准确地指定要向用户提供的内容，而且实现起来非常容易。

它非常"完整"，但如果你指定了你想提供的内容（如果你喜欢，可以将主题更改为更简洁的内容），你可以得到一个非常简约的gui。

这是一个很好的解决方案，胜过编写自己的IMHO。

这是一个示例，它显示了一个比完整版本简单得多的gui，只是为了显示他们系统的灵活性。您可以根据自己的具体规格进行雕刻。

您可以编写自己的插件或使用插件。这是我的基本想法。

HTML:

<div id="editor" contenteditable="true">Lorem Ipsum is simply dummy text</div>
<button id="make-bold">Make bold</button>

JS:

document.getElementById('make-bold').addEventListener('click', function(event){
    event.preventDefault();
    var selection = window.getSelection();
    var range = selection.getRangeAt(0).cloneRange();
    var tag = document.createElement('strong');
    range.surroundContents(tag);
    selection.addRange(range);
});

现场演示-https://jsfiddle.net/im4aLL/Lyusxq3p/

我由此引出了基本的想法，并最终制作了一些我在未来项目中使用的东西。

我制作了EasyEditor-https://github.com/im4aLL/easyeditor从上面的概念。还有很多事情要做。比如在包装一个节点时，你需要检查该选择是否已经与其他节点或同一节点包装在一起。还有很多功能需要克服。

或者你可以试试我的轻量级插件，我为像你这样需要完全灵活的解决方案来将其与另一个应用程序集成的人制作了这个插件。

以下是使用EasyEditor的演示和文档

  • 演示：http://habibhadi.com/lab/easyeditor/
  • 示例：http://habibhadi.com/lab/easyeditor/examples.html
  • 文件：http://habibhadi.com/lab/easyeditor/documentation.html

用法

http://habibhadi.com/lab/easyeditor/default-example.html

相关文章：