Question

我已经在我的cms上安装了一个WYSIWYG富文本编辑器，但是它有一些问题 - 其中一个主要的问题是，如果我从任何类型的文件复制并粘贴内容，那么它就是.txt或.doc等等它可以正常工作并将其保存到数据库中但是如果我回去编辑帖子它会消失吗？所以，我查看数据库，看起来它将内容保存到行字段中作为html - 我猜我用于编辑器的iFrame无法渲染出html或只是显示我没有html的内容？

以下是我目前的做法 - 除了使用iframe之外，我还可以看到其他建议吗？

选择格式化按钮：

<button class="postEditBtn" type="button" onclick="ibold()" title="Bold Text"><i class="fa fa-bold"></i></button>
<button class="postEditBtn" type="button" onclick="iitalic()" title="Italic Text"><i class="fa fa-italic"></i></button>
<button class="postEditBtn" type="button" onclick="iunderline()" title="Underline Text"><i class="fa fa-underline"></i></button>
<button class="postEditBtn" type="button" onclick="ifontName()" title="Font Family"><i class="fa fa-font"></i></button>
<button class="postEditBtn" type="button" onclick="ifontsize()" title="Font Size"><i class="fa fa-text-height"></i></button>
<button class="postEditBtn" type="button" onclick="ifontcolor()" title="Font Colour"><i class="fa fa-eraser"></i></button>
<button class="postEditBtn" type="button" onclick="ihiliteColor()" title="Highlight Text"><i class="fa fa-magic"></i></button>
<button class="postEditBtn" type="button" onclick="ilink()" title="Add/Edit Link"><i class="fa fa-link"></i></button>

        <textarea name="doc_content" id="doc_content" placeholder="Document Content" style="display: none;"></textarea>
        <iframe name="editor" id="editor" style="height: 600px;"></iframe>
        <button class="update_doc" onclick="formsubmit()" type="submit" name="submit">Create Document</button>

上面的位是iframe，它将iframe中的内容推送到隐藏的textarea中，然后将其发布到数据库中 - 这是JS我使用句柄格式化按钮：

function iframeOn(){
    editor.document.designMode = 'on';
}

function ibold(){
    editor.document.execCommand('bold', false, null);
}

function iitalic(){
    editor.document.execCommand('italic', false, null);
}

function iunderline(){
    editor.document.execCommand('underline', false, null);
}

function ifontsize(){
    var size = prompt("Enter a size (1-7) 3 is default", "");
    editor.document.execCommand('fontsize', false, size);
}

function ifontcolor(){
    var color = prompt("Enter a hex code or name of color", "");
    editor.document.execCommand('forecolor', false, color);
}

function ihiliteColor(){
    editor.document.execCommand('hiliteColor', false, "#FFFF99");
}

function ilink(){
    var link = prompt("Enter a link", "http://");
    editor.document.execCommand('createLink', false, link);
}

function justifyLeft(){
    editor.document.execCommand('justifyLeft', false, null);
}

function ijustifyCenter(){
    editor.document.execCommand('justifyCenter', false, null);
}

function ijustifyRight(){
    editor.document.execCommand('justifyRight', false, null);
}

function iunlink(){
    editor.document.execCommand('unlink', false, null);
}

function iUnorderedList(){
    editor.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
    editor.document.execCommand("InsertUnorderedList", false,"newUL");
}

function iUndo(){
    editor.document.execCommand("Undo",false,null);
}

function iRedo(){
    editor.document.execCommand("Redo",false,null);
}

function iImage(){
    var imgSrc = prompt('Enter image Location', '');
    if(imgSrc != null){
        richTextField.document.execCommand('insertImage', false, imgSrc);
    }
}


function formsubmit(){
    document.getElementById("doc_content").value = window.frames['editor'].document.body.innerHTML;
    document.getElementById("rtf").submit();
}

onload = function()
{
    document.editor.document.body.style.fontFamily = 'sans-serif';
}

更新

请按要求提供小提琴

https://jsfiddle.net/iamdanbarrett/geacymx6/

富文本编辑器格式化问题

0 个答案: