1

我需要一个简单的 javascript（可能带有 jQ​​uery）文本/html 编辑器。我做了很多搜索并找到了大量的插件，但是对于我正在寻找的东西来说，它们中的大多数都太“完整”了。

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

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

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

提前致谢

4

5 回答 5

6

Aloha是所见即所得在线编辑器中最好的。他们也有很好的维基

于 2012-08-17T09:55:14.297 回答
2

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

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编辑器

于 2012-08-17T10:18:07.997 回答
1

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

它非常“完整”，但是如果您指定要提供的内容（如果您愿意，可以将主题更改为更简洁的主题），您可以获得一个非常简约的 gui。

这是一个很好的解决方案，胜过编写自己的恕我直言。

这是一个示例，它展示了一个比完整版简单得多的 gui，只是为了展示他们系统的灵活性。您可以将其雕刻成您的确切规格。

于 2012-08-17T09:48:15.747 回答
1

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

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

于 2012-08-17T09:44:18.563 回答
0

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

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/default-example.html

于 2015-12-01T05:41:08.507 回答