标签: wysiwyg

在我的项目中,我需要编写一个小的WYSIWYG编辑器(只是让用户使文本粗体/斜体/下划线,也许还有更多).所以我不想使用像tinymce或fckeditor这样的怪物.我的问题是我需要知道的HTML元素和JavaScript函数是什么？在这个问题中,我可以编辑和格式化文本的HTML元素非常有趣.

我正在开发一个项目,需要一个简单,免费的Java HTML WYSIWYG编辑器.谁能指出我正确的方向？

它只有很小的空间可以容纳,所以一些相当简单的东西是最好的.

有没有iPad兼容的wysiwyg HTML编辑器？

编辑:我正在寻找的东西可以在Web应用程序上运行,而不是原生的iPad应用程序.

有没有人知道一个很好的javascript(最好是jquery)库,它允许你以类似于weebly内容编辑器的方式进行拖放和编辑？

我正在寻找一个jQuery插件/库,它使contentEditable属性在所有主流浏览器中都能正常工作(我甚至可以不使用IE6).我不需要一个完整的WYSIWYG编辑器解决方案,因为我想自己构建 - 但是我专注于用户体验,所以我更喜欢"即插即用"解决方案.

我只需要通过代码(类似API)访问编辑器功能,我自己构建用户界面.

我正在使用Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html.我想获取keyup的值并将文本插入另一个div.cleditor带有我正在下面的jsfiddle示例中使用的change()事件,但这与keyup不同.我希望在我输入时更新div.我尝试过键盘但它不起作用.

这就是我现在拥有的

$("#input").cleditor().change(function(){
    var v = $('#input').val();
    $('#x').html(v);
})

检查jsfiddle http://jsfiddle.net/qm4G6/11/

我的团队使用asp.net mvc3(c#)在一个项目中工作.根据项目要求,我们需要像Microsoft Word一样实现分页功能.我需要保存分页符,页面大小可能是a4,letter,legal等.

是否可以控制ckeditor中内容的页面大小,并在编辑器中跨越某个高度或大小时插入页面分隔符,就像它在MS Word中的工作方式一样>

有没有替代解决方案？

我尝试将Beautifull WYSIWYG Redactor(http://imperavi.com/redactor/)集成到自定义的AngularJS指令中.

Visualy它可以工作,但我的自定义指令与ng-model不兼容(我不明白为什么)

这是你如何使用我的指令:

<wysiwyg ng-model="edited.comment" id="contactEditCom" content="{{content}}" required></wysiwyg>

这是指令代码:

var myApp = angular.module('myApp', []);
myApp.directive("wysiwyg", function(){

var linkFn = function(scope, el, attr, ngModel) {

    scope.redactor = null;

    scope.$watch('content', function(val) {
        if (val !== "")
        {
            scope.redactor = $("#" + attr.id).redactor({
                focus : false,
                callback: function(o) {
                    o.setCode(val);
                    $("#" + attr.id).keydown(function(){
                        scope.$apply(read);
                    });
                }
            });
        }
    });

    function read() {
        var content = scope.redactor.getCode();
        console.log(content);
        if (ngModel.viewValue != content)
        {
            ngModel.$setViewValue(content);
            console.log(ngModel);
        }
    }

};

 return { …

我正在学习本教程:http://www.atwix.com/magento/add-category-attribute/ 一切正常,属性被添加到类别中,但没有字段下方的WYSIWYG按钮.系统>配置>内容管理中启用了所见即所得.

$this->startSetup();
$this->addAttribute('catalog_category', 'custom_att', array(
    'group'         => 'General',
    'input'         => 'textarea',
    'type'          => 'text',
    'label'         => 'My attribute',
    'backend'       => '',
    'visible'       => true,
    'required'      => false,
    'wysiwyg_enabled' => true,
    'visible_on_front' => true,
    'is_html_allowed_on_front' => true,
    'global'        => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
));
$this->endSetup();

无论我尝试什么,WYSIWYG都没有启用我的属性.有人可以帮忙吗？或者可能有一个解决方法吗？

编辑:我搜索了其他帖子,但都说这段代码应该添加WYSIWYG:

'wysiwyg_enabled' => true,

但事实并非如此.

我正在为CMS构建一个html/javascript主题设计器.元素绝对定位并且可以通过鼠标移动/调整大小,和/或包含可编辑的文本,其高度可以由行数确定.但是我遇到的问题是父元素的高度不会扩展以包含其绝对定位的子元素.

最小的代码(也在JSFiddle上):

<style>
    div.layer { position: absolute }
    div.layer1 { width: 400px; border: 1px solid #ccc }
    div.layer2 { top: 15px; left: 100px; width: 100px; border: 1px solid blue }
</style>
<div class="layer layer1">container should expand to the bottom of the child.
    <div class="layer layer2" contentEditable>Child with<br/>editable text.</div>
</div>

一个纯CSS的解决方案是理想的,我不关心旧的浏览器.但我主要是寻找任何方法来防止需要javascript在每个页面上运行使用创建的主题来设置它们的高度(因为具有相同主题的页面可能具有不同的文本量).

已经有一些类似的问题,但他们接受的答案(例如不使用绝对定位)在我的情况下不起作用.除非有办法让多层可拖动/可调整大小的元素没有位置:绝对.