Question

我很挣扎，但我找不到一个与jquerymobile和Cordova兼容的富文本编辑器。

我有一个容器div现在我想把编辑器放在其中，如果容器div的宽度和高度发生变化，编辑器的宽度和高度应该改变我已经尝试了许多编辑器，如TinyMCE，但他们没有响应，我不想要使用bootstrap库。请帮帮忙？

Answer 1

这个问题很老，但是回答得不是很好，所以今天早些时候我遇到了这个问题。 jHtmlArea可以在响应页面上使用，对其源代码进行一些小的修改。

jHtmlArea的原始文档可以在这里找到： https://pietschsoft.com/post/2009/07/22/jhtmlarea-the-all-new-html-wysiwyg-editor-for-jquery

原始源代码已迁移到GitHub：https://github.com/crpietschmann/jHtmlArea

要使jHtmlArea响应，只需将jHtmlArea-0.8.js中的init函数代码替换为以下代码：

init: function (elem, options) {
    if (elem.nodeName.toLowerCase() === "textarea") {
        var opts = $.extend({}, jHtmlArea.defaultOptions, options);
        elem.jhtmlareaObject = this;

        var textarea = this.textarea = $(elem);
        var container = this.container = $("<div/>").addClass("jHtmlArea").insertAfter(textarea);

        var toolbar = this.toolbar = $("<div/>").addClass("ToolBar").appendTo(container);
        priv.initToolBar.call(this, opts);

        var iframe = this.iframe = $("<iframe/>").height(textarea.height());
        iframe.width('inherit');

        var htmlarea = this.htmlarea = $("<div/>").width('100%').append(iframe);

        container.append(htmlarea).append(textarea.hide());

        priv.initEditor.call(this, opts);
        priv.attachEditorEvents.call(this);

        // Fix total height to match TextArea
        iframe.height(iframe.height() - toolbar.height());
        // toolbar.width(textarea.width());

        if (opts.loaded) { opts.loaded.call(this); }
    }
},

希望这可以为其他人节省一些时间。

Answer 2

jHtmlArea是一个不错的WYSIWYG编辑器

使用非常简单

// Turn all <textarea/> tags into WYSIWYG editors
$(function() {
    $("textarea").htmlarea();
});

您可以从此处下载该库 http://pietschsoft.com/demo/jHtmlArea/

在jquerymobile网站和移动应用程序中响应所见即所得编辑器

2 个答案: