基于 Jquery 的 WYSIWYG 与 On-Air 可能性答案

【问题标题】：Jquery based WYSIWYG with On-Air possibility基于 Jquery 的 WYSIWYG 与 On-Air 可能性
【发布时间】：2012-09-03 09:23:55
【问题描述】：

我遇到过http://redactorjs.com，这是一个非常好的所见即所得编辑器，具有直播功能。换句话说，在一行中，您可以将静态 div 动态转换为可编辑的文本区域。

我-不想-为此付费（出于某些原因我不会透露），因此我正在寻找替代方案。

您是否使用过基于 jquery 的轻量级编辑器，可以轻松地在运行中使用？

我正在寻找我会使用如下的东西：

$("#edit_btn").click(function({
     $("#my_div").turnIntoEditor();
}));

$("#save_btn").click(function({
     $("#my_div").post_content("http://target");
     $("#my_div").turnIntoStatic();
}));

请不要介意 post_content 和其他函数名称，因为它们仅供参考，以显示我所关注的用法。

谢谢

【问题讨论】：

你应该查看另一个帖子stackoverflow.com/questions/708801/…

标签： javascript jquery jquery-plugins wysiwyg

【解决方案1】：

我终于选择了ckeditor。我可以按如下方式轻松使用它（poc）：

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">

                <head>
                    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
                    <title>Title</title>


                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
                    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
                    <script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                            $("#edit").click(function(){
                                $( '.editable' ).ckeditor();
                            });

                            $("#save").click(function(){
                                var editor = CKEDITOR.instances['editor'];
                                if (editor) { editor.destroy(); }

                                alert($('#editor').html());
                            });
                        });

                    </script>
                </head>
            <body>
                <span id="edit">EDIT</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="save">SAVE</span><br/><br/>
                <div class="editable" id="editor">
                    Some useless content
                </div>
            </body>
            </html>

【讨论】：