• [轉]用jQuery向FCKEditor插件取值、赋值


    From : http://blog.sina.com.cn/s/blog_5f66526e0100kf6b.html

        FCKeditor是一款很好用的html在线编辑器,也给用户提供了不少插件接口,因此用起来较得心应手。

        公司有用到Jquery框架,有一个模板替换的功能需要用Js来动态改变FCK的值,本人google了下,找到一大虾的一篇文章(原文:jQuery FCKEditor插件取值、赋值),总结了下要实现取值赋值的功能主要有如下几个步骤。

    主要步骤:

    第一步:导入需要的js文件(根据实际情况修改相应路径)
    <script src="js/jquery.js" type=text/javascript></script>   
    <script src="fckeditor/fckeditor.js" type="text/javascript"></script>
    第二步:初始化(根据实际情况修改相应路径)   

    sBasePath    = '/duotunkf/fckeditor/' ;#编辑器所在文件夹;
    oFCKeditor    = new FCKeditor('content') ;
    oFCKeditor.BasePath = sBasePath ;
    oFCKeditor.Value = 'test' ;
    oFCKeditor.ToolbarSet = 'Basic' ;
    oFCKeditor.Create() ;

    其中content为页面你所绑定的textArea的id或name

    第三步:取值

    var oEditor = FCKeditorAPI.GetInstance('content');  
    editorValue = oEditor.GetHTML();  
    第四步:赋值(更新的时候先把原有的值赋给textarea)

    var oEditor = FCKeditorAPI.GetInstance('content');  
    oEditor.SetHTML("value"); 

     

    下面是本人写的一个赋值测试程序,供大家参考。源码如下:

    <html>
     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script src="js/jquery-1.3.2.min.js"></script>
            <script src="fckeditor/fckeditor.js"></script>
            <script>
            $(document).ready(function(){
              $("#test").click(function(){
        var oEditor = FCKeditorAPI.GetInstance('content');  
        oEditor.SetHTML($("#test option:selected" ).text());
        });
      });
            </script>
     </head>
     <body>
      
      <form action="" method="post">
            <script>
                sBasePath    = '/duotunkf/fckeditor/' ;#编辑器所在文件夹;
                oFCKeditor   = new FCKeditor('content') ;
                oFCKeditor.BasePath = sBasePath ;
                oFCKeditor.Value = 'test' ;
                oFCKeditor.ToolbarSet = 'Basic' ;
                oFCKeditor.Create() ;
      </script>
       <br>
                <label for="test">
          <select name="test" size="4" id="test">
            <option value="1">i.点击这里改变编辑器的值</option>
            <option value="2">ii.点击这里改变编辑器的值</option>
            <option value="3">iii.点击这里改变编辑器的值</option>
               </select>
              </label>
      </form>
     </body>
    </html>

    用jQuery向FCKEditor插件取值、赋值

  • 相关阅读:
    vue父子组件传参之ref
    新版chrome移动端踩坑
    vue动态绑定class 选中当前列表变色
    vue 利用computed对文章列表进行排序
    vue数组排序
    Vue+Koa2移动电商实战 (十一)前后端通讯和跨域处理
    jQuery基础知识--Form基础
    关于可变数组的一点小知识
    锋利的jQuery读书笔记---jQuery中动画
    锋利的jQuery读书笔记---jQuery中的事件
  • 原文地址:https://www.cnblogs.com/Athrun/p/2099729.html
Copyright © 2020-2023  润新知